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

Kosatchev в 17:09, 20 апреля 2016

2016-04-20T17:09:11Z

Kosatchev в 04:18, 9 апреля 2016

2016-04-09T04:18:26Z

← Предыдущая версия		Версия от 06:18, 9 апреля 2016
Строка 35:		Строка 35:
	</source>		</source>

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

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

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

2016-04-09T04:15:15Z

Реализация

← Предыдущая версия		Версия от 06:15, 9 апреля 2016
Строка 35:		Строка 35:
	</source>		</source>

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

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

	~~Также~~, ~~для удобства вставил несколько служебных классов~~, ~~для отражения (~~''mf-~~flip-horizontal, mf-flip~~-~~vertical'~~'~~) и поворота иконок (~~'~~'mf-rotate-90~~, ~~mf-rotate-180~~, ~~mf-rotate-270'')~~.		Особенностью Яндекс.Карт стали кружочки, которые обрамляют шрифт. Их нельзя убрать, но можно изменить их цвет. Размер значков и их положение также корректирует класс ''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''), возможно, кому-то это будет полезно.

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

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

2016-04-06T10:33:23Z

Аналоги

← Предыдущая версия		Версия от 12:33, 6 апреля 2016
Строка 156:		Строка 156:
	== Аналоги ==		== Аналоги ==

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

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

Kosatchev в 10:32, 6 апреля 2016

2016-04-06T10:32:58Z

← Предыдущая версия		Версия от 12:32, 6 апреля 2016
Строка 16:		Строка 16:


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

	[[Файл:Fontawesome.png\|center\|Пример шрифтовых иконок с сайта fontawesome.io]]		[[Файл:Fontawesome.png\|center\|Пример шрифтовых иконок с сайта fontawesome.io]]
Строка 34:		Строка 34:
	<i class="mf mf-petrol-station"></i>		<i class="mf mf-petrol-station"></i>
	</source>		</source>

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

	Для карт Яндекса или Гугла, методом проб и ошибок, были созданы корректирующие классы ''mf-ymap-api'' и ''mf-gmap-api'' соответственно. В Яндекс-карте этот класс корректирует размер значка в соответствии с размером цветного кружочка, а в Гукл-карте он корректирует размер и положение текстового значка, чтобы при изменении масштаба он не смещался относительно того места, в котором он установлен.		Для карт Яндекса или Гугла, методом проб и ошибок, были созданы корректирующие классы ''mf-ymap-api'' и ''mf-gmap-api'' соответственно. В Яндекс-карте этот класс корректирует размер значка в соответствии с размером цветного кружочка, а в Гукл-карте он корректирует размер и положение текстового значка, чтобы при изменении масштаба он не смещался относительно того места, в котором он установлен.
Строка 152:		Строка 154:
	[[Файл:Painting_2.png\|center\|Отрисовка]]		[[Файл:Painting_2.png\|center\|Отрисовка]]

			== Аналоги ==

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

	== Ссылки ==		== Ссылки ==

Kosatchev: /* Идея */

2016-04-06T10:07:20Z

Идея

← Предыдущая версия		Версия от 12:07, 6 апреля 2016
Строка 7:		Строка 7:
	== Идея ==		== Идея ==

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

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


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

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

Kosatchev в 10:00, 6 апреля 2016

2016-04-06T10:00:03Z

@@ Строка 4: / Строка 4: @@
 [[Файл:icon-template.png|center|Пример использования шрифта MapFont на карте Google]]
 Пока это только TTF и WOFF шрифты, которые содержат совсем небольшой набор значков, но я работаю над ним, постепенно пополняя коллекцию:
@@ Строка 20: / Строка 40: @@
+== Использование ==
 === Карты Google ([http://jsfiddle.net/c99t17ep/ JSFiddle]) ===
@@ Строка 38: / Строка 57: @@
 });
 </source>
 === Яндекс.Карты ([http://jsfiddle.net/1v3fw53m/ JSFiddle]) ===
@@ Строка 80: / Строка 111: @@
      });
 </source>
 Шрифт с примерами использования можно скачать на сайте проекта: [http://mapfont.org/ mapfont.org].

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

2016-04-05T14:36:37Z

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

Новая страница

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

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

Пока это только 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>

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

Шрифт с примерами использования можно скачать на сайте проекта: [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>