MapFont, Using Fonts with Icons in Map Services

About six months ago, I needed to insert a font icon from the FontAwesome series on a Google map. In the course of the work of the existing icons was not enough, and therefore I had to draw a certain number of their icons. Later, I decided that the sin of goodness would disappear and, adding some more characters, I called my MapFont and posted it on the network.



At the time of this writing, six dozen different icons are ready, and I slowly continue to draw and upload new ones.


')
The font was designed in the already familiar form of ttf + css, and is inserted into the body of the html document or on the map using the css class "mf", and the class of the specific icon:

<i class="mf mf-petrol-station"></i> 

For maps of Yandex or Google, by trial and error, corrective classes mf-ymap-api and mf-gmap-api were created, respectively. In the Yandex map, this class adjusts the size of the icon in accordance with the size of the colored circle, and in the Hukle map it adjusts the size and position of the text icon so that it does not shift relative to the place where it is installed when the scale changes.

Also, for convenience, I inserted several utility classes for reflection ( mf-flip-horizontal, mf-flip-vertical ) and rotation of icons ( mf-rotate-90, mf-rotate-180, mf-rotate-270 ).

You can use the following code to insert icons into online maps.

Google Maps ( JSFiddle )

 point = new MarkerWithLabel({ position: new google.maps.LatLng(57.145, 65.523), draggable: false, raiseOnDrag: false, icon: ' ', //    ,      map: gMap, labelContent: '<i class="mf mf-map-marker-square mf-gmap-api"></i>', //     MapFont,    mf-gmap-api labelAnchor: new google.maps.Point(57.145, 65.523) }); 

Yandex.Maps ( JSFiddle )

 point = new ymaps.GeoObject({ geometry: { type: "Point", coordinates: [57.145, 65.523] }, properties: { iconContent: '<i class="mf mf-map-marker mf-ymap-api"></i>', //     MapFont,    mf-ymap-api balloonContent: 'Point desctiption' } }, { preset: 'islands#grayCircleIcon', //          draggable: true, }), 

OpenLayers ( JSFiddle )

 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 } }) }); 

I also opened this project at Indiegogo, but it’s rather to explore the possibilities of this platform, I don’t expect anything serious to get, due to the narrow audience of this project. Making a profit will make me devote more time to this font, abandoning some current tasks.

The font itself with examples of use can be downloaded on the project page: mapfont.org . Use and distribution of the font is governed by a free OFL license.

Thank you for your attention and I will be glad to any criticism, suggestions and suggestions. If someone needs some shortcut icons - write in the comments, I will try to add them to this font first thing!