Принципы разработки JS интерактивной карты

В этой статье хочу рассказать о принципе разработки интерактивной Java Script карты. Когда появилась необходимость перейти с интерактивных FLASH карт на JavaScript было перерыто множество сайтов, а так же множество готовых библиотек. Выяснилось следующее - готовые решения дорогие и не доделанные.

В итоге, началась разработка карты методом "научного тыка" - в итоге разобрался. Принцип опишу ниже.

Итак, начинаем с того, что у нас будет карта, скажем, торгового центра. Для реализации нужна:

  • Подложка - сам план торгового центра
  • XML файл с данными по участкам
  • Слой обрисованных участков на подложке

Принцип создания. 

Работаем с CANVAS. На самый нижний слой выводим подложку.

Далее выводим нарисованные в InkScape участки - они представлены в виде векторов. Каждому участку присваиваем ID, который соответствуем ID в XML файле.

Далее на JavaScript реализуем функции наведения на участки и зума, если необходимо. Стоит отметить, что за наведение на участок мышью и пальцем на экране планшета отвечают разные функции.

Начинаем разработку всегда с админской части. При нажатии реализуем возможность редактирования в форме. Для записи данных используем JSON, чтобы каждый раз не перерисовывать страницу.

В принципе, мы прошлись по основным моментам реализации интерактивной JS карты.

Добавить комментарий

Защитный код
Обновить