Всем привет. Хочу поделиться с вами своим небольшим проектом, идея которого пришла мне в голову на кануне празднования 9 мая. Тогда я уже никак не успевал реализовать задуманное, так что было решено постараться успеть сделать всё к 22 июня. И вот буквально сегодня ночью доделал. Идея была в том чтобы показать на карте Москвы улицы, названные в честь героев Великой Отечественной Войны.

Все мы ходим и ездим по улицам, названия которых имеют своё историческое обоснование, но мало кто из нас об этом задумывается. Вот и я в процессе сбора данных заново открыл для себя много улиц, о которые даже и не догадывался, что они названы в честь героев. Предлагаю и вам посмотреть знакомые места, узнать новое для себя, и отдать дань памяти людям, пожертвовавшим столь многим ради нас с вами: Улицы и Герои.

Технические детали

Ну поскольку мы на хабре, расскажу немного про то как всё устроено, тем более есть интересные решения. Проект основан на данных из OSM и Wikipedia. Для отрисовки карты используется leaflet.js с рядом плагинов. Для поиска используется изменённый плагин leaflet-fusesearch (оригинал работает только с маркерами), очень классная штука, может искать сразу по нескольким полям записи. Посмотреть проект можно на github: Streets-of-Valour-and-Victory.

Линии улиц были вытащены из OSM, при этом в зависимости от типа линии им была присвоена категория, чтобы затем можно было синхронизировать их отрисовку с используемым картостилем. Дело в том что в большинстве случаев народ не заморачивается и делает линии фиксированной толщины вне зависимости от зума, выглядит это довольно некрасиво. Решение выглядит примерно так:

	"11": {
		"motorway": {
			"color": "#FF0000",
			"weight": 3.6,
			"opacity": 1,
			"fill": false,
			"lineCap": "butt",
			"lineJoin": "round"
		},
		"mainroad": {
			"color": "#FF0000",
			"weight": 2,
			"opacity": 1,
			"fill": false,
			"lineCap": "butt",
			"lineJoin": "round"
		},
		"minorroad": {
			"color": "#FF0000",
			"weight": 0.4,
			"opacity": 1,
			"fill": false,
			"lineCap": "butt",
			"lineJoin": "round"
		},
		"service": {
			"color": "#FF0000",
			"weight": 0.3,
			"opacity": 1,
			"fill": false,
			"lineCap": "butt",
			"lineJoin": "round"
		},
		"noauto": {
			"color": "#FF0000",
			"weight": 0.3,
			"opacity": 1,
			"fill": false,
			"lineCap": "butt",
			"lineJoin": "round"
		}
	}

Нам нужно расписать стили для каждой категории для всех зумов, ориентироваться при этом можно на картостиль osm-bright. Это позволило сделать лини полупрозрачными, чтобы было видно названия улиц. Тут есть небольшая проблемка, когда части составной улицы накладываются друг на друга, но это всё решаемо хитрыми манипуляциями с данными в postgis, и будет решено при следующем обновлении данных. Да, про обновление. Присылайте мне улицы, которые вы не нашли на карте или в списке, буду очень признателен!

Тайлы. Сейчас использую тайлы спутника, а дальше посмотрим как дела обстоять будут.

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

P.S. ошибки и опечатки присылайте в личку, времени на подробную вычитку не было, так что всё может быть