Getting started
To use the MapFont, place the main CSS files in your CSS directory, and the font files in a "font" directory on the same folder level as the CSS director. Once you've done that, all you need to do to reference an icon in your HTML is type <i class="mf mf-petrol-station"></i>
All icons
mf-petrol-station
f021
mf-gas-station
f022
mf-car-charger
f023
mf-car-rent
f025
mf-vehicle-ferry
f026
mf-car-wash
f027
mf-slippery-road
f028
mf-car-accident
f029
mf-map-marker
f031
mf-map-marker-square
f032
mf-paper-map
f033
mf-online-map
f034
mf-plane
f041
mf-helicopter
f042
mf-bike
f045
mf-old-scooter
f046
mf-scooter
f047
mf-ricksha
f048
mf-quad-bike
f049
mf-sportcar
f04a
mf-off-road
f04b
mf-truck
f04c
mf-bus
f04d
mf-trolleybus
f04e
mf-tram
f04f
mf-subway
f050
mf-monorail
f051
mf-train
f052
mf-funicular
f053
mf-cableway
f054
mf-snowmobile
f055
mf-water-scooter
f057
mf-shop
f061
mf-market
f062
mf-stock
f063
mf-business-center
f064
mf-post
f065
mf-atm
f066
mf-shower
f067
mf-wc
f068
mf-cafe
f069
mf-bar
f06a
mf-restaurant
f06b
mf mf-carpenter
f06c
mf-mechanic
f06d
mf-gym
f06f
mf-playground
f070
mf-museum
f071
mf-sculpture
f072
mf-monument
f073
mf-fountain
f074
mf-square
f075
mf-park
f076
mf-pharmacy
f077
mf-rabbit
f078
mf-anchor
f079
mf-battletank
f080
mf-spike
f081
mf-day-cloudy
f082
mf-factory
f083
mf-outdoor-table
f084
mf-tent
f085
mf-home
f086
mf-pin
f087
mf-camping
f088
mf-disabled
f089
mf-ambulance
f090
mf-hospital
f091
mf-first-aid-station
f092
mf-mobile-hospital
f093
mf-first-aid-kit
f094
mf-medication
f095
mf-hospital-ward
f096
Utility Classes
Use these special, built-in utility classes to flip, rotate, or assign a fixed width to any icon.
Flip
mf-flip-horizontal
mf-flip-vertical
Rotate
mf-rotate-90
mf-rotate-180
mf-rotate-270
Fixed Width
mf-fw
Online map
mf-gmap-api
mf-ymap-api
Google Map integration
‹script type="text/javascript"›
point = new MarkerWithLabel({
position: new google.maps.LatLng(57.145, 65.523),
draggable: false,
raiseOnDrag: false,
icon: ' ',
// Type "spacebar" to deactivate standard icon
map: gMap,
labelContent: '<i class="mf mf-map-marker-square mf-gmap-api"></i>',
// Use standard MapFont classes with addition class mf-gmap-api
labelAnchor: new google.maps.Point(57.145, 65.523)
});
‹/script›
Download font and templates
point = new MarkerWithLabel({
position: new google.maps.LatLng(57.145, 65.523),
draggable: false,
raiseOnDrag: false,
icon: ' ',
// Type "spacebar" to deactivate standard icon
map: gMap,
labelContent: '<i class="mf mf-map-marker-square mf-gmap-api"></i>',
// Use standard MapFont classes with addition class mf-gmap-api
labelAnchor: new google.maps.Point(57.145, 65.523)
});
‹/script›
Yandex Map integration
‹script type="text/javascript"›
point = new ymaps.GeoObject({
geometry: {
type: "Point",
coordinates: [57.145, 65.523]
},
properties: {
iconContent: '<i class="mf mf-map-marker mf-ymap-api"></i>',
// Use standard MapFont classes with addition class mf-ymap-api
balloonContent: 'Point desctiption'
}
}, {
preset: 'islands#grayCircleIcon',
// Best view with light colour circle icon
draggable: true,
}),
‹/script›
Download font and templates
point = new ymaps.GeoObject({
geometry: {
type: "Point",
coordinates: [57.145, 65.523]
},
properties: {
iconContent: '<i class="mf mf-map-marker mf-ymap-api"></i>',
// Use standard MapFont classes with addition class mf-ymap-api
balloonContent: 'Point desctiption'
}
}, {
preset: 'islands#grayCircleIcon',
// Best view with light colour circle icon
draggable: true,
}),
‹/script›
Leaflet integration
‹script type="text/javascript" src="Leaflet.Icon.Glyph.js"›
‹script type="text/javascript"›
function fillMap(green) {
var myCenter = new L.LatLng(57.145, 65.523);
var map = new L.Map('leaflet', {center: myCenter, zoom: 14});
var positron = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
maxZoom: 24,
maxNativeZoom: 18
}).addTo(map);
L.marker([57.145, 65.523], {icon: L.icon.glyph({ prefix: 'mf', glyph: 'mf-map-marker', glyphSize: '24px' }) }).addTo(map);
}
fillMap(true);
});
‹/script›
Download font and templates
‹script type="text/javascript"›
function fillMap(green) {
var myCenter = new L.LatLng(57.145, 65.523);
var map = new L.Map('leaflet', {center: myCenter, zoom: 14});
var positron = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
maxZoom: 24,
maxNativeZoom: 18
}).addTo(map);
L.marker([57.145, 65.523], {icon: L.icon.glyph({ prefix: 'mf', glyph: 'mf-map-marker', glyphSize: '24px' }) }).addTo(map);
}
fillMap(true);
});
‹/script›
OpenLayers integration
‹script type="text/javascript"›
var pointLayer = new OpenLayers.Layer.Vector('Overlay', {
styleMap: new OpenLayers.StyleMap({
'default': {
fill: false,
stroke: false,
label: "\uf031",
//Use \u and unicode index
labelXOffset: 0,
labelYOffset: 0,
fontColor: "#000000",
fontSize:"20px",
fontOpacity: 1,
fontFamily: "MapFont",
labelOutlineWidth: 2
}
})
});
‹/script›
Download font and templates
var pointLayer = new OpenLayers.Layer.Vector('Overlay', {
styleMap: new OpenLayers.StyleMap({
'default': {
fill: false,
stroke: false,
label: "\uf031",
//Use \u and unicode index
labelXOffset: 0,
labelYOffset: 0,
fontColor: "#000000",
fontSize:"20px",
fontOpacity: 1,
fontFamily: "MapFont",
labelOutlineWidth: 2
}
})
});
‹/script›