С помощью чего можно создать свою интерактивную карту?
Необходимо реализовать интерактивную карту.
С подобной задачей ни разе не сталкивался.
С помощью гугла понял, что делается с помощью svg графики.
Здесь затык в том, что не понимаю как обрабатывать эффект при наведении на область (конкретно здесь закрашивать кружок и выводить подсказку с названием города), и не знаю как обрабатывать клик чтобы появилась информационная панель (3 скрин).
А зачем svg?
Карту положить фоном,
Заведите в базе таблицу, в которой будете хранить маркеры, с указанием координат на карте и другой полезной инфой.
Выведите циклом поверх фона (position absolute).
Стиль кружка при наведении менять через css hover
Клик обрабатывайте через jquery click
Дык SVG точно так же реагирует на hover и на клики. По клику проще показывать div, в svg не очень удобно текст выводить.
Open Layers/Leaflef/clip-mask -- не нужны.
Если не хочешь быть первым - не вставай в очередь!
Ну так, на вскидку, можно сделать много слоёв (столько же, сколько районов на карте), наложить на них clip-mask и обрабатывать клик по каждому отдельному слою соответствующим образом. Там уже именуйте их как Вам удобно, добавляйте ID'шники/классы и т.д.
Использовали leaflet.js для подобных задач. Описанный функционал там уже есть, API очень прост и понятен, хорошо документирован. Зачем придумывать велосипеды, когда грамотные люди уже сделали решение? Единственное, что вам понадобится сделать:
- Написать функцию или REST API, которое возвращает данные для pop-up
- Написать функцию, которая выдаёт HTML для этого pop-up.
