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

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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

Источник данных карты: Google Maps
зависимости: никто
Лицензия: Лицензия MIT

jHere
На 5KB, JHERE показывает вам, что размер не имеет значения; Вы все еще можете создать мощную интерактивную карту с несколькими вариантами настройки. jHERE выводит визуализацию карты из ЗДЕСЬ карта, который является одним из самых популярных поставщиков карт для 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 Mapael позволяет создавать карты с элегантной визуализацией данных и интерактивностью. Например, вы можете создать карту и назначить каждый регион на карте разными цветами в зависимости от региона. Вы также можете добавить всплывающую подсказку по региону, а также обработчики событий, такие как щелчок или наведение.

Карта построена с учетом 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
зависимости: никто
Лицензия: Читать Google Maps TOS

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

Источник данных карты: Google Maps
Зависимости: jQuery
Лицензия: Лицензия MIT

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

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

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

Источник данных карты: Google Maps
Зависимости: jQuery
Лицензия: Лицензия MIT

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

Источник данных карты: Google Maps
Зависимости: GeoJSON / TopoJSON
Лицензия: Лицензия MIT

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

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

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

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