С помощью чего можно создать свою интерактивную карту?

Question

[Василий Вязников]

Необходимо реализовать интерактивную карту.

С подобной задачей ни разе не сталкивался.
С помощью гугла понял, что делается с помощью svg графики.
Здесь затык в том, что не понимаю как обрабатывать эффект при наведении на область (конкретно здесь закрашивать кружок и выводить подсказку с названием города), и не знаю как обрабатывать клик чтобы появилась информационная панель (3 скрин).

Как реализовать такое можно ?

Answer 1

[mletov]

А зачем svg?
Карту положить фоном,
Заведите в базе таблицу, в которой будете хранить маркеры, с указанием координат на карте и другой полезной инфой.
Выведите циклом поверх фона (position absolute).
Стиль кружка при наведении менять через css hover
Клик обрабатывайте через jquery click

Если нужно будет при наведении подсвечивать не кружки, а именно области, то воспользуйтесь www.outsharked.com/imagemapster

Comments

[Stepanya]

что за извращение?

[Лексей Фельде]

Не рекомендую так делать, очень негибко.

Answer 2

[Константин Китманов]

Дык SVG точно так же реагирует на hover и на клики. По клику проще показывать div, в svg не очень удобно текст выводить.
Open Layers/Leaflef/clip-mask -- не нужны.

Answer 3

[Евгений Вольф]

Ну так, на вскидку, можно сделать много слоёв (столько же, сколько районов на карте), наложить на них clip-mask и обрабатывать клик по каждому отдельному слою соответствующим образом. Там уже именуйте их как Вам удобно, добавляйте ID'шники/классы и т.д.

Answer 4

[GreatRash]

Open Layers например. Или Leaflet.

Answer 5

[xmoonlight]

Raphael.js (там в примерах есть даже)

Answer 6

[Anatoly Scherbakov]

Использовали leaflet.js для подобных задач. Описанный функционал там уже есть, API очень прост и понятен, хорошо документирован. Зачем придумывать велосипеды, когда грамотные люди уже сделали решение? Единственное, что вам понадобится сделать:

- Написать функцию или REST API, которое возвращает данные для pop-up
- Написать функцию, которая выдаёт HTML для этого pop-up.

Comments

[xmoonlight]

Ergonomic Code: я полностью поддерживаю этот коммент.