MapFont, Шрифты со значками в WEB-картах

Добрый день, мое имя Дмитрий, я бы хотел познакомить Вас со шрифтом, над которым я сейчас работаю. При установке в систему, он работает и корректно отображается в MapInfo и QGis. Но главное его назначение - WEB-сервисы, такие как Google Maps, Яндекс.Карты и Openlayers. В ближайшем будущем, планирую адаптировать его к Leaflet.

Пока это только TTF и WOFF шрифты, которые содержат совсем небольшой набор значков, но я работаю над ним, постепенно пополняя коллекцию:

Как и популярный FontAwesome, шрифт оформлен в виде ttf+css, и вставляется в тело html документа с помощью классов css: «mf», и класса конкретной иконки:

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

Для карт Яндекса или Гугла, методом проб и ошибок, были созданы корректирующие классы mf-ymap-api и mf-gmap-api соответственно. В Яндекс-карте этот класс корректирует размер значка в соответствии с размером цветного кружочка, а в Гукл-карте он корректирует размер и положение текстового значка, чтобы при изменении масштаба он не смещался относительно того места, в котором он установлен.

Также, для удобства вставил несколько служебных классов, для отражения (mf-flip-horizontal, mf-flip-vertical) и поворота иконок (mf-rotate-90, mf-rotate-180, mf-rotate-270).

Вставка иконок в онлайн карты

Карты Google (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)
});

Яндекс.Карты (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
        }
      })
    });

Шрифт с примерами использования можно скачать на сайте проекта: mapfont.org. Использование и распространение шрифта регулируется свободной лицензией OFL.

Желающие могут поддержать меня на Indiegogo.

Обсуждение шрифта находится на местном форуме:MapFont, Шрифты со значками в WEB-картах и не только

Буду очень рад любой критике, пожеланиям и предложениям. Если нужны особые иконки, пишите. Если есть желание, можете прикладывать картинки, если хотите видеть что-то похожее в этом шрифте.