13 библиотек JavaScript для создания интерактивных и настраиваемых карт

Ранее мы использовали Google Map Maker и 10 других инструментов, которые помогут вам создавать карты. Однако, если вы предпочитаете использовать библиотеки Javascript, мы получили этот пост для вас. Вот библиотеки JS, которые вы можете использовать, чтобы показывать специальные маркеры карты, рисовать собственные линии маршрута или даже показывать диалоговое окно, когда вы наводите курсор мыши или нажимаете на определенные точки карты.

Персонализируйте свои карты в нужном вам стиле - некоторые из них можно стилизовать с помощью CSS - или настройте свою карту так, чтобы она была настолько интерактивной, насколько вам нравится. Источник данных карты, зависимостей и лицензий каждой библиотеки был включен для вашего удобства.

Больше на Hongkiat:

• Как оформить Google Карты
• Получение местоположения пользователя с помощью API геолокации HTML5
• Визуализация данных: 20+ полезных инструментов и ресурсов

GMaps

GMaps делает добавление и настройку Google Maps на одном дыхании. Помимо добавления карты, вы также можете добавить на карту несколько вещей, таких как полилинии, которые могут быть полезны для рисования маршрута, специальный элемент управления меню и даже элементы HTML..

GMaps совместим с данными в формате JSON, которые вы можете использовать для интеграции вашей карты с конкретным приложением, таким как Foursquare.

• Источник данных карты: Карты Гугл
• зависимости: никто
• Лицензия: Лицензия MIT

jHere

На 5KB, JHERE показывает вам, что размер не имеет значения; вы все еще можете создать мощную интерактивную карту с несколькими опциями настройки. jHERE получает визуализацию карты из карты HERE, которая является одним из самых популярных поставщиков карт для Windows Phone..

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

• Источник данных карты: ЗДЕСЬ Карты
• зависимости: jQuery или ZeptoJS
• Лицензия: Лицензия MIT

Kartograph

Kartograph состоит из двух файлов: Kartograph.ph для создания карты в формате SVG и Kartograph.js для добавления интерактивных элементов поверх карты. Поскольку Kartograph.js построен поверх Raphael.js, карта будет хорошо работать до IE7. Вы можете посмотреть интерактивные демонстрации карт, чтобы узнать, что может сделать Картограф.

• Источник данных карты: Картограф
• зависимости: Kartograph.py, Raphael и jQuery
• Лицензия: AGPL и LGPL

Mapael

JQuery Мапаэль позволяет создавать карты с элегантной визуализацией данных, а также интерактивность. Вы можете, например, создать карту и обозначить каждый регион на карте разными цветами в зависимости от региона. Вы также можете добавить всплывающую подсказку о регионе, а также обработчики событий, такие как щелчок или же зависать.

Карта построена с учетом SEO, предоставляя альтернативный контент для роботов поисковых систем, которые не способны сканировать сгенерированный JavaScript контент.

• Источник данных карты: Raphael.js
• зависимости: jQuery
• Лицензия: Лицензия MIT

D3js

D3.js это всеобъемлющая библиотека JavaScript, которая оживит ваши данные с помощью HTML, SVG и CSS. Использование D3 довольно разнообразно, в том числе для построения интерактивной карты. Посмотрите эту карту Глобального развития Всемирного банка, и вы увидите возможности того, что вы можете построить с D3.js.

• Источник данных карты: D3.js
• зависимости: никто
• Лицензия: Неопределенный

DataMaps

Если создание карты с использованием D3.js является сложным, вы можете использовать DataMaps. DataMaps, по сути, является плагином D3.js, который разработан специально для построения карт. Он наследует многие возможности D3.js, поэтому с его помощью вы можете создавать простые или очень индивидуальные карты. Я упоминал, что карта отзывчива?

• Источник данных карты: D3.js
• зависимости: D3.js и TopoJSON
• Лицензия: Лицензия MIT

GeoChart

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

• Источник данных карты: Карты Гугл
• зависимости: никто
• Лицензия: Прочитайте Google Maps TOS

Maplace

Maplace, плагин jQuery для создания карты через API Карт Google v3. Maplace работает во всех браузерах, включая IE6. Так что это еще один отличный плагин, заслуживающий вашего внимания, если вы хотите построить карту как можно проще.

• Источник данных карты: Карты Гугл
• зависимости: jQuery
• Лицензия: Лицензия MIT

величавый

Stately - это библиотека JavaScript, которая разработана для создания карт США. Библиотека сравнительно легкая, учитывая, что вы можете добавлять интерактивные элементы поверх ваших сгенерированных карт.

• Источник данных карты: Статей / SVG
• зависимости: никто
• Лицензия: Лицензия MIT

GeoComplete

GeoComplete - это отдельная библиотека JavaScript. Библиотека добавит поле ввода вместе с картой, которая будет показывать подсказки городов, стран или штатов при вводе.

• Источник данных карты: Карты Гугл
• зависимости: jQuery
• Лицензия: Лицензия MIT

Инструменты карты

Инструменты карты предоставляют интуитивно понятный API для добавления карт Google. Он поддерживает загрузку геоформатированных данных JSON, таких как TopoJSON и GeoJSON, для визуализации карты. Кроме того, вы можете добавить анимированные маркеры, которые, я думаю, сделают карту более оживленной, вставить HTML-контент с переменными или заполнителями аля Handlebars.

• Источник данных карты: Карты Гугл
• зависимости: GeoJSON / TopoJSON
• Лицензия: Лицензия MIT

OpenLayers

OpenLayers представляет собой высокопроизводительную среду JavaScript с открытым исходным кодом для создания интерактивных карт с использованием различных картографических сервисов. Вы можете выбрать источник слоя карты, используя мозаичный слой или векторный слой из ряда картографических сервисов..

OpenLayer поставляется с готовым мобильным устройством, подходящим для построения карт для разных устройств и браузеров. Вы можете использовать CSS для другого вида вашей карты. Чтобы внедрить карту в вашу сеть с помощью OpenLayers, вот учебник, который поможет.

• Источник данных карты: OpenStreetMap
• зависимости: никто
• Лицензия: Не определено

листовка

Разработчики дали листовка основные функции для работы отлично, сохраняя его размер небольшим, идеально подходит для мобильных устройств. Для определенных функций просто расширьте Leaflet с помощью плагинов. Leaflet имеет большинство функций онлайн-карт, которые вам нужны: слои листов, всплывающее окно, маркеры и бесплатные векторные слои, такие как полилинии, полигоны, круги или прямоугольники. Он поставляется с красивым дизайном по умолчанию, хотя вы можете легко настроить стиль с помощью CSS3.

Leaflet имеет большинство функций взаимодействия использования как для мобильных, так и для настольных браузеров.

• Источник данных карты: OpenStreetMap
• зависимости: никто
• Лицензия: Не определено