GIS-Lab - Вклад [ru]

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

2016-04-20T17:09:11Z

Kosatchev:

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

[[Файл:icon-template.png|center|Пример использования шрифта MapFont на карте Google]]

== Введение ==

На данный момент, при создании карт, как в редакторах, так и онлайн, используются преимущественно растровые иконки. Они цветные, их легко нарисовать или отредактировать, и их легко вставить на карту. Но при всем их удобстве, они имеют ряд серьезных недостатков: невозможность масштабирования, и разный размер иконок на экранах разного размера и разрешения. Таким образом, необходимо адаптировать растровую иконку под конкретное устройство, на котором они будут отображаться.

Однако, многие десктопные ГИС, такие как MapInfo или QGIS, поддерживают векторные иконки и шрифтовые символы в качестве картографических значков. Что касается онлайн карт, в настоящее время практически никто не использует символьные шрифты, в качестве меток на карте, хотя это может избавить от большинства ограничений растровых значков. Карты, использующие такие метки, одинаково хорошо смотрятся как на экранах мобильных телефонов, и на больших ретина-дисплеях, так и на старых мониторах с низким разрешением.

В статье, я расскажу как можно добавить шрифтовые метки в наиболее популярные онлайн-карты, и познакомлю Вас с шрифтом MapFpnt, специально созданном для этой целей. А также, расскажу о том, как можно самому отредактировать или создать подобный шрифт.

== Реализация ==

Сейчас, MapFont представляет собой TTF и WOFF шрифты, которые содержат постоянно пополняющуюся коллекцию значков, которые, со временем, охватят все популярные области применения ГИС:

[[Файл:font-icons.png|center|Примеры иконок MapFont]]

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

<source lang="html5">

</source>

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

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

С Google-Картами, в этом плане, хуже всего, тут подпись может смещаться относительно своей метки, и было довольно сложно подобрать параметры ''padding'' и ''font-size'', чтобы значек был по-центру и никуда не съезжал, при масштабировании. Для этого и был создан класс ''mf-gmap-api'', который обязателен, при вставке на карту Google. Но это по-прежнему иногда происходит, и работа по оптимизации работы с Google-Картами все еще продолжается.

Особенностью Яндекс.Карт стали кружочки, которые обрамляют шрифт. Их нельзя убрать, но можно изменить их цвет. Размер значков и их положение также корректирует класс ''mf-ymap-api'', который желателен, при установке шрифтовых значков на карты от Яндекса.

Openlayers в этом плане имеет наиболее гибкий API, и все параметры настраиваются прямо в коде скрипта. Значек вставляется не стилем CSS, а просто индексом значка, который можно найти на [http://mapfont.org/ сайте шрифта]. Еще, он отрисовывает значки наиболее четко из всех трех.

[[Файл:Mapfont-mapview.png|center|Отображение иконок MapFont на разных картах]]

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

== Использование ==

=== Карты Google ([http://jsfiddle.net/c99t17ep/ JSFiddle]) ===

<source lang="javascript">
point = new MarkerWithLabel({
position: new google.maps.LatLng(57.145, 65.523),
draggable: false,
raiseOnDrag: false,
icon: ' ',
// Обязательно оставить здесь пробел, иначе будет показана стандартная иконка
map: gMap,
labelContent: '',
// Вместе со стандартными классами MapFont, используется специальный класс mf-gmap-api
labelAnchor: new google.maps.Point(57.145, 65.523)
});
</source>

<big>Примечание: Если при масштабировании карты, иконка перемещается, следует открыть файл стилей шрифта (''mapfont.css'') и понемногу корректировать параметры ''margin-top'' и ''margin-left'' стиля-адаптера ''mf-gmap-api''

<source lang="css">
.mf-gmap-api {
margin-top: 2.2em;
margin-left: 2.2em;
font-size: 2.1em;
text-align:center;
} </big>
</source>

=== Яндекс.Карты ([http://jsfiddle.net/1v3fw53m/ JSFiddle]) ===

<source lang="javascript">
point = new ymaps.GeoObject({
geometry: {
type: "Point",
coordinates: [57.145, 65.523]
},
properties: {
iconContent: '',
// Вместе со стандартными классами MapFont, используется специальный класс mf-ymap-api
balloonContent: 'Point desctiption'
}
}, {
preset: 'islands#grayCircleIcon',
// Лучше всего шрифтовые значки смотрятся с серыми круглыми иконками
draggable: true,
}),
</source>

=== OpenLayers ([http://jsfiddle.net/Ljbvuu1r/ JSFiddle]) ===

<source lang="javascript">
var pointLayer = new OpenLayers.Layer.Vector('Overlay', {
styleMap: new OpenLayers.StyleMap({
'default': {
fill: false,
stroke: false,
label: "\uf031",
// Используйте \u юникод индекс символа. Индекс указан на сайте шрифта
labelXOffset: 0,
labelYOffset: 0,
fontColor: "#000000",
fontSize:"20px",
fontOpacity: 1,
fontFamily: "MapFont",
labelOutlineWidth: 2
}
})
});
</source>

== Планы ==

1. Рисовать новые значки, и, когда их наберется несколько сотен, разбить по категориям:
:* Транспорт
:* Городские объекты
:* Туризм
:* Дорожные знаки
:* Внутренняя навигация
:* Индустрия
:* Водная навигация
:* Военные объекты
2. Расширить поддержку картографическхи сервисов и приложений
:* Исправить проблему с уезжанием значка на картах Google
:* Добавить поддержку в Leaflet
3. Добавить хинтинг
4. Улучшить функциональность сайта
:* Добавить на сайт разбитие по категориям, когда это станет актуально
:* Создать экспорт в SVG
:* Создать экспорт в PNG со сглаживанием
:* Выложить монохромные изображения в формате GIF

== Аналоги ==

[http://fontawesome.io/ FontAwesome] - масштабируемые векторные иконки, выполненные в виде шрифта и стиля CSS, которые можно использовать при создании практически любого WEB проекта.

[[Файл:Fontawesome.png|center|Пример иконок с сайта fontawesome.io]]

[http://erikflowers.github.io/weather-icons/ Weather Icons] - Проект, сделанный по принципу FontAwesome, но исключительно метеорологической направленности.

[[Файл:weathericons.png|center|Пример иконок с сайта mapicons.mapsmarker.com]]

[http://mapicons.mapsmarker.com/ mapicons] - Довольно удобный сервис, где можно найти огромное количество растровых значков. Особенностью является удобный редактор, с помощью которого можно легко персонализировать иконки перед загрузкой на компьютер.

[[Файл:Mapicons.png|center|Пример иконок с сайта mapicons.mapsmarker.com]]

== Ссылки ==

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

Желающие могут поддержать проект на [https://www.indiegogo.com/projects/mapfont-map-marker-icon-font/x/8704291#/ Indiegogo].

Обсуждение шрифта находится на местном форуме:[http://gis-lab.info/forum/viewtopic.php?f=19&t=20849 MapFont, Шрифты со значками в WEB-картах и не только]

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

Файл:Weathericons.png

2016-04-20T15:23:54Z

Kosatchev: Пример иконок с сайта erikflowers.github.io/weather-icons

Пример иконок с сайта erikflowers.github.io/weather-icons

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

2016-04-09T04:18:26Z

Kosatchev:

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

[[Файл:icon-template.png|center|Пример использования шрифта MapFont на карте Google]]

== Идея ==

Долгое время, при создании карт, как в редакторах, так и онлайн, я использовал, и продолжаю использовать растровые иконки [http://mapicons.mapsmarker.com/ mapicons]. Довольно удобный сервис, где можно найти огромное количество растровых значков, и оформить их по своему желанию, используя удобный редактор.

[[Файл:Mapicons.png|center|Пример иконок с сайта mapicons.mapsmarker.com]]

Но возиться с большим количеством растровых изображений, без возможности изменить их масштаб, доставляет определенное неудобство, и я начал смотреть в сторону векторных изображений. Но не каждая программа их поддерживает, да и самих изображений оказалось не так-то много. На идею создать векторные иконки в виде шрифта, меня натолкнула программа MapInfo, когда я делал карту охотничьих угодий. Вот пример самих иконок:

[[Файл:Animals.png|center|Пример векторных иконок с животными]]

В 2015-м, возникла необходимость вставить на карту Google шрифтовую иконку из серии [http://fontawesome.io/ FontAwesome]. Это невероятно удобный сет из огромного количества шрифтовых иконок, которые сэкономят много времени при разработке большинства веб-проектов.

[[Файл:Fontawesome.png|center|Пример шрифтовых иконок с сайта fontawesome.io]]

По ходу работы существующих иконок стало недостаточно, и поэтому пришлось нарисовать некоторое количество своих значков. Позже я решил, что грех добру пропадать и, добавив еще некоторое количество символов, назвал свое поделие MapFont и [http://mapfont.org/ выложил в сеть].

== Реализация ==

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

[[Файл:font-icons.png|center|Примеры иконок MapFont]]

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

<source lang="html5">

</source>

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

Google Карты оказались самыми капризными, и было очень трудно подобрать параметры ''padding'' и ''font-size'', чтобы значек был по-центру и никуда не съезжал, при масштабировании. Для этого и был создан класс ''mf-gmap-api'', который обязателен, при вставке на карту Google. Но это по-прежнему иногда происходит, и я пока не решил эту проблему окончательно.

Особенностью Яндекс.Карт стали кружочки, которые обрамляют шрифт. Их нельзя убрать, но можно изменить их цвет. Размер значков и их положение также корректирует класс ''mf-ymap-api'', который также крайне желателен, при установке шрифтовых значков на карты от Яндекса.

Openlayers в этом плане имеет наиболее гибкий API, и все параметры настраиваются прямо в коде скрипта. Еще, он почему-то отрисовывает значки наиболее четко из всех трех.

[[Файл:Mapfont-mapview.png|center|Отображение иконок MapFont на разных картах]]

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

== Использование ==

=== Карты Google ([http://jsfiddle.net/c99t17ep/ JSFiddle]) ===

<source lang="javascript">
point = new MarkerWithLabel({
position: new google.maps.LatLng(57.145, 65.523),
draggable: false,
raiseOnDrag: false,
icon: ' ',
// Обязательно оставить здесь пробел, иначе будет показана стандартная иконка
map: gMap,
labelContent: '',
// Вместе со стандартными классами MapFont, используется специальный класс mf-gmap-api
labelAnchor: new google.maps.Point(57.145, 65.523)
});
</source>

<big>Примечание: Если при масштабировании карты, иконка перемещается, следует открыть файл стилей шрифта (''mapfont.css'') и понемногу корректировать параметры ''margin-top'' и ''margin-left'' стиля-адаптера ''mf-gmap-api''

<source lang="css">
.mf-gmap-api {
margin-top: 2.2em;
margin-left: 2.2em;
font-size: 2.1em;
text-align:center;
} </big>
</source>

=== Яндекс.Карты ([http://jsfiddle.net/1v3fw53m/ JSFiddle]) ===

<source lang="javascript">
point = new ymaps.GeoObject({
geometry: {
type: "Point",
coordinates: [57.145, 65.523]
},
properties: {
iconContent: '',
// Вместе со стандартными классами MapFont, используется специальный класс mf-ymap-api
balloonContent: 'Point desctiption'
}
}, {
preset: 'islands#grayCircleIcon',
// Лучше всего шрифтовые значки смотрятся с серыми круглыми иконками
draggable: true,
}),
</source>

=== OpenLayers ([http://jsfiddle.net/Ljbvuu1r/ JSFiddle]) ===

<source lang="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
}
})
});
</source>

== Планы ==

1. Рисовать новые значки, и, когда их наберется несколько сотен, разбить по категориям:
:* Транспорт
:* Городские объекты
:* Туризм
:* Дорожные знаки
:* Внутренняя навигация
:* Индустрия
:* Водная навигация
:* Военные объекты
2. Расширить поддержку картографическхи сервисов и приложений
:* Исправить проблему с уезжанием значка на картах Google
:* Добавить поддержку в Leaflet
3. Улучшить функциональность сайта
:* Добавить на сайт разбитие по категориям, когда это станет актуально
:* Создать экспорт в SVG
:* Создать экспорт в PNG со сглаживанием
:* Выложить монохромные изображения в формате GIF

== Процесс создания ==
Требования, которые я предъявляю к будущей иконке противоречивы:
# Иконка должна быть достаточно детальной, чтобы хорошо выглядеть при печати на вывесках и знаках
# Должна хорошо читаться, будучи очень далеко, или очень маленькой
# Должны быть растровые версии для старых гарминов и монохромных матричных дисплеев 10x10, 16x16 и 32x32 пикселей

Перывм делом ищу необходимую картинку в поисковиках, в 2ГИС, OSM, Google Maps, Яндекс.Картах, чтобы перерисовать, или нарисовать что-то похожее самому

[[Файл:Painting_1.png|center|Выбор прототипа будущей иконки]]

И начинаю работать с конца:
# Отрисовываю монохромную растровую иконку, размером 16x16 пикселей
# Увеличиваю картинку до размера 32x32 пикселя, добавив деталей
# Перерисовываю картинку в размере 10x10 пикселей
# Обвожу картинку размером 32x32 пикселя в векторе, таким образом, чтобы была читаема при минимальном размере. Нарисованные ранее пиксели в этом здорово помогают

[[Файл:Painting_2.png|center|Отрисовка]]

== Аналоги ==

[http://fontawesome.io/ FontAwesome] - масштабируемые векторные иконки, выполненные в виде шрифта и стиля CSS, которые можно использовать при создании практически любого WEB проекта.

[http://erikflowers.github.io/weather-icons/ Weather Icons] - Проект, сделанный по принципу FontAwesome, но исключительно метеорологической направленности.

[http://mapicons.mapsmarker.com/ mapicons] - Огромная база растровых иконок использования в картографии. Особенностью является удобный редактор, с помощью которого можно легко персонализировать иконки перед загрузкой на компьютер.

== Ссылки ==

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

Желающие могут поддержать меня на [https://www.indiegogo.com/projects/mapfont-map-marker-icon-font/x/8704291#/ Indiegogo].

Обсуждение шрифта находится на местном форуме:[http://gis-lab.info/forum/viewtopic.php?f=19&t=20849 MapFont, Шрифты со значками в WEB-картах и не только]

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

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

2016-04-09T04:15:15Z

Kosatchev: /* Реализация */

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

[[Файл:icon-template.png|center|Пример использования шрифта MapFont на карте Google]]

== Идея ==

Долгое время, при создании карт, как в редакторах, так и онлайн, я использовал, и продолжаю использовать растровые иконки [http://mapicons.mapsmarker.com/ mapicons]. Довольно удобный сервис, где можно найти огромное количество растровых значков, и оформить их по своему желанию, используя удобный редактор.

[[Файл:Mapicons.png|center|Пример иконок с сайта mapicons.mapsmarker.com]]

Но возиться с большим количеством растровых изображений, без возможности изменить их масштаб, доставляет определенное неудобство, и я начал смотреть в сторону векторных изображений. Но не каждая программа их поддерживает, да и самих изображений оказалось не так-то много. На идею создать векторные иконки в виде шрифта, меня натолкнула программа MapInfo, когда я делал карту охотничьих угодий. Вот пример самих иконок:

[[Файл:Animals.png|center|Пример векторных иконок с животными]]

В 2015-м, возникла необходимость вставить на карту Google шрифтовую иконку из серии [http://fontawesome.io/ FontAwesome]. Это невероятно удобный сет из огромного количества шрифтовых иконок, которые сэкономят много времени при разработке большинства веб-проектов.

[[Файл:Fontawesome.png|center|Пример шрифтовых иконок с сайта fontawesome.io]]

По ходу работы существующих иконок стало недостаточно, и поэтому пришлось нарисовать некоторое количество своих значков. Позже я решил, что грех добру пропадать и, добавив еще некоторое количество символов, назвал свое поделие MapFont и [http://mapfont.org/ выложил в сеть].

== Реализация ==

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

[[Файл:font-icons.png|center|Примеры иконок MapFont]]

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

<source lang="html5">

</source>

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

Google Карты оказались самыми капризными, и было очень трудно подобрать параметры ''padding'' и ''font-size'', чтобы значек был по-центру и никуда не съезжал, при масштабировании. Для этого и был создан класс ''mf-gmap-api'', который обязателен, при вставке на карту Google. Но это по-прежнему иногда происходит, и я пока не решил эту проблему окончательно.

Особенностью Яндекс.Карт стали кружочки, которые обрамляют шрифт. Их нельзя убрать, но можно изменить их цвет. Размер значков и их положение также корректирует класс ''mf-ymap-api'', который также крайне желателен, при установке шрифтовых значков на карты от Яндекса.

Openlayers в этом плане имеет наиболее гибкий API, и все параметры настраиваются прямо в коде скрипта. Еще, он почему-то отрисовывает значки наиболее четко из всех трех.

[[Файл:Mapfont-mapview.png|center|Отображение иконок MapFont на разных картах]]

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

== Использование ==

=== Карты Google ([http://jsfiddle.net/c99t17ep/ JSFiddle]) ===

<source lang="javascript">
point = new MarkerWithLabel({
position: new google.maps.LatLng(57.145, 65.523),
draggable: false,
raiseOnDrag: false,
icon: ' ',
// Обязательно оставить здесь пробел, иначе будет показана стандартная иконка
map: gMap,
labelContent: '',
// Вместе со стандартными классами MapFont, используется специальный класс mf-gmap-api
labelAnchor: new google.maps.Point(57.145, 65.523)
});
</source>

<big>Примечание: Если при масштабировании карты, иконка перемещается, следует открыть файл стилей шрифта (''mapfont.css'') и понемногу корректировать параметры ''margin-top'' и ''margin-left'' стиля-адаптера ''mf-gmap-api''

<source lang="css">
.mf-gmap-api {
margin-top: 2.2em;
margin-left: 2.2em;
font-size: 2.1em;
text-align:center;
} </big>
</source>

=== Яндекс.Карты ([http://jsfiddle.net/1v3fw53m/ JSFiddle]) ===

<source lang="javascript">
point = new ymaps.GeoObject({
geometry: {
type: "Point",
coordinates: [57.145, 65.523]
},
properties: {
iconContent: '',
// Вместе со стандартными классами MapFont, используется специальный класс mf-ymap-api
balloonContent: 'Point desctiption'
}
}, {
preset: 'islands#grayCircleIcon',
// Лучше всего шрифтовые значки смотрятся с серыми круглыми иконками
draggable: true,
}),
</source>

=== OpenLayers ([http://jsfiddle.net/Ljbvuu1r/ JSFiddle]) ===

<source lang="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
}
})
});
</source>

== Планы ==

1. Рисовать новые значки, и, когда их наберется несколько сотен, разбить по категориям:
:* Транспорт
:* Городские объекты
:* Туризм
:* Дорожные знаки
:* Внутренняя навигация
:* Индустрия
:* Водная навигация
:* Военные объекты
2. Расширить поддержку картографическхи сервисов и приложений
:* Исправить проблему с уезжанием значка на картах Google
:* Добавить поддержку в Leaflet
3. Улучшить функциональность сайта
:* Добавить на сайт разбитие по категориям, когда это станет актуально
:* Создать экспорт в SVG
:* Создать экспорт в PNG со сглаживанием
:* Выложить монохромные изображения в формате GIF

== Процесс создания ==
Требования, которые я предъявляю к будущей иконке противоречивы:
# Иконка должна быть достаточно детальной, чтобы хорошо выглядеть при печати на вывесках и знаках
# Должна хорошо читаться, будучи очень далеко, или очень маленькой
# Должны быть растровые версии для старых гарминов и монохромных матричных дисплеев 10x10, 16x16 и 32x32 пикселей

Перывм делом ищу необходимую картинку в поисковиках, в 2ГИС, OSM, Google Maps, Яндекс.Картах, чтобы перерисовать, или нарисовать что-то похожее самому

[[Файл:Painting_1.png|center|Выбор прототипа будущей иконки]]

И начинаю работать с конца:
# Отрисовываю монохромную растровую иконку, размером 16x16 пикселей
# Увеличиваю картинку до размера 32x32 пикселя, добавив деталей
# Перерисовываю картинку в размере 10x10 пикселей
# Обвожу картинку размером 32x32 пикселя в векторе, таким образом, чтобы была читаема при минимальном размере. Нарисованные ранее пиксели в этом здорово помогают

[[Файл:Painting_2.png|center|Отрисовка]]

== Аналоги ==

[http://fontawesome.io/ FontAwesome] - масштабируемые векторные иконки, выполненные в виде шрифта и стиля CSS, которые можно использовать при создании практически любого WEB проекта.

[http://erikflowers.github.io/weather-icons/ Weather Icons] - Проект, сделанный по принципу FontAwesome, но исключительно метеорологической направленности.

[http://mapicons.mapsmarker.com/ mapicons] - Огромная база растровых иконок использования в картографии. Особенностью является удобный редактор, с помощью которого можно легко персонализировать иконки перед загрузкой на компьютер.

== Ссылки ==

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

Желающие могут поддержать меня на [https://www.indiegogo.com/projects/mapfont-map-marker-icon-font/x/8704291#/ Indiegogo].

Обсуждение шрифта находится на местном форуме:[http://gis-lab.info/forum/viewtopic.php?f=19&t=20849 MapFont, Шрифты со значками в WEB-картах и не только]

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

Файл:Mapfont-mapview.png

2016-04-09T04:14:56Z

Kosatchev:

Файл:Painting 2.png

2016-04-06T11:31:14Z

Kosatchev: загружена новая версия «Файл:Painting 2.png»

Отрисовка

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

2016-04-06T10:33:23Z

Kosatchev: /* Аналоги */

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

[[Файл:icon-template.png|center|Пример использования шрифта MapFont на карте Google]]

== Идея ==

Долгое время, при создании карт, как в редакторах, так и онлайн, я использовал, и продолжаю использовать растровые иконки [http://mapicons.mapsmarker.com/ mapicons]. Довольно удобный сервис, где можно найти огромное количество растровых значков, и оформить их по своему желанию, используя удобный редактор.

[[Файл:Mapicons.png|center|Пример иконок с сайта mapicons.mapsmarker.com]]

Но возиться с большим количеством растровых изображений, без возможности изменить их масштаб, доставляет определенное неудобство, и я начал смотреть в сторону векторных изображений. Но не каждая программа их поддерживает, да и самих изображений оказалось не так-то много. На идею создать векторные иконки в виде шрифта, меня натолкнула программа MapInfo, когда я делал карту охотничьих угодий. Вот пример самих иконок:

[[Файл:Animals.png|center|Пример векторных иконок с животными]]

В 2015-м, возникла необходимость вставить на карту Google шрифтовую иконку из серии [http://fontawesome.io/ FontAwesome]. Это невероятно удобный сет из огромного количества шрифтовых иконок, которые сэкономят много времени при разработке большинства веб-проектов.

[[Файл:Fontawesome.png|center|Пример шрифтовых иконок с сайта fontawesome.io]]

По ходу работы существующих иконок стало недостаточно, и поэтому пришлось нарисовать некоторое количество своих значков. Позже я решил, что грех добру пропадать и, добавив еще некоторое количество символов, назвал свое поделие MapFont и [http://mapfont.org/ выложил в сеть].

== Реализация ==

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

[[Файл:font-icons.png|center|Примеры иконок MapFont]]

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

<source lang="html5">

</source>

Принцип работы MapFont состоит в том, чтобы тем или иным способом отключить отображение растрового символа на карте, и вставить в текст подписи шрифтовой значек, с помощью специального css-класса.

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

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

== Использование ==

=== Карты Google ([http://jsfiddle.net/c99t17ep/ JSFiddle]) ===

<source lang="javascript">
point = new MarkerWithLabel({
position: new google.maps.LatLng(57.145, 65.523),
draggable: false,
raiseOnDrag: false,
icon: ' ',
// Обязательно оставить здесь пробел, иначе будет показана стандартная иконка
map: gMap,
labelContent: '',
// Вместе со стандартными классами MapFont, используется специальный класс mf-gmap-api
labelAnchor: new google.maps.Point(57.145, 65.523)
});
</source>

<big>Примечание: Если при масштабировании карты, иконка перемещается, следует открыть файл стилей шрифта (''mapfont.css'') и понемногу корректировать параметры ''margin-top'' и ''margin-left'' стиля-адаптера ''mf-gmap-api''

<source lang="css">
.mf-gmap-api {
margin-top: 2.2em;
margin-left: 2.2em;
font-size: 2.1em;
text-align:center;
} </big>
</source>

=== Яндекс.Карты ([http://jsfiddle.net/1v3fw53m/ JSFiddle]) ===

<source lang="javascript">
point = new ymaps.GeoObject({
geometry: {
type: "Point",
coordinates: [57.145, 65.523]
},
properties: {
iconContent: '',
// Вместе со стандартными классами MapFont, используется специальный класс mf-ymap-api
balloonContent: 'Point desctiption'
}
}, {
preset: 'islands#grayCircleIcon',
// Лучше всего шрифтовые значки смотрятся с серыми круглыми иконками
draggable: true,
}),
</source>

=== OpenLayers ([http://jsfiddle.net/Ljbvuu1r/ JSFiddle]) ===

<source lang="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
}
})
});
</source>

== Планы ==

1. Рисовать новые значки, и, когда их наберется несколько сотен, разбить по категориям:
:* Транспорт
:* Городские объекты
:* Туризм
:* Дорожные знаки
:* Внутренняя навигация
:* Индустрия
:* Водная навигация
:* Военные объекты
2. Расширить поддержку картографическхи сервисов и приложений
:* Исправить проблему с уезжанием значка на картах Google
:* Добавить поддержку в Leaflet
3. Улучшить функциональность сайта
:* Добавить на сайт разбитие по категориям, когда это станет актуально
:* Создать экспорт в SVG
:* Создать экспорт в PNG со сглаживанием
:* Выложить монохромные изображения в формате GIF

== Процесс создания ==
Требования, которые я предъявляю к будущей иконке противоречивы:
# Иконка должна быть достаточно детальной, чтобы хорошо выглядеть при печати на вывесках и знаках
# Должна хорошо читаться, будучи очень далеко, или очень маленькой
# Должны быть растровые версии для старых гарминов и монохромных матричных дисплеев 10x10, 16x16 и 32x32 пикселей

Перывм делом ищу необходимую картинку в поисковиках, в 2ГИС, OSM, Google Maps, Яндекс.Картах, чтобы перерисовать, или нарисовать что-то похожее самому

[[Файл:Painting_1.png|center|Выбор прототипа будущей иконки]]

И начинаю работать с конца:
# Отрисовываю монохромную растровую иконку, размером 16x16 пикселей
# Увеличиваю картинку до размера 32x32 пикселя, добавив деталей
# Перерисовываю картинку в размере 10x10 пикселей
# Обвожу картинку размером 32x32 пикселя в векторе, таким образом, чтобы была читаема при минимальном размере. Нарисованные ранее пиксели в этом здорово помогают

[[Файл:Painting_2.png|center|Отрисовка]]

== Аналоги ==

[http://fontawesome.io/ FontAwesome] - масштабируемые векторные иконки, выполненные в виде шрифта и стиля CSS, которые можно использовать при создании практически любого WEB проекта.

[http://erikflowers.github.io/weather-icons/ Weather Icons] - Проект, сделанный по принципу FontAwesome, но исключительно метеорологической направленности.

[http://mapicons.mapsmarker.com/ mapicons] - Огромная база растровых иконок использования в картографии. Особенностью является удобный редактор, с помощью которого можно легко персонализировать иконки перед загрузкой на компьютер.

== Ссылки ==

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

Желающие могут поддержать меня на [https://www.indiegogo.com/projects/mapfont-map-marker-icon-font/x/8704291#/ Indiegogo].

Обсуждение шрифта находится на местном форуме:[http://gis-lab.info/forum/viewtopic.php?f=19&t=20849 MapFont, Шрифты со значками в WEB-картах и не только]

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

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

2016-04-06T10:32:58Z

Kosatchev:

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

[[Файл:icon-template.png|center|Пример использования шрифта MapFont на карте Google]]

== Идея ==

Долгое время, при создании карт, как в редакторах, так и онлайн, я использовал, и продолжаю использовать растровые иконки [http://mapicons.mapsmarker.com/ mapicons]. Довольно удобный сервис, где можно найти огромное количество растровых значков, и оформить их по своему желанию, используя удобный редактор.

[[Файл:Mapicons.png|center|Пример иконок с сайта mapicons.mapsmarker.com]]

Но возиться с большим количеством растровых изображений, без возможности изменить их масштаб, доставляет определенное неудобство, и я начал смотреть в сторону векторных изображений. Но не каждая программа их поддерживает, да и самих изображений оказалось не так-то много. На идею создать векторные иконки в виде шрифта, меня натолкнула программа MapInfo, когда я делал карту охотничьих угодий. Вот пример самих иконок:

[[Файл:Animals.png|center|Пример векторных иконок с животными]]

В 2015-м, возникла необходимость вставить на карту Google шрифтовую иконку из серии [http://fontawesome.io/ FontAwesome]. Это невероятно удобный сет из огромного количества шрифтовых иконок, которые сэкономят много времени при разработке большинства веб-проектов.

[[Файл:Fontawesome.png|center|Пример шрифтовых иконок с сайта fontawesome.io]]

По ходу работы существующих иконок стало недостаточно, и поэтому пришлось нарисовать некоторое количество своих значков. Позже я решил, что грех добру пропадать и, добавив еще некоторое количество символов, назвал свое поделие MapFont и [http://mapfont.org/ выложил в сеть].

== Реализация ==

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

[[Файл:font-icons.png|center|Примеры иконок MapFont]]

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

<source lang="html5">

</source>

Принцип работы MapFont состоит в том, чтобы тем или иным способом отключить отображение растрового символа на карте, и вставить в текст подписи шрифтовой значек, с помощью специального css-класса.

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

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

== Использование ==

=== Карты Google ([http://jsfiddle.net/c99t17ep/ JSFiddle]) ===

<source lang="javascript">
point = new MarkerWithLabel({
position: new google.maps.LatLng(57.145, 65.523),
draggable: false,
raiseOnDrag: false,
icon: ' ',
// Обязательно оставить здесь пробел, иначе будет показана стандартная иконка
map: gMap,
labelContent: '',
// Вместе со стандартными классами MapFont, используется специальный класс mf-gmap-api
labelAnchor: new google.maps.Point(57.145, 65.523)
});
</source>

<big>Примечание: Если при масштабировании карты, иконка перемещается, следует открыть файл стилей шрифта (''mapfont.css'') и понемногу корректировать параметры ''margin-top'' и ''margin-left'' стиля-адаптера ''mf-gmap-api''

<source lang="css">
.mf-gmap-api {
margin-top: 2.2em;
margin-left: 2.2em;
font-size: 2.1em;
text-align:center;
} </big>
</source>

=== Яндекс.Карты ([http://jsfiddle.net/1v3fw53m/ JSFiddle]) ===

<source lang="javascript">
point = new ymaps.GeoObject({
geometry: {
type: "Point",
coordinates: [57.145, 65.523]
},
properties: {
iconContent: '',
// Вместе со стандартными классами MapFont, используется специальный класс mf-ymap-api
balloonContent: 'Point desctiption'
}
}, {
preset: 'islands#grayCircleIcon',
// Лучше всего шрифтовые значки смотрятся с серыми круглыми иконками
draggable: true,
}),
</source>

=== OpenLayers ([http://jsfiddle.net/Ljbvuu1r/ JSFiddle]) ===

<source lang="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
}
})
});
</source>

== Планы ==

1. Рисовать новые значки, и, когда их наберется несколько сотен, разбить по категориям:
:* Транспорт
:* Городские объекты
:* Туризм
:* Дорожные знаки
:* Внутренняя навигация
:* Индустрия
:* Водная навигация
:* Военные объекты
2. Расширить поддержку картографическхи сервисов и приложений
:* Исправить проблему с уезжанием значка на картах Google
:* Добавить поддержку в Leaflet
3. Улучшить функциональность сайта
:* Добавить на сайт разбитие по категориям, когда это станет актуально
:* Создать экспорт в SVG
:* Создать экспорт в PNG со сглаживанием
:* Выложить монохромные изображения в формате GIF

== Процесс создания ==
Требования, которые я предъявляю к будущей иконке противоречивы:
# Иконка должна быть достаточно детальной, чтобы хорошо выглядеть при печати на вывесках и знаках
# Должна хорошо читаться, будучи очень далеко, или очень маленькой
# Должны быть растровые версии для старых гарминов и монохромных матричных дисплеев 10x10, 16x16 и 32x32 пикселей

Перывм делом ищу необходимую картинку в поисковиках, в 2ГИС, OSM, Google Maps, Яндекс.Картах, чтобы перерисовать, или нарисовать что-то похожее самому

[[Файл:Painting_1.png|center|Выбор прототипа будущей иконки]]

И начинаю работать с конца:
# Отрисовываю монохромную растровую иконку, размером 16x16 пикселей
# Увеличиваю картинку до размера 32x32 пикселя, добавив деталей
# Перерисовываю картинку в размере 10x10 пикселей
# Обвожу картинку размером 32x32 пикселя в векторе, таким образом, чтобы была читаема при минимальном размере. Нарисованные ранее пиксели в этом здорово помогают

[[Файл:Painting_2.png|center|Отрисовка]]

== Аналоги ==

[http://fontawesome.io/ FontAwesome] - масштабируемые векторные иконки, выполненные в виде шрифта и стиля CSS, которые можно использовать при создании практически любого WEB проекта
[http://erikflowers.github.io/weather-icons/ Weather Icons] - Проект, сделанный по принципу FontAwesome, но исключительно метеорологической направленности
[http://mapicons.mapsmarker.com/ mapicons] - Огромная база растровых иконок использования в картографии. Особенностью является удобный редактор, с помощью которого можно легко персонализировать иконки перед загрузкой на компьютер.

== Ссылки ==

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

Желающие могут поддержать меня на [https://www.indiegogo.com/projects/mapfont-map-marker-icon-font/x/8704291#/ Indiegogo].

Обсуждение шрифта находится на местном форуме:[http://gis-lab.info/forum/viewtopic.php?f=19&t=20849 MapFont, Шрифты со значками в WEB-картах и не только]

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

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

2016-04-06T10:07:20Z

Kosatchev: /* Идея */

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

[[Файл:icon-template.png|center|Пример использования шрифта MapFont на карте Google]]

== Идея ==

Долгое время, при создании карт, как в редакторах, так и онлайн, я использовал, и продолжаю использовать растровые иконки [http://mapicons.mapsmarker.com/ mapicons]. Довольно удобный сервис, где можно найти огромное количество растровых значков, и оформить их по своему желанию, используя удобный редактор.

[[Файл:Mapicons.png|center|Пример иконок с сайта mapicons.mapsmarker.com]]

Но возиться с большим количеством растровых изображений, без возможности изменить их масштаб, доставляет определенное неудобство, и я начал смотреть в сторону векторных изображений. Но не каждая программа их поддерживает, да и самих изображений оказалось не так-то много. На идею создать векторные иконки в виде шрифта, меня натолкнула программа MapInfo, когда я делал карту охотничьих угодий. Вот пример самих иконок:

[[Файл:Animals.png|center|Пример векторных иконок с животными]]

В 2015-м, у меня возникла необходимость вставить на карту Google шрифтовую иконку из серии [http://fontawesome.io/ FontAwesome]. Это невероятно удобный сет из огромного количества шрифтовых иконок, которые сэкономят много времени при разработке большинства веб-проектов.

[[Файл:Fontawesome.png|center|Пример шрифтовых иконок с сайта fontawesome.io]]

По ходу работы существующих иконок стало недостаточно, и поэтому пришлось нарисовать некоторое количество своих значков. Позже я решил, что грех добру пропадать и, добавив еще некоторое количество символов, назвал свое поделие MapFont и [http://mapfont.org/ выложил в сеть].

== Реализация ==

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

[[Файл:font-icons.png|center|Примеры иконок MapFont]]

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

<source lang="html5">

</source>

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

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

== Использование ==

=== Карты Google ([http://jsfiddle.net/c99t17ep/ JSFiddle]) ===

<source lang="javascript">
point = new MarkerWithLabel({
position: new google.maps.LatLng(57.145, 65.523),
draggable: false,
raiseOnDrag: false,
icon: ' ',
// Обязательно оставить здесь пробел, иначе будет показана стандартная иконка
map: gMap,
labelContent: '',
// Вместе со стандартными классами MapFont, используется специальный класс mf-gmap-api
labelAnchor: new google.maps.Point(57.145, 65.523)
});
</source>

<big>Примечание: Если при масштабировании карты, иконка перемещается, следует открыть файл стилей шрифта (''mapfont.css'') и понемногу корректировать параметры ''margin-top'' и ''margin-left'' стиля-адаптера ''mf-gmap-api''

<source lang="css">
.mf-gmap-api {
margin-top: 2.2em;
margin-left: 2.2em;
font-size: 2.1em;
text-align:center;
} </big>
</source>

=== Яндекс.Карты ([http://jsfiddle.net/1v3fw53m/ JSFiddle]) ===

<source lang="javascript">
point = new ymaps.GeoObject({
geometry: {
type: "Point",
coordinates: [57.145, 65.523]
},
properties: {
iconContent: '',
// Вместе со стандартными классами MapFont, используется специальный класс mf-ymap-api
balloonContent: 'Point desctiption'
}
}, {
preset: 'islands#grayCircleIcon',
// Лучше всего шрифтовые значки смотрятся с серыми круглыми иконками
draggable: true,
}),
</source>

=== OpenLayers ([http://jsfiddle.net/Ljbvuu1r/ JSFiddle]) ===

<source lang="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
}
})
});
</source>

== Планы ==

1. Рисовать новые значки, и, когда их наберется несколько сотен, разбить по категориям:
:* Транспорт
:* Городские объекты
:* Туризм
:* Дорожные знаки
:* Внутренняя навигация
:* Индустрия
:* Водная навигация
:* Военные объекты
2. Расширить поддержку картографическхи сервисов и приложений
:* Исправить проблему с уезжанием значка на картах Google
:* Добавить поддержку в Leaflet
3. Улучшить функциональность сайта
:* Добавить на сайт разбитие по категориям, когда это станет актуально
:* Создать экспорт в SVG
:* Создать экспорт в PNG со сглаживанием
:* Выложить монохромные изображения в формате GIF

== Процесс создания ==
Требования, которые я предъявляю к будущей иконке противоречивы:
# Иконка должна быть достаточно детальной, чтобы хорошо выглядеть при печати на вывесках и знаках
# Должна хорошо читаться, будучи очень далеко, или очень маленькой
# Должны быть растровые версии для старых гарминов и монохромных матричных дисплеев 10x10, 16x16 и 32x32 пикселей

Перывм делом ищу необходимую картинку в поисковиках, в 2ГИС, OSM, Google Maps, Яндекс.Картах, чтобы перерисовать, или нарисовать что-то похожее самому

[[Файл:Painting_1.png|center|Выбор прототипа будущей иконки]]

И начинаю работать с конца:
# Отрисовываю монохромную растровую иконку, размером 16x16 пикселей
# Увеличиваю картинку до размера 32x32 пикселя, добавив деталей
# Перерисовываю картинку в размере 10x10 пикселей
# Обвожу картинку размером 32x32 пикселя в векторе, таким образом, чтобы была читаема при минимальном размере. Нарисованные ранее пиксели в этом здорово помогают

[[Файл:Painting_2.png|center|Отрисовка]]

== Ссылки ==

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

Желающие могут поддержать меня на [https://www.indiegogo.com/projects/mapfont-map-marker-icon-font/x/8704291#/ Indiegogo].

Обсуждение шрифта находится на местном форуме:[http://gis-lab.info/forum/viewtopic.php?f=19&t=20849 MapFont, Шрифты со значками в WEB-картах и не только]

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

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

2016-04-06T10:00:03Z

Kosatchev:

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

[[Файл:icon-template.png|center|Пример использования шрифта MapFont на карте Google]]

== Идея ==

Долгое время, при создании карт, как в редакторах, так и онлайн, я использовал, и продолжаю использовать растровые иконки [http://mapicons.mapsmarker.com/ mapicons]

[[Файл:Mapicons.png|center|Пример иконок с сайта mapicons.mapsmarker.com]]

Но возиться с большим количеством растровых изображений, без возможности изменить их масштаб, доставляет определенное неудобство, и я начал смотреть в сторону векторных изображений. Но не каждая программа их поддерживает, да и самих изображений оказалось не так-то много. На идею создать векторные иконки в виде шрифта, меня натолкнула программа MapInfo, когда я делал карту охотничьих угодий. Вот пример самих иконок:

[[Файл:Animals.png|center|Пример векторных иконок с животными]]

В 2015-м, у меня возникла необходимость вставить на карту Google шрифтовую иконку из серии [http://fontawesome.io/ FontAwesome].

[[Файл:Fontawesome.png|center|Пример шрифтовых иконок с сайта fontawesome.io]]

По ходу работы существующих иконок стало недостаточно, и поэтому пришлось нарисовать некоторое количество своих значков. Позже я решил, что грех добру пропадать и, добавив еще некоторое количество символов, назвал свое поделие MapFont и [http://mapfont.org/ выложил в сеть].

== Реализация ==

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

[[Файл:font-icons.png|center|Примеры иконок MapFont]]

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

<source lang="html5">

</source>

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

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

== Использование ==

=== Карты Google ([http://jsfiddle.net/c99t17ep/ JSFiddle]) ===

<source lang="javascript">
point = new MarkerWithLabel({
position: new google.maps.LatLng(57.145, 65.523),
draggable: false,
raiseOnDrag: false,
icon: ' ',
// Обязательно оставить здесь пробел, иначе будет показана стандартная иконка
map: gMap,
labelContent: '',
// Вместе со стандартными классами MapFont, используется специальный класс mf-gmap-api
labelAnchor: new google.maps.Point(57.145, 65.523)
});
</source>

<big>Примечание: Если при масштабировании карты, иконка перемещается, следует открыть файл стилей шрифта (''mapfont.css'') и понемногу корректировать параметры ''margin-top'' и ''margin-left'' стиля-адаптера ''mf-gmap-api''

<source lang="css">
.mf-gmap-api {
margin-top: 2.2em;
margin-left: 2.2em;
font-size: 2.1em;
text-align:center;
} </big>
</source>

=== Яндекс.Карты ([http://jsfiddle.net/1v3fw53m/ JSFiddle]) ===

<source lang="javascript">
point = new ymaps.GeoObject({
geometry: {
type: "Point",
coordinates: [57.145, 65.523]
},
properties: {
iconContent: '',
// Вместе со стандартными классами MapFont, используется специальный класс mf-ymap-api
balloonContent: 'Point desctiption'
}
}, {
preset: 'islands#grayCircleIcon',
// Лучше всего шрифтовые значки смотрятся с серыми круглыми иконками
draggable: true,
}),
</source>

=== OpenLayers ([http://jsfiddle.net/Ljbvuu1r/ JSFiddle]) ===

<source lang="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
}
})
});
</source>

== Планы ==

1. Рисовать новые значки, и, когда их наберется несколько сотен, разбить по категориям:
:* Транспорт
:* Городские объекты
:* Туризм
:* Дорожные знаки
:* Внутренняя навигация
:* Индустрия
:* Водная навигация
:* Военные объекты
2. Расширить поддержку картографическхи сервисов и приложений
:* Исправить проблему с уезжанием значка на картах Google
:* Добавить поддержку в Leaflet
3. Улучшить функциональность сайта
:* Добавить на сайт разбитие по категориям, когда это станет актуально
:* Создать экспорт в SVG
:* Создать экспорт в PNG со сглаживанием
:* Выложить монохромные изображения в формате GIF

== Процесс создания ==
Требования, которые я предъявляю к будущей иконке противоречивы:
# Иконка должна быть достаточно детальной, чтобы хорошо выглядеть при печати на вывесках и знаках
# Должна хорошо читаться, будучи очень далеко, или очень маленькой
# Должны быть растровые версии для старых гарминов и монохромных матричных дисплеев 10x10, 16x16 и 32x32 пикселей

Перывм делом ищу необходимую картинку в поисковиках, в 2ГИС, OSM, Google Maps, Яндекс.Картах, чтобы перерисовать, или нарисовать что-то похожее самому

[[Файл:Painting_1.png|center|Выбор прототипа будущей иконки]]

И начинаю работать с конца:
# Отрисовываю монохромную растровую иконку, размером 16x16 пикселей
# Увеличиваю картинку до размера 32x32 пикселя, добавив деталей
# Перерисовываю картинку в размере 10x10 пикселей
# Обвожу картинку размером 32x32 пикселя в векторе, таким образом, чтобы была читаема при минимальном размере. Нарисованные ранее пиксели в этом здорово помогают

[[Файл:Painting_2.png|center|Отрисовка]]

== Ссылки ==

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

Желающие могут поддержать меня на [https://www.indiegogo.com/projects/mapfont-map-marker-icon-font/x/8704291#/ Indiegogo].

Обсуждение шрифта находится на местном форуме:[http://gis-lab.info/forum/viewtopic.php?f=19&t=20849 MapFont, Шрифты со значками в WEB-картах и не только]

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

Файл:Painting 2.png

2016-04-06T09:50:02Z

Kosatchev: Отрисовка

Отрисовка

Файл:Painting 1.png

2016-04-06T09:49:50Z

Kosatchev: Выбор прототипа будущей иконки

Выбор прототипа будущей иконки

Файл:Fontawesome.png

2016-04-06T06:54:01Z

Kosatchev: Пример шрифтовых иконок с сайта fontawesome.io

Пример шрифтовых иконок с сайта fontawesome.io

Файл:Mapicons.png

2016-04-06T06:38:08Z

Kosatchev: загружена новая версия «Файл:Mapicons.png»: Пример иконок с сайта mapicons.mapsmarker.com

Пример иконок с сайта mapicons.mapsmarker.com

Файл:Mapicons.png

2016-04-06T06:25:10Z

Kosatchev: Пример иконок с сайта mapicons.mapsmarker.com

Пример иконок с сайта mapicons.mapsmarker.com

Файл:Animals.png

2016-04-06T06:03:50Z

Kosatchev: Пример векторных иконок с животными

Пример векторных иконок с животными

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

2016-04-05T14:36:37Z

Kosatchev: Новая страница: «Добрый день, мое имя Дмитрий, я бы хотел познакомить Вас со шрифтом, над которым я сейчас …»

Файл:Font-icons.png

2016-04-05T14:24:52Z

Kosatchev: Примеры иконок MapFont

Примеры иконок MapFont

Файл:Icon-template.png

2016-04-05T14:24:42Z

Kosatchev: Пример использования шрифта MapFont на карте Google

Пример использования шрифта MapFont на карте Google