Лучшие библиотеки и API JavaScript для создания карт

Сокращенный перевод статьи «Top JavaScript maps API and libraries».

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

Заранее подготовленные карты помогают людям найти физическое местоположение вашей компании, не тратя на это лишнее время.

Занимаясь разработкой приложений, вы неизбежно столкнетесь с необходимостью работы с картами. Какие инструменты использовать для этого? Платные или с открытым исходным кодом? Какие-то отдельные программы или веб-сервисы?

Google Maps это хорошее решение, но не единственное и не всегда подходящее. Например, «гуглокарты» не предоставляют таких возможностей кастомизации, как добавление дополнительных виджетов для большей интерактивности ваших карт. Кроме того, вам могут понадобиться специальные карты для конкурсов, исследований, путешествий, походов и прочих целей. Вот почему вам могут пригодиться open-source решения.

Инструменты и библиотеки JavaScript для создания карт и работы с ними

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

Вы можете персонализировать карты, придав им желаемый стиль (некоторые из них можно видоизменять при помощи CSS) или нужную степень интерактивности.

Leafletjs

Сайт: https://leafletjs.com/
Звезд на GitHub: 25807, https://github.com/Leaflet/Leaflet/
Цена: бесплатно
Источник данных для карт: OpenStreetMap
Зависимости: нет
Лицензия: BSD 2-Clause “Simplified” License
Категория: библиотека
Examples/Demo/Gallery: https://leafletjs.com/examples.html

Leaflet это одна из лучших библиотек JavaScript для создания mobile-friendly интерактивных карт. Она относительно маленькая, но при этом имеет множество функций и плагинов, простой API и работает во всех браузерах и на всех платформах.

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

Leaflet поддерживается ведущими мировыми компаниями: GitHub, Flickr, Facebook, Etsy и многими другими. Поскольку это проект с открытым исходным кодом, члены сообщества могут стать контрибуторами репозитория проекта и сделать его еще лучше.

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

Openlayers

Сайт: https://openlayers.org/
Звезд на GitHub: 5517, https://github.com/openlayers/openlayers
Цена: бесплатно
Источник данных для карт: OpenStreetMap
Зависимости: нет
Лицензия: 2-Clause BSD
Категория: библиотека
Примеры: https://openlayers.org/en/latest/examples/

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

Этот продукт «из коробки» готов к работе в мобильных приложениях и подходит для использования на различных устройствах и в различных браузерах. Чтобы самостоятельно определить внешний вид карты, можно использовать CSS. Реализовать карту в вашем проекте вам поможет специальное руководство.

OpenLayers также подходит для рендеринга векторных данных из GeoJSON, TopoJSON, KML, GML и других географических форматов данных.

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

Mapbox

Сайт: https://www.mapbox.com/
Звезд на GitHub: 4845, https://github.com/mapbox/mapbox-gl-js
Цена: бесплатно, цена платной версии начинается с $4 за 1000 загрузок
Источник данных для карт: Mapbox
Зависимости: нет
Лицензия: Mapbox copyright
Категория: веб-приложение
Примеры: https://docs.mapbox.com/mapbox-gl-js/examples/

Mapbox это одно из самых продвинутых решений для создания карт на данное время. Эта платформа создана опытными разработчиками и для разработчиков. Она предоставляет простой в использовании набор инструментов для создания прекрасных карт как для веба, так и для мобильных приложений. Пользователи получают полный контроль над стилем карты (включая фон). Есть множество крутых дополнительных сервисов, таких как спутниковые изображения, геокодирование или направления.

Платформа Mapbox предоставляет текстуры, иллюстрации, пользовательские маркеры, статичные карты, геокодирование и многое другое. Что касается оплаты, Mapbox имеет пять различных планов, от бесплатного начального плана до полномасштабного корпоративного.

Также платформа предлагает Mapbox Editor — онлайн-редактор, позволяющий пользователям быстро собирать карты с использованием собственных данных. Данные при этом можно импортировать из таблиц (файлы CSV), GeoJSON, KML или GPX.

Документация платформы хорошо спроектирована, ею легко пользоваться.

Google Maps API

Сайт: https://developers.google.com/maps/documentation
Звезд на GitHub: –
Цена: бесплатно, цена платной версии начинается с $14 за 14000 загрузок в статических картах
Источник данных для карт: Google
Зависимости: нет
Лицензия: Google copyright
Категория: веб-приложение
Примеры: https://developers.google.com/maps/documentation/javascript/examples

Google Maps это безопасный выбор для каждого, начиная от неопытного веб-мастера и заканчивая опытным разработчиком. Этот проект существует уже достаточно долго и успел зарекомендовать себя в качестве лидера картографической индустрии. Можно добавить, что JavaScript API облегчает интеграцию Google Maps в любое приложение, сервис или сайт. Кроме того, пользователи WordPress могут найти множество плагинов для поддержки Google Maps на своем сайте (все они используют API для доставки конечного результата).

Datamaps

Сайт: https://datamaps.github.io/
Звезд на GitHub: 3245, https://github.com/markmarkoh/datamaps
Цена: бесплатно
Источник данных для карт: D3.js
Зависимости: D3.js и TopoJSON
Лицензия: MIT
Категория: библиотека
Примеры: https://datamaps.github.io/

DataMaps — интерактивные карты для визуализации данных, упакованные в простой файл JavaScript. Карты созданы на основе SVG, могут масштабироваться для любого размера экрана и очень зависят от D3.js. Поставляются готовые к использованию карты мира с обозначенными странами, карта США со штатами и комбинированная карта. Данные карт хранятся в виде JSON. Следуя их структуре, можно создавать пользовательские карты.

Jvectormap

Сайт: http://jvectormap.com/
Звезд на GitHub: –
Цена: From $39
Источник данных для карт: jVectorMap
Зависимости: jQuery
Лицензия: GNU GPL, paid
Категория: библиотека
Примеры: http://jvectormap.com/examples/world-gdp/

jVectorMap это библиотека с открытым исходным кодом для создания интерактивных карт. Документации в обычном виде нет, но есть краткое руководство Getting Started, что тоже очень полезно.

JvectorMap использует только нативные браузерные технологии, такие как JavaScript, CSS, HTML, SVG или VML. Для работы не нужны ни Flash, ни любые другие проприетарные плагины браузеров. Благодаря этому jVectorMap работает во всех современных мобильных браузерах.

Bing Maps

Сайт: https://www.microsoft.com/en-us/maps/choose-your-bing-maps-api
Звезд на GitHub: –
Цена: бесплатно, пользовательский тариф (по запросу)
Источник данных для карт: Bing Maps
Зависимости: нет
Лицензия: Microsoft copyright
Категория: веб-приложение
Примеры: https://docs.microsoft.com/en-us/bingmaps/v8-web-control/index

Bing Maps от Microsoft это очень популярная картографическая платформа. Microsoft постоянно работает над добавлением нового функционала и различными улучшениями платформы.

Здесь есть прекрасный интерактивный набор инструментов разработки AJAX, предоставляющий примеры функций и сниппеты кода разработчикам, создающим приложения на JavaScript. Платформа Bing Maps предоставляет различные варианты API для приложений, включая Web Control, Windows Store apps control, WPF control, REST Services и Spatial Data Services.

Amcharts Map Chart

Сайт: http://www.amcharts.com/javascript-maps/
Звезд на GitHub: –
Цена: бесплатно, платная версия от $180
Источник данных для карт: amCharts
Зависимости: нет
Лицензия: Amcharts copyright
Категория: библиотека
Примеры: https://www.amcharts.com/demos/#maps

amMap это специальная картографическая библиотека JavaScript (HTML5), разработанная amCharts. Она не имеет внешних зависимостей и позволяет вам с легкостью создавать красивые фоновые, точечные и многие другие картограммы. Также эта библиотека поддерживает различные интерактивные функции.

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

Kartograph

Сайт: http://kartograph.org/
Звезд на GitHub: 1519, https://github.com/kartograph/kartograph.js
Цена: бесплатно
Источник данных для карт: Kartograph
Зависимости: Kartograph.py, Raphael и jQuery
Лицензия: AGPL и LGPL
Категория: фреймворк
Примеры: http://kartograph.org/showcase/

Kartograph это простой и легковесный фреймворк для генерации SVG-карт без участия любых других картографических сервисов. Kartograph.js это библиотека JavaScript для создания интерактивных карт на базе SVG-карт Kartograph. Библиотека построена на Raphael и jQuery.

В Kartograph нет готовых к использованию коллекций карт, но эта библиотека работает с любыми SVG-картами, а также предлагает утилиту Kartograph.py для их создания.

Kartograph не лишен зависимостей (требует Raphael JS для рисования и jQuery). Благодаря документации библиотеки и справки по API (скомбинированным в одной статье) создавать интерактивные карты будет легко и приятно.

ArcGIS

Сайт: https://developers.arcgis.com/
Звезд на GitHub: –
Цена: бесплатно, платная версия от $125 ежемесячно
Источник данных для карт: Esri
Зависимости: нет
Лицензия: Esri copyright
Категория: фреймворк
Примеры: https://developers.arcgis.com/javascript/3/jssamples/

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

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

Технология Esri используется в более чем 350 тыс. организаций по всему миру, из них больше двух третей это компании Fortune 500.

Zeemaps

Сайт: https://www.zeemaps.com/
Звезд на GitHub: –
Цена: бесплатно, платная версия от $19.95 в месяц
Источник данных для карт: –
Зависимости: нет
Лицензия: Zeemaps copyright
Категория: веб-приложение
Примеры: https://www.zeemaps.com/mobile?group=1971477

ZeeMaps это картографический сервис корпоративного уровня, позволяющий вам с легкостью создавать и публиковать интерактивные карты, а также делиться ими. Вы можете конструировать динамические визуализации географической информации, создавая карты из вашего списка людей или мест. Например, вы можете создать карту мест, которые вы посещали, или карту адресов ваших клиентов (друзей, родственников). Все карты хранятся на их собственных серверах, а доступ к ним можно получить откуда угодно и в любое время, с любого стандартного веб-браузера на компьютере или мобильном устройстве.

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

Этот инструмент предназначен для особого вида интерактивных карт: он позволяет вам создавать, публиковать и делиться картами для презентаций или геоанализа. ZeeMaps даст вам все те же функции, что и большинство других инструментов из нашего списка. Но помимо этого вы сможете брать входящие данные для карты из разных источников и устанавливать 3-уровневый доступ к картам.

Anymap от Anychart

Сайт: https://www.anychart.com/products/anymap/overview/
Звезд на GitHub: –
Цена: от $79
Источник данных для карт: Anychart
Зависимости: нет
Лицензия: Anycharts copyright
Категория: библиотека
Примеры: https://www.anychart.com/products/anymap/gallery/

AnyMap это одна из популярных JavaScript (HTML5) библиотек для создания диаграмм. С ее помощью вы сможете без особого труда создавать карты. Для ее работы не требуются сторонние библиотеки, такие как jQuery. AnyMap поддерживает все базовые типы карт.

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

Highmaps от Highcharts

Сайт: https://www.highcharts.com/products/highmaps/
Звезд на GitHub: 8999, https://github.com/highcharts/highcharts
Цена: бесплатно и платно (от $390)
Источник данных для карт: Highcharts
Зависимости: jQuery
Лицензия: Highcharts copyright
Категория: библиотека
Примеры: https://www.highcharts.com/maps/demo

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

Среди типов карт, поддерживаемых Highmaps, есть фоновые картограммы и пузырьковые карты. Также можно рисовать линии, чтобы изображать дорогу или реку. Однако карты-схемы создавать не так просто, как, например, с amMap или AnyMap.

Также стоит отметить, что ни Highcharts, ни Highmaps не могут работать без jQuery.

Из положительных свойств Highmaps стоит отметить то, что эта библиотека предоставляет готовые к использованию карты (SVG и GeoJSON). Документация довольно обширна и хорошо помогает быстро разобраться в настройках библиотеки.

Cesium

Сайт: https://cesiumjs.org/
Звезд на GitHub: 4941, https://github.com/AnalyticalGraphicsInc/cesium
Цена: бесплатно
Источник данных для карт: Cesium
Зависимости: нет
Лицензия: Apache License 2.0
Категория: библиотека
Примеры: https://cesiumjs.org/demos/

Cesium это картографическая библиотека JavaScript, работающая на базе WebGL. Поддерживает 3 режима просмотра: 3D-глобус, 2D-карту и 2.5D Columbus View. Работает на различных платформах и в разных браузерах (о совместимости беспокоиться не стоит).

Polymaps

Сайт: http://polymaps.org/
Звезд на GitHub: 1533, https://github.com/simplegeo/polymaps
Цена: бесплатно
Источник данных для карт: OSM, Bing
Зависимости: нет
Лицензия: SimpleGeo and Stamen copyright
Категория: библиотека
Примеры: http://polymaps.org/ex/

Polymaps это бесплатная библиотека JavaScript для создания динамических и интерактивных карт. В отличие от обычной картографии OpenStreetMap, CloudMade, Bing и пр., она работает с картами на основе изображений и векторов, предоставляя быстрый показ наборов данных в разном приближении. Поддерживает различные визуальные презентации.

Основное достоинство этой библиотеки — способность очень легко объединять растровые и векторные данные из разных источников. Она может удовлетворить все ваши требования, в частности, позволит вам с легкостью добавлять ваши собственные цвета, делать группировки и осуществлять взаимодействие с картой. Polymaps также довольно эффективна: запускается она быстро, хорошо справляется с загрузкой фона, а делают это всего 30 Кб JavaScript.

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

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

Mapael

Сайт: https://www.vincentbroute.fr/mapael/
Звезд на GitHub: 922, https://github.com/neveldo/jQuery-Mapael
Цена: бесплатно
Источник данных для карт: Raphael.js
Зависимости: jQuery
Лицензия: MIT License
Категория: библиотека
Примеры: https://www.vincentbroute.fr/mapael/

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

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

Mapael предоставляет коллекцию карт из собственного репозитория. Документация и описание API скомбинированы в одной статье, но руководство подробное и начать пользоваться библиотекой легко.

Заключение

Согласно Google Trends, самыми популярными инструментами для работы с картами являются Leaflet, Google Maps API и Mapbox. На графике видно, как отличаются (от лидеров) по запросам Bing Maps API и Openlayers, несмотря на то, что они тоже весьма популярны.

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

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]