Примерно полгода назад у меня возникла необходимость вставить на карту Google шрифтовую иконку из серии FontAwesome. По ходу работы существующих иконок стало недостаточно, и поэтому пришлось нарисовать некоторое количество своих значков. Позже я решил, что грех добру пропадать и, добавив еще некоторое количество символов, назвал свое поделие MapFont и выложил в сеть.

image

На момент написания статьи готово шесть десятков различных иконок, и я медленно продолжаю рисовать и выкладывать новые.

image

Шрифт был оформлен в уже привычном виде 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
    }
  })
}); 

Также я открыл этот проект на Indiegogo, но это скорее для изучения возможностей этой платформы, что-то серьезное получить я не рассчитываю, из-за узкой аудитории данного проекта. Получение прибыли же заставит меня посвящать больше времени данному шрифту, отказавшись от некоторых текущих задач.

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

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

Комментарии (15)


  1. dmitry_dvm
    30.03.2016 13:47

    Как раз на днях искал иконку перевернутой капельки (точка на карте) для UWP-приложения, стандартной, без значка внутри, почему-то в MDL Assets не нашел. Спасибо!
    А вообще вопрос к знатокам — какую иконку можно считать стандартной для пункта «Адрес» (в смысле географический адрес организации)?


    1. kosatchev
      30.03.2016 13:47

      Я всегда ставил вот эту: http://fontawesome.io/icon/map-marker/


  1. z0rc
    30.03.2016 14:38

    https://github.com/blog/2112-delivering-octicons-with-svg

    TL;DR
    By switching from icon fonts, we can serve our icons more easily, more quickly, and more accessibly. And they look better. Enjoy.


    1. kosatchev
      30.03.2016 14:55

      Если этот шрифт будет пользоваться хоть какой-то популярностью, я обязательно сделаю svg вариант. Также, планирую потом прикрутить механизм подготовки растровых иконок, примерно, как тут http://mapicons.mapsmarker.com/markers/transportation/sea-transportation/canal/


  1. lumini
    30.03.2016 17:19

    Как раз сейчас работаю над проектом, требующим отрисовки иконок на гуглмэпс. Здорово было бы добавить mf-home с иконкой http://fortawesome.github.io/Font-Awesome/icon/home/. Удивился, что не увидел такую в дефолтном наборе. Символ домика на картах наверняка будет больше востребован, чем символ танка :)


    1. kosatchev
      30.03.2016 18:18

      Вот ты сейчас всех танкистов прям так обидел! В воскресенье будет домик :)


      1. lumini
        30.03.2016 19:07

        Класс! Спасибо.


  1. netgoblin
    30.03.2016 20:54
    +2

    Очередной иконочный шрифт без хинтинга?
    Примеры на jsfiddle не работают, вместо иконок — квадратики.


    1. kosatchev
      30.03.2016 20:55

      Еще и деньги на индиго за это собирает, совсем совесть потерял!


  1. BalinTomsk
    30.03.2016 21:53

    Рыбка, корблик, яхта, стол (место отдыха в лесу), палатка, костер,, крючок, pin — то который иголка с ручкой в виде песочных часов — ими бумажки к доске прикалывают.

    Спасибо


  1. Illorian
    31.03.2016 10:51

    А как насчёт поддержки в Leaflet? Не собираетесь ли сделать отдельный плагин?


    1. n0ne
      31.03.2016 12:27

      Только хотел спросить!
      Да, было бы тоже интересно услышать…


      1. kosatchev
        31.03.2016 12:54

        Я пока не сталкивался Leaflet, но обязательно посмотрю, что можно с этим сделать


  1. philosophocat
    31.03.2016 17:16

    Ubuntu, Firefox; не работают ни карты, ни сайт.


    1. kosatchev
      31.03.2016 17:58

      попробуйте на телефоне, убунту я посмотрю, как только у меня появится возможность