Разработка интерактивной карты используя LeafLet (Google Maps)
Проект необходимо выполнить в несколько этапов. Ниже приведено описание первого этапа, который необходимо реализовать.
Задача этапа 1 (будет более подробное ТЗ и эскизы)
Имеются условные регионы на карте, представляющие идеальный круг с заданным радиусом имеющие названия например :
"Строгино 1" (тип, координаты центра, радиус, id 001)
"Строгино 2" (тип, координаты центра, радиус, id 002)
"Вднх Север" (тип, координаты центра, радиус, id 003)
"Вднх Юг" (тип, координаты центра, радиус, id 004)
Есть точки с магазинами.
Магазин1 (координат , id 101)
Магазин2 (координат , id 102)
Магазин3 (координат , id 103)
Магазин4 (координат , id 104)
Есть логическая связь определяющая принадлежность магазинов к регионам
001{101,102}
002{103}
003{104}
В регион id 004 не входит не один магазин.
В зависимости от масштаба карты необходимо обеспечить различный режим отображения как для регионов так и для магазинов
Итак в зависимости от зума (от отдаленного, до приближенного):
zoom <10
Регионы показаны обычным пином (иконка в зависимости от типа) координаты пина соответствуют его центру (пины перекрываются, не кластеризуются)
Магазины не показываются
Пины кликабельны и выводят при нажатии кастомный оверлейный див с произвольной html конструкцией (готовой, вам ее делать ненадо)
Zoom 10-12
Регионы показаны в виде кругов(полупрозрачная заливка 30% полупрозрацный 30% контур обводкой 10px) с заданным радиусом.
внутри находится один из пинов соответствующих количеству магазинов.
Рядом с пином региона отображается название региона (ВДНХ север) что является SVG картинкой по сути дополнительным пином с заданными координатами.
Пины кликабельны и выводят при нажатии кастомный оверлейный див с произвольной html конструкцией (готовой, вам ее делать ненадо)
Zoom >12
Регионы показаны в виде кругов(полупрозрачная заливка 30% полупрозрацный 30% контур обводкой 10px) с заданным радиусом. Зрительно они будут значительно большего диаметра.
Магазины показаны в виде одинаковых пинов с соответствующими координатами.
Рядом с пином региона отображается название региона (ВДНХ север) что является SVG картинкой по сути дополнительным пином с заданными координатами.
Пины кликабельны и выводят при нажатии кастомный оверлейный див с произвольной html конструкцией (готовой, вам ее делать ненадо)
При изменении ширины экрана (виджета карты) карта автоматически обеспечивает смещение, так чтобы выбранный элемент (pin) центрировался.
Все необходимые данные о пинах координатах и т.п. будут поставляться бекэндом в нужном формате – это делать ненадо.
Необходимо реализовать кастомизацию по отображению используемых карт (отключить отображение некоторых типов объектов и изменить цвета географических поверхностей, материка дорог воды и т.п.)
Решение должно работать на десктопах и на мобильных.