Обзор лучших картографических онлайн-инструментов для веб-разработчиков: от дорожной карты к дорожным картам

Опубликовано: 2022-03-11

Нет ничего лучше хорошей, полезной карты.

Сегодня использование онлайн-карт — это простой и увлекательный процесс. Создание собственных онлайн-карт больше не является большой задачей; в нашем распоряжении широкий спектр доступных онлайн-инструментов для картографирования, от бесплатных и простых до многофункциональных и сложных в использовании. Для веб-разработчиков, не знакомых с веб-картографированием, мучения выбора могут быть пугающими. Вы хотите создавать карты, но не знаете, с чего начать и какие инструменты использовать. Я здесь, чтобы помочь с этим списком лучших картографических инструментов.

Немного истории

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

инструменты сопоставления для веб-разработчиков

Картирование в прошлом.

Вторая половина 20 века стала переломным моментом для картографии. Компьютеры стали предпочтительным инструментом. Аэрофотосъемка, спутниковые снимки и дистанционное зондирование изменили способы сбора пространственных данных. Появились географические информационные системы (ГИС). В конце концов, карты ГИС начали перемещаться с настольных компьютеров в Интернет, а крупные поставщики ГИС начали создавать первые платформы для онлайн-карт.

Но картографирование ГИС — это непросто. Для этого требуется множество серверных технологий, геопространственных стандартов и протоколов, а также их реализации. Это требует понимания геопространственных данных и картографических проекций, знаний о том, как собирать данные, как отображать данные, какие цвета использовать, как обобщать данные до конкретных масштабов, как размещать метки на карте, как настроить сервер, который будет обслуживать карты, как использовать пространственную базу данных и так далее. ГИС полна аббревиатур, таких как WMS, WFS, EPSG, CRS, SLD, GML, TMS, и это лишь некоторые из них, и чтобы знать и понимать их, вам нужно читать книги, научные статьи и статьи.

Эволюция онлайн-картографии

Первые веб-карты обычно отображали только одно очень маленькое изображение карты. В то время панорамирование осуществлялось путем перемещения на один шаг, обычно на половину размера карты, в одном из восьми возможных направлений по компасу — С, СЗ, З, ЮЗ, Ю, ЮВ, В, СВ. После того, как пользователь щелкнул кнопку панорамирования или масштабирования, на картографическом сервере необходимо было отобразить совершенно новое изображение, загрузить его по сети и затем обработать в браузере. Из-за ограничений технологии карты занимали лишь очень небольшую часть всей веб-страницы. Чтобы улучшить взаимодействие, ранним картам требовались плагины, такие как Flash или фирменные плагины на основе Java, или даже ActiveX, которые работали только в Internet Explorer.

Google перевернул мир карт с ног на голову, когда представил Google Maps в 2005 году. Среди своих нововведений Google представил непрерывное панорамирование путем перетаскивания. Их решение состояло в том, чтобы отобразить карту, нарезанную на множество меньших квадратных изображений, называемых «тайлами». Эти тайлы были обработаны и предоставлены «сервером тайлов карты» и обычно имеют размер 256 x 256 пикселей. Для масштабирования и панорамирования теперь требуется только загрузка новых фрагментов карты, а не перезагрузка всей веб-страницы. Результатом стала большая видимая карта, которая покрывала более половины окна браузера и обеспечивала плавный просмотр карты. Из-за возможности «скользить» по карте с помощью функций плавного масштабирования и панорамирования эти новые карты были названы «скользящими картами». Google также разрешил создание сценариев, поэтому пользователи могли размещать карты Google на своих веб-сайтах и добавлять на карту свои собственные данные. Это привело к появлению еще одного нового термина: «мэшапы карт».

Внезапно стали популярными онлайн-карты; Чтобы добавить красивую карту на свой веб-сайт, вам больше не нужно быть картографом или специалистом по ГИС. На крыльях движения «Веб 2.0» и на основе современных технологий, таких как HTML5, CSS3 и SVG, которые позволяют легко создавать интерактивный контент, интерактивные карты сейчас переживают новое возрождение.

Картографирование в будущем?

Картографические данные

Как упоминалось ранее, ранние онлайн-карты основывались на наборах данных ГИС и их базах пространственных геоданных. Немногие имели доступ к этим данным, не говоря уже о цене. Google и наборы данных проекта OpenStreetMap (OSM) изменили ситуацию. База данных Google является частной и имеет ограничения, в то время как OSM был вдохновлен концепцией Википедии как совместного проекта по созданию бесплатной карты мира. OpenStreetMap создан сообществом картографов-добровольцев, которые вносят свой вклад и поддерживают пространственные данные.

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

Выбор платформы веб-картографии

Итак, со всеми вариантами, как нам выбрать правильный онлайн-картографический инструмент? С одной стороны, существуют коммерческие поставщики онлайн-карт, такие как Google, MapQuest, Microsoft и Nokia. Эти сервисы предоставляют фрагменты карты и соответствующие API-интерфейсы JavaScript для их просмотра и взаимодействия с картой. С другой стороны, существуют картографические проекты с открытым исходным кодом, которые предлагают простую загрузку фрагментов карты на основе OpenStreetMap. К ним относятся OpenLayers и Leaflet. Кроме того, есть такие проекты, как MapBox и CartoDB, которые основывают свои бизнес-модели на библиотеках с открытым исходным кодом и данных OSM и обеспечивают дополнительную ценность, но не бесплатны.

Давайте рассмотрим несколько примеров из каждой из этих категорий. Здесь я расскажу о некоторых из этих онлайн-инструментов картографирования, предоставив краткий обзор каждого, а также примеры кода и взвесив все за и против. Мы также написали учебник по отображению D3.js, который может быть вам интересен для самостоятельного чтения.

Карты Гугл

Начнем с самого очевидного выбора — Google Maps. Первая версия Google Maps API была представлена в феврале 2005 года, а текущая версия Google Maps API v3 — в июне 2009 года. Google Maps API — это не просто конечная точка JavaScript API; он включает в себя больше проектов и предлагает несколько различных способов встраивания Карт Google в веб-страницы с обширной настройкой.

Текущие доступные API Карт Google включают:

Javascript-API Карт Google
API статических карт Google
API для встраивания Карт Google
SDK Google Карт для iOS
Android-API Google Карт v2

Чтобы помочь вам выбрать правильный API, Google разработала средство выбора API.

Стоит отметить, что хотя базовые API бесплатны, существуют некоторые ограничения. Во-первых, карты должны быть свободно и общедоступны для конечных пользователей. Во-вторых, ограничения на использование: услуга бесплатна, если ваш сайт не генерирует более 25 000 загрузок карт каждый день в течение любого 90-дневного периода. Если вам нужен более крупный масштаб или вам нужна частная карта, или вы используете корпоративный или коммерческий веб-сайт, вам следует рассмотреть возможность оплаты API Google Maps for Work.

Реализация

Вот пример того, как реализовать простую карту Google в коде. В нем показано, как создать простую карту с помощью API, разместить маркер на карте и открыть всплывающее окно щелчком мыши.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> </head> <body> <div></div> <script type="text/javascript"> var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(45.8167, 15.9833), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var marker = new google.maps.Marker({ position: new google.maps.LatLng(45.8167, 15.9833), map: map }); google.maps.event.addListener(marker, 'click', (function(marker) { return function() { infowindow.setContent("Zagreb"); infowindow.open(map, marker); } })(marker)); </script> </body> </html>

В результате карта выглядит так:

Плюсы

Разработано и поддерживается Google.
Множество различных API для включения карты на ваш веб-сайт или в приложение.
Большое сообщество пользователей.
Очень хорошая документация по API с большим количеством примеров.

Минусы

Мы уверены, что в какой-то момент не увидим аддов?
Все используют его; все карты (в основном) выглядят одинаково.
Закрытый и собственный API.
Никаких плагинов, кроме официально разработанных Google.
Непонятные цены на Google Maps for Work.

OpenLayers

OpenLayers был разработан MetaCarta как эквивалент Google Maps с открытым исходным кодом, и первая версия была опубликована в июне 2006 года. API Карт Google. OpenLayers очень быстро набрала популярность, и поначалу разработка была быстрой. OpenLayers 2 был выпущен всего через два месяца после версии 1, в августе 2006 года. Библиотека постоянно находилась в разработке, и постоянно добавлялись новые версии с новыми функциями. Обратной стороной этого быстрого прогресса было то, что библиотека версии 2 стала очень большой и неуклюжей, в конечном итоге достигнув размера 1 МБ и содержащей более 100 000 строк кода! Хотя у него было много функций, не все они были нужны обычным пользователям.

Это было основной причиной для всестороннего переписывания его библиотеки. Цель состояла в том, чтобы нацелиться на новейшие функции HTML5 и CSS3 с теми же функциями, что и в OpenLayers 2, такими как поддержка проекций, стандартных протоколов и функций редактирования. Основное внимание уделялось повышению производительности, более легким сборкам, более красивым визуальным компонентам и лучшему API. Этот значительно улучшенный OpenLayers 3 был опубликован в августе 2014 года.

Реализация

Давайте посмотрим, как выглядит та же карта, что и в предыдущем примере, но на этот раз с использованием OpenLayers 3.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://openlayers.org/en/v3.2.1/build/ol.js"></script> <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/v3.2.1/resources/jquery.min.js"></script> <script src="http://openlayers.org/en/v3.2.1/resources/bootstrap/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/resources/bootstrap/css/bootstrap.min.css" type="text/css"> </head> <body> <div class="map"> <div></div> </div> <script type="text/javascript"> var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([15.9833, 45.8167], 'EPSG:4326', 'EPSG:3857')), name: 'Zagreb', }); var iconStyle = new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', opacity: 0.75, src: 'http://ol3js.org/en/master/examples/data/icon.png' })) }); iconFeature.setStyle(iconStyle); var vectorSource = new ol.source.Vector({ features: [iconFeature] }); var vectorLayer = new ol.layer.Vector({ source: vectorSource }); var map = new ol.Map({ target: document.getElementById('map'), layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer ], controls: ol.control.defaults(), view: new ol.View({ center: ol.proj.transform([15.9833, 45.8167], 'EPSG:4326', 'EPSG:3857'), zoom: 10 }) }); var element = document.getElementById('popup'); var popup = new ol.Overlay({ element: element, positioning: 'bottom-center', stopEvent: false }); map.addOverlay(popup); map.on('click', function(evt) { var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) { return feature; }); if (feature) { var geometry = feature.getGeometry(); var coord = geometry.getCoordinates(); popup.setPosition(coord); $(element).popover({ 'placement': 'top', 'html': true, 'content': feature.get('name') }); $(element).popover('show'); } else { $(element).popover('destroy'); } }); map.on('pointermove', function(e) { if (e.dragging) { $(element).popover('destroy'); return; } var pixel = map.getEventPixel(e.originalEvent); var hit = map.hasFeatureAtPixel(pixel); map.getTarget().style.cursor = hit ? 'pointer' : ''; }); </script> </body> </html>

И результат:

Плюсы

Бесплатный и с открытым исходным кодом.
Многофункциональная библиотека для ваших картографических потребностей.
Множество примеров.
Поддержка ряда типов данных и стандартов ГИС.
Встроенная поддержка картографических проекций и функций редактирования.

Минусы

Версия 3 все еще находится в активной разработке, и API все еще меняется с каждым новым выпуском.
Сложный синтаксис API.
Документация по версии 3 в настоящее время не так полна, как могла бы быть.

Листовка

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

Leaflet прост в использовании и имеет хорошо документированный API, а также простой исходный код, доступный на GitHub. В результате акцента на производительность, удобство использования, простоту, небольшой размер и поддержку мобильных устройств он значительно менее сложен, чем OpenLayers.

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

Реализация

Вот та же карта, что и раньше, на этот раз реализованная с помощью Leaflet.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> </head> <body> <div></div> <script type="text/javascript"> var map = L.map('map').setView([45.8167, 15.9833], 10); var mbUrl = 'https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png'; L.tileLayer(mbUrl, {id: 'examples.map-i875mjb7'}).addTo(map); var marker = L.marker([45.8167, 15.9833]).bindPopup("Zagreb").addTo(map); </script> </body> </html>

Плюсы

Бесплатный и с открытым исходным кодом.
Маленький и быстрый.
Простой и удобный синтаксис API.
Мобильный дружественный.
Хорошо для быстрого и легкого создания онлайн-карты.
Множество примеров с очень хорошей документацией.

Минусы

Отсутствие расширенного функционала.

Мапбокс

Стартап MapBox пытается произвести революцию на рынке картографических онлайн-ресурсов с целью создания более привлекательных и универсальных онлайн-карт. MapBox JavaScript API использует Leaflet и написан как плагин Leaflet. Он расширяет функциональность Leaflet и интегрируется с другими веб-сервисами MapBox, включая хостинг MapBox для пользовательских карт и наборов данных. Помимо JavaScript API, MapBox включает в себя следующие подключенные сервисы:

Мобильные SDK для iOS и Android.
Набор готовых карт.
Статические карты, которые можно отображать без использования картографической библиотеки.
Сервис геокодирования.
Служба маршрутов.

MapBox предлагает не только свой картографический сервис, но и доступ к данным, включая частные спутниковые изображения, открытые данные НАСА и мировые данные OpenStreetMap, управляемые сообществом. Стилизация данных выполняется с использованием CartoCSS, формата стиля, созданного MapBox на основе CSS и фреймворка стилей LESS. Хотя сервис MapBox предлагает бесплатный уровень, он ограничен в пропускной способности и объеме памяти, и за любое серьезное использование сервиса необходимо платить.

Многие крупные компании признали преимущества MapBox и используют его на своих сайтах. К ним относятся Foursquare, Evernote, Pinterest, The Financial Times, GitHub и Etsy, и это лишь некоторые из них.

КартоCSS

Вот пример гладкой карты MapBox с использованием стиля Pirates , созданного дизайнерами MapBox. Поскольку MapBox работает поверх Leaflet, код для встраивания этого на вашу веб-страницу будет аналогичен приведенному выше примеру Leaflet:

Как упоминалось выше, CartoCSS используется для стилизации векторных листов в MapBox. Это делается с помощью их MapBox Studio, которая также имеет открытый исходный код. С помощью MapBox Studio можно создавать собственные стили карт с нуля или изменять и расширять существующие стили, созданные другими дизайнерами. Как только ваша пользовательская карта будет загружена в вашу учетную запись MapBox, вы сможете встроить ее на свой сайт с помощью MapBox API.

Ниже приведен пример CartoCSS, используемого для получения базового слоя Pirates :

 @name: '[name_en]'; @name_arrr: "[name_en].replace('([Aa]r)','\1rr')"; @land: #fff8f0; @water: #cdd; @park: #cda; Map { background-color:@land; background-image:url(img/noise.png); } #admin[maritime=0][zoom>=3] { line-join: round; line-color: #478; comp-op:multiply; // Countries [admin_level=2] { line-cap:round; line-width: 0.8; [zoom>=6] { line-width: 2; } [zoom>=8] { line-width: 4; } [disputed=1] { line-dasharray: 4,4; line-cap:butt; } } // States / Provices / Subregions [admin_level>=3] { line-width: 0.4; line-dasharray: 10,3,3,3; [zoom>=6] { line-width: 1; } [zoom>=8] { line-width: 2; } [zoom>=12] { line-width: 3; } } } @water_line:lighten(@water,8); #water { ::b { polygon-pattern-file:url(img/water.png); polygon-pattern-alignment:global; } polygon-fill: mix(@water,#fff,50); polygon-gamma: 0.6; comp-op:multiply; a/line-color:@water_line; a/line-width:-0.4; a/line-comp-op:multiply; a/line-smooth:2; b/line-color:@water_line; b/line-width:-0.4; b/line-comp-op:multiply; b/line-smooth:4; c/line-color:@water_line; c/line-width:-0.4; c/line-comp-op:multiply; c/line-smooth:6; [zoom>=12] { a/line-width:0.8; b/line-width:0.8; c/line-width:0.8; } } #waterway { comp-op:multiply; [type='river'], [type='canal'] { line-color: @water; line-width: 0.5; [zoom>=12] { line-width: 1; } [zoom>=14] { line-width: 2; } [zoom>=16] { line-width: 3; } } [type='stream'] { line-color: @water; line-width: 0.5; [zoom>=14] { line-width: 1; } [zoom>=16] { line-width: 2; } [zoom>=18] { line-width: 3; } } } #landuse { ::glow { comp-op:multiply; [class='park'],[class='pitch'],[class='school'] { line-width:2; line-join:round; [class='park'] { line-color:#ddb; } [class='pitch'] { line-color:#eed; } [class='school'] { line-color:#edb; } } } ::main[zoom>=0] { comp-op:multiply; [class='park'] { polygon-pattern-file:url(img/park.png); polygon-pattern-alignment:global; } [class='school'] { polygon-fill:#ed9; polygon-opacity:0.5; } } ::wood[class='wood'] { line-color:#C3CFB4; line-opacity:0.33; line-width:3; line-join:round; polygon-pattern-file:url(img/forest.png); polygon-pattern-alignment:global; comp-op:multiply; opacity:0.5; } } #building { polygon-fill:#efe8d8; comp-op:multiply; [zoom>=15] { line-color:#efe8d8 * 0.9; [zoom>=15] { line-width:0.2; } [zoom>=16] { line-width:0.4; } [zoom>=17] { line-width:0.8; } } } #tunnel { opacity: 0.5; } #road, #tunnel, #bridge { ['mapnik::geometry_type'=2] { line-width: 1; line-color:#edc; line-comp-op:multiply; [class='motorway'], [class='main'], [class='motorway_link']{ line-color:#dba; [zoom>=10] { line-width: 1; } [zoom>=12] { line-width: 2; } [zoom>=14] { line-width: 3; } [zoom>=16] { line-width: 5; } } [class='street'], [class='street_limited'] { [zoom>=13] { line-width: 1.4; } [zoom>=14] { line-width: 2; } [zoom>=16] { line-width: 3; } } [class='street_limited'] { line-dasharray: 4,1; } [class='path'] { line-dasharray: 3,2; } } }

Аргх, приятель!

Взгляните на некоторые другие готовые стили MapBox здесь.

Плюсы

Расширяет листовку.
Большое хранилище подробных и безоблачных спутниковых снимков.
Подробные данные о местности.
Большое количество подключенных услуг.
Красиво оформленные карты из коробки.
Графический интерфейс для стилизации и настройки существующих карт.

Минусы

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

КартоДБ

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

CartoDB была создана в результате отсутствия альтернатив для простой визуализации и хранения геопространственных данных. Следовательно, CartoDB можно считать альтернативой Google Fusion Tables. Пользователи могут импортировать наборы данных в различных форматах, включая таблицы CSV, KML или Excel, и накладывать их на карты из распространенных источников, таких как Google, Here (Nokia) или OpenStreetMap. Поскольку все геоданные хранятся в реальной базе данных, к данным можно обращаться и запрашивать их с помощью SQL, а затем стилизовать с помощью CSS.

Услуга CartoDB предлагается как «бесплатная»; пользователи, оставляющие свои данные открытыми, могут бесплатно размещать свои проекты на веб-сайте CartoDB. Чтобы хранить личные данные, импортировать более 5 МБ данных или использовать более пяти таблиц, пользователи должны подписаться на премиум-план.

GeoJSON

CartoDB — это инструмент для визуализации данных, поэтому он используется немного иначе, чем другие примеры онлайн-инструментов для картографирования. Ваша карта CartoDB автоматически визуализирует любые данные, имеющие географические координаты на карте. Таким образом, мы можем показать метку для Загреба, просто добавив ее в нашу базу данных PostGIS. Вот пример в формате GeoJSON:

 { "type": "FeatureCollection", "features": [ { "type":"Feature", "geometry": { "type":"Point", "coordinates":[15.9833,45.8167] }, "properties": { "cartodb_id":1, "name":"Zagreb", "description":null, "created_at":"2015-02-20T21:02:16Z", "updated_at":"2015-02-20T21:03:59Z" } } ] }

Однако, чтобы действительно понять, на что способна CartoDB, взгляните на их галерею.

Плюсы

Отлично подходит для управления и хранения геопространственных данных.
Поддерживает множество форматов данных и большие наборы данных.
На основе проверенных продуктов с открытым исходным кодом, таких как Leaflet и PostGIS.
Фримиум модель.

Минусы

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

Другие варианты для веб-разработчиков

В настоящее время это самые популярные картографические фреймворки, но есть и другие менее известные варианты. Если вы привязаны к экосистеме Microsoft, они предлагают API, аналогичный Google Maps, который называется Bing Maps API.

И мы не можем не упомянуть динозавра в мире онлайн-карт, MapQuest. Он все еще существует и предлагает картографические инструменты MapQuest.

Если вы ищете немного другой подход к созданию карт, Kartograph интересен тем, что он был создан с учетом потребностей дизайнеров и журналистов данных.

Стилизация ваших карт

Все эти фреймворки позволяют настроить стиль и внешний вид ваших карт. MapBox и CartoDB предлагают стилизацию с использованием CSS или разновидности CSS.

Что касается Google, то в версии 3 API Карт Google появились карты с пользовательским стилем. Это, наконец, дало разработчикам, особенно дизайнерам, больше возможностей для настройки стандартного дизайна Google Maps, который можно увидеть повсюду, и привести его в большее соответствие с общей визуальной темой веб-сайта. В богатом сообществе Google Maps появилось несколько ресурсов по стилю. Наиболее заметным из них является Snazzy Maps, сообщество людей, создающих собственные стили для Карт Google и бесплатно распространяющих их.

Если вы решили использовать OpenLayers или Leaflet, то вы ограничены предварительно обработанными тайлами карты. К счастью, существует широкий выбор фрагментов карты: от Google, Nokia, Bing или стандартных фрагментов OSM до специально созданных дизайнерами, такими как Stamen. Чтобы понять, сколько существует доступных фрагментов карты или как они выглядят по сравнению друг с другом, посетите сайты Streetmap Smackdown или Map Compare.

Будущее веб-карт и картографических инструментов

Будущее картографического мира выглядит интересным. Вот некоторые новые технологии, которые всего несколько лет назад выглядели бы как научная фантастика:

Только для векторов. Использование векторных карт вместо растровых изображений с D3.js открывает новые возможности, недоступные при использовании стандартных фреймворков. MapBox также движется в этом направлении с MapBox GL, основанным на OpenGL.
3D — трехмерный ландшафт и здания теперь отображаются на картах, а OpenLayers v3 поставляется со встроенной поддержкой Cesium.
ГИС и пространственный анализ в веб-браузере — уже возможно с использованием Turf. Turf — это библиотека JavaScript, которая поддерживает пространственные и статистические операции, классификацию данных и создание данных GeoJSON в браузере.

Заворачивать

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

Обобщить:

Карты Google — хорошо зарекомендовавшее себя картографическое решение, особенно для тех, кто не является разработчиком, чтобы получить базовую карту в Интернете, а также все возможности, которыми славится Google.
OpenLayers — для ситуаций, когда другие картографические среды не могут решить ваши задачи пространственного анализа.
Листовка . В настоящее время это лучшая картографическая среда для общих картографических целей, особенно если вам не нужны дополнительные услуги, которые предоставляют MapBox или CartoDB.
MapBox — быстрорастущее картографическое решение, меняющее рынок, когда вам нужен больший контроль над стилем карты или вам нужны услуги, которые другие не предоставляют, такие как подробные спутниковые изображения, геокодирование или маршруты.
CartoDB . Если у вас есть большие наборы данных, хранящиеся в разных форматах данных, не ищите дальше.

Дальнейшее чтение в блоге Toptal Engineering:

Обслуживайте кластеры карт в 50 раз быстрее, используя более интеллектуальное кэширование