Создание интерактивной карты на jQuery

Создание интерактивной карты на jQuery

Интерактивная карта на Jquery Интересный плагин для создания интерактивных карт на Jquery. Обладает массой полезных\приятных возможностей. 

Создание интерактивной карты с помощью jQuery вместо Flash


Обзор JQuery Map

Чтобы сделать карту максимально привлекательной, необходимы плавная анимация и четкая графика. Традиционно такой проект потребует использования Flash. Мы стараемся избегать Flash, когда это возможно, поэтому я начал размышлять о том, как проект может быть реализован в jQuery.

Было несколько преимуществ использования jQuery перед Flash для проекта:

Обновления были просты: поскольку карта представляла собой визуальное представление html, было бы легко обновить данные с помощью нашего программного обеспечения для управления контентом. Каждое местоположение будет «страницей» в системе с содержимым и атрибутами, такими как координаты пикселей, которые будет легко обновлять.
Контент был дружественным для поисковых систем: поскольку все данные были представлены в формате html, поисковым системам было бы легко индексировать и размещать контент.

Архитектура будет естественным образом распределена: все данные будут храниться в базе данных CMS. Затем я создам HTML-шаблоны для информации, которая будет отображаться в CMS. Затем jQuery и CSS будут брать html-контент и отображать его соответствующим образом. Каждый уровень будет играть естественную роль, поэтому было бы легко вносить изменения в любой отдельный компонент приложения, не беспокоясь обо всем этом.

Самая большая проблема с использованием jQuery была производительность. Важным требованием проекта было увеличение масштаба карты при переключении между прибрежными районами. Во Flash это не было бы проблемой, поскольку подобные преобразования выполнялись бы на очень низком уровне на компьютерном оборудовании. Это не относится к jQuery, вместо этого DOM нужно будет манипулировать, а затем отображать. Я знал, что это может быть борьба за менее эффективные браузеры, такие как IE6. К счастью, это не стало проблемой в конце концов.

Пять Местоположений JQuery Map

Пять карт JQuery Map

Всего нужно было отобразить пять карт и примерно 70 точек местоположения. Оформление этих карт было прекрасно выполнено Лайзоном. Первая карта будет показывать все побережье NC и некоторые точки расположения, которые не были сильно сконцентрированы. Также будут показаны 4 выделенные области, по которым можно щелкнуть, чтобы увеличить другие 4 карты, где есть точки с более высокой концентрацией.

Чтобы упростить код, который пришлось написать, я предложил следующую грубую процедуру для запуска, когда была показана одна из пяти карт:

  1. Загрузите фоновое изображение
  2. Загрузите патроны и информационные поля
  3. Разместите пули и скройте информационные поля
  4. Прикрепить события к пулям для отображения полей
  5. Добавьте ссылку «Возврат к побережью NC» или регионы с возможностью масштабирования.
  6. После этого просто нужно придумать разметку для каждого маркера и пару функций jQuery, чтобы все это работало.

 Его можно загрузить с сайта разработчика, посмотреть демо и почитать документацию(язык английский). Сайт разработчика - http://www.gethifi.com/blog/jquery-vs-flash-for-interactive-map