Ankieta dotycząca najlepszych narzędzi mapowania online dla twórców stron internetowych: Mapa drogowa do map drogowych

Nie ma nic lepszego niż dobra, użyteczna mapa.

Dzisiaj korzystanie z map online jest łatwym i wciągającym procesem. Tworzenie własnych map online nie jest już wielkim przedsięwzięciem; mamy do dyspozycji szeroką gamę dostępnych narzędzi do mapowania online, od darmowych i prostych, po bogate w funkcje i złożone w użyciu. Dla twórców stron internetowych, którzy nie są zaznajomieni z mapowaniem stron internetowych, agonia wyboru może być onieśmielająca. Chcesz tworzyć mapy, ale nie wiesz od czego zacząć ani jakich narzędzi użyć. Jestem tutaj, aby pomóc w przygotowaniu tej listy najlepszych narzędzi do mapowania.

Trochę historii

Od samego początku technologia miała wpływ na tworzenie map i sposób ich wykorzystania. Wraz z rozwojem technologii ewoluowały procesy kartograficzne i kartograficzne, od ręcznie rysowanych map na papirusie po interaktywne mapy w Internecie.

Druga połowa XX wieku była punktem zwrotnym dla kartografii. Komputery stały się narzędziem z wyboru. Fotografia lotnicza, zdjęcia satelitarne i teledetekcja zmieniły sposób gromadzenia danych przestrzennych. Narodziły się Systemy Informacji Geograficznej (GIS). W końcu mapy GIS zaczęły przenosić się z komputerów stacjonarnych do sieci, a wielcy dostawcy GIS zaczęli tworzyć pierwsze frameworki dla map online.

Ale mapowanie GIS nie jest łatwe. Wymaga wielu technologii serwerowych, standardów i protokołów geoprzestrzennych wraz z ich implementacjami. Wymaga zrozumienia danych geoprzestrzennych i odwzorowań map, wiedzy jak zbierać dane, jak wyświetlać dane, jakich kolorów użyć, jak uogólniać dane do określonych skal, jak umieszczać etykiety na mapie, jak ustawić serwer, który będzie obsługiwał mapy, jak korzystać z bazy danych przestrzennych i tak dalej. GIS jest pełen skrótów, takich jak WMS, WFS, EPSG, CRS, SLD, GML, TMS, żeby wymienić tylko kilka, a żeby je poznać i zrozumieć, trzeba czytać książki, artykuły naukowe i artykuły.

Ewolucja mapowania online

Pierwsze mapy internetowe zazwyczaj pokazywały tylko jeden, bardzo mały obraz mapy. W tamtym czasie panoramowanie było realizowane poprzez przesunięcie o jeden krok, zwykle o połowę wielkości mapy, w jednym z ośmiu możliwych kierunków kompasu - N, NW, W, SW, S, SE, E, NE. Po kliknięciu przez użytkownika przycisku przesuwania lub powiększania cały nowy obraz musiałby zostać wyrenderowany na serwerze map, załadowany przez sieć, a następnie przetworzony przez przeglądarkę. Ze względu na ograniczenia technologii mapy zajmowały tylko niewielką część całej strony internetowej. Aby uzyskać lepszą interakcję, wczesne mapy wymagały wtyczek takich jak Flash lub własnych wtyczek opartych na Javie, a nawet ActiveX, które działały tylko w Internet Explorerze.

Google wywrócił świat map do góry nogami, wprowadzając Mapy Google w 2005 roku. Wśród swoich innowacji Google wprowadziło ciągłe przesuwanie przez przeciąganie. Ich rozwiązaniem było wyświetlenie mapy podzielonej na wiele mniejszych kwadratowych obrazów zwanych „kafelkami”. Te kafelki były renderowane i udostępniane z „serwera kafelków mapy” i zwykle mają rozmiar 256 x 256 pikseli. Powiększanie i przesuwanie wymaga teraz tylko ładowania nowych kafelków mapy zamiast ponownego ładowania całej strony internetowej. Rezultatem była większa widoczna mapa, która zajmowała ponad połowę okna przeglądarki i oferowała płynne wrażenia podczas eksploracji mapy. Ze względu na możliwość „przesuwania” mapy za pomocą płynnych funkcji powiększania i przesuwania, te nowe mapy nazwano „poślizgowymi mapami”. Google pozwalało również na tworzenie skryptów, dzięki czemu użytkownicy mogli umieszczać mapy Google na własnych stronach internetowych i dodawać własne dane do mapy. Zaowocowało to ukuciem kolejnego nowego terminu: „Mash-upy map”.

Nagle popularne stają się mapy online; aby dodać ładnie wyglądającą mapę do swojej witryny, nie musisz już być kartografem ani specjalistą GIS. Na skrzydłach ruchu „Web 2.0” i budowaniu nowoczesnych technologii, takich jak HTML5, CSS3 i SVG, które umożliwiają łatwe tworzenie interaktywnych treści, interaktywne mapy przeżywają teraz nowy renesans.

Dane mapy

Jak wspomniano wcześniej, wczesne mapy internetowe opierały się na zestawach danych GIS i ich geobazach przestrzennych. Niewiele osób miało dostęp do tych danych, nie mówiąc już o ich cenie. Zmieniły to Google i zbiory danych projektu OpenStreetMap (OSM). Baza danych Google jest prywatna i zawiera ograniczenia, podczas gdy OSM został zainspirowany koncepcją Wikipedii, jako wspólny projekt stworzenia bezpłatnej mapy świata. OpenStreetMap jest tworzony przez społeczność wolontariuszy tworzących mapy, którzy współtworzą i utrzymują dane przestrzenne.

Krótko mówiąc, największą rewolucją, która przyczyniła się dziś do łatwego tworzenia map, jest usunięcie problemu związanego z utrzymaniem serwera map i bazy danych przestrzennych.

Wybór platformy mapowania internetowego

Tak więc, przy wszystkich dostępnych opcjach, jak wybrać odpowiednie narzędzie do mapowania online? Z jednej strony istnieją komercyjni dostawcy map internetowych, tacy jak Google, MapQuest, Microsoft i Nokia. Usługi te udostępniają kafelki map i odpowiednie interfejsy API JavaScript do wyświetlania ich i interakcji z mapą. Z drugiej strony istnieją projekty mapowania typu open source, które oferują łatwe ładowanie kafelków map opartych na OpenStreetMap. Należą do nich OpenLayers i Leaflet. Są też projekty, takie jak MapBox i CartoDB, które opierają swoje modele biznesowe na bibliotekach open source i danych OSM i zapewniają wartość dodaną, ale nie są darmowe.

Rzućmy okiem na kilka przykładów z każdej z tych kategorii. W tym miejscu omówię kilka z tych narzędzi do mapowania online, zapewniając krótki przegląd każdego z nich, wraz z przykładami kodu oraz rozważeniem zalet i wad. Napisaliśmy również samouczek mapowania D3.js, który może Cię zainteresować jako osobna lektura.

mapy Google

Zacznijmy od najbardziej oczywistego wyboru, Map Google. Pierwsza wersja Google Maps API została wprowadzona w lutym 2005, a obecna wersja Google Maps API v3 w czerwcu 2009. Google Maps API to nie tylko punkt końcowy API JavaScript; zawiera więcej projektów i oferuje kilka różnych sposobów osadzania Map Google na stronach internetowych z rozbudowanymi możliwościami dostosowania.

Obecnie dostępne interfejsy API Map Google obejmują:

• Interfejs API JavaScript Map Google
• Interfejs API Statycznych Map Google
• Google Maps Embed API
• Pakiet SDK Map Google na iOS
• Interfejs API Map Google na Androida v2

Aby pomóc Ci wybrać odpowiedni interfejs API, Google opracował selektor interfejsu API.

Warto zauważyć, że chociaż podstawowe interfejsy API są darmowe, narzucane są pewne ograniczenia. Po pierwsze, mapy muszą być swobodnie i publicznie dostępne dla użytkowników końcowych. Po drugie, ograniczenia użytkowania: usługa jest bezpłatna, o ile Twoja witryna nie generuje więcej niż 25 000 wczytań map dziennie w dowolnym okresie 90 dni. Jeśli potrzebujesz większej skali lub prywatnej mapy albo prowadzisz witrynę firmową lub komercyjną, rozważ opłacenie Google Maps API for Work.

Realizacja

Oto przykład, jak zaimplementować prostą mapę Google w kodzie. Pokazuje, jak stworzyć prostą mapę za pomocą API, umieścić znacznik na mapie i otworzyć wyskakujące okienko jednym kliknięciem myszy.

 <!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>

Wynikowa mapa wygląda tak:

Plusy

• Opracowany i utrzymywany przez Google.
• Wiele różnych interfejsów API do umieszczania mapy w witrynie lub aplikacji.
• Duża społeczność użytkowników.
• Bardzo dobra dokumentacja API, z wieloma przykładami.

Cons

• Czy jesteśmy pewni, że w pewnym momencie nie zobaczymy reklam?
• Wszyscy go używają; wszystkie mapy (w większości) wyglądają tak samo.
• Zamknięty i poprawny interfejs API.
• Żadnych wtyczek poza tymi, które zostały oficjalnie opracowane przez Google.
• Niejasny cennik Google Maps for Work.

OpenLayers

OpenLayers został opracowany przez MetaCarta jako open source odpowiednik Google Maps, a pierwsza wersja została opublikowana w czerwcu 2006 roku. OpenLayers to jedyne narzędzie do mapowania, które implementuje API JavaScript do tworzenia rozbudowanych internetowych aplikacji geograficznych, z API podobnym do Interfejs API Map Google. OpenLayers bardzo szybko zyskał dużą przyczepność, a rozwój na początku był szybki. OpenLayers 2 został wydany zaledwie dwa miesiące po wersji 1, w sierpniu 2006 roku. Biblioteka była ciągle rozwijana i ciągle dodawane były nowe wersje z nowymi funkcjami. Minusem tego szybkiego postępu było to, że biblioteka w wersji 2 stała się bardzo duża i nieporęczna, ostatecznie osiągając rozmiar 1 MB i zawierając ponad 100 000 linii kodu! Chociaż miał wiele funkcji, nie wszystkie były potrzebne zwykłym użytkownikom.

To był główny powód kompleksowego przepisania biblioteki. Celem było skupienie się na najnowszych funkcjach HTML5 i CSS3, z tą samą funkcjonalnością co OpenLayers 2, taką jak obsługa projekcji, standardowe protokoły i funkcjonalność edycji. Główny nacisk położono na ulepszenia wydajności, lżejsze kompilacje, ładniejsze komponenty wizualne i lepsze API. Ten znacznie ulepszony OpenLayers 3 został opublikowany w sierpniu 2014 roku.

Realizacja

Zobaczmy jak ta sama mapa co w poprzednim przykładzie, tym razem używając 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>

A wynik:

Plusy

• Darmowe i otwarte oprogramowanie.
• Bogata w funkcje biblioteka dla Twoich potrzeb mapowych.
• Mnóstwo przykładów.
• Obsługa szeregu typów danych i standardów GIS.
• Wbudowana obsługa projekcji map i funkcji edycji.

Cons

• Wersja 3 jest nadal intensywnie rozwijana, a API wciąż zmienia się z każdym wydaniem punktu.
• Skomplikowana składnia API.
• Dokumentacja wersji 3 nie jest obecnie tak dokładna, jak mogłaby być.

Ulotka

Można śmiało powiedzieć, że ulotka narodziła się jako reakcja na rozrost, bałagan i złożoność OpenLayers. Vladimir Agafonkin został poproszony o zbudowanie wrappera z OpenLayers, ale zamiast tego stworzył prostą i lekką alternatywę OpenLayers, iw maju 2011 narodził się Leaflet. Vladimir skupił się na prostocie, wydajności i użyteczności tego narzędzia mapy online. Podstawowa biblioteka ma tylko podstawową funkcjonalność, która jest wystarczająca dla większości rzeczywistych przypadków użycia. Mimo to, Leaflet można rozszerzyć za pomocą ogromnej liczby wtyczek, które są łatwe do opracowania i dodania do podstawowej biblioteki. Dodatkowo ulotka została opracowana od podstaw z myślą o wsparciu mobilnym.

Ulotka jest łatwa w użyciu i posiada dobrze udokumentowane API, wraz z prostym kodem źródłowym, który jest dostępny na GitHub. W wyniku skupienia się na wydajności, użyteczności, prostocie, niewielkich rozmiarach i obsłudze urządzeń mobilnych jest znacznie mniej skomplikowany niż OpenLayers.

Ciekawie zapowiada się też przyszłość ulotki. Według Vladimira, planuje, że następne duże wydanie będzie jeszcze prostsze, jeszcze bardziej poprawi wydajność i zmodernizuje infrastrukturę wtyczek.

Realizacja

Oto ta sama mapa, co poprzednio, tym razem zaimplementowana za pomocą 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> 

Plusy

• Darmowe i otwarte oprogramowanie.
• Mały i szybki.
• Prosta i łatwa składnia API.
• Przyjazny dla urządzeń mobilnych.
• Dobry do szybkiego i łatwego tworzenia mapy online.
• Mnóstwo przykładów z bardzo dobrą dokumentacją.

Cons

• Brak zaawansowanej funkcjonalności.

Pole mapy

Startup o nazwie MapBox próbuje zrewolucjonizować internetowy rynek kartograficzny, mając na celu stworzenie lepiej wyglądających, bardziej wszechstronnych map internetowych. MapBox JavaScript API wykorzystuje ulotkę i jest napisany jako wtyczka ulotka. Rozszerza funkcjonalność Leaflet i integruje się z innymi usługami internetowymi MapBox, w tym hostingiem MapBox dla niestandardowych map i zestawów danych tworzonych przez użytkowników. Oprócz JavaScript API, MapBox zawiera następujące połączone usługi:

• Mobilne pakiety SDK dla systemów iOS i Android.
• Zestaw gotowych map.
• Mapy statyczne, które można wyświetlać bez potrzeby korzystania z biblioteki map.
• Usługa geokodowania.
• Usługa dojazdu.

MapBox oferuje nie tylko swoją usługę mapowania, ale także dostęp do danych, w tym prywatnie pozyskanych zdjęć satelitarnych, otwartych danych z NASA i opartych na społeczności danych światowych z OpenStreetMap. Stylizacja danych odbywa się za pomocą CartoCSS, formatu stylów stworzonego przez MapBox, opartego na CSS i frameworku stylizacji LESS. Chociaż usługa MapBox oferuje bezpłatny poziom, ma ograniczoną przepustowość i pamięć, a w przypadku każdego poważnego użytkowania usługa musi zostać opłacona.

Wiele dużych firm dostrzegło korzyści, jakie zapewnia MapBox i używa go we własnych witrynach. Należą do nich Foursquare, Evernote, Pinterest, The Financial Times, GitHub i Etsy, żeby wymienić tylko kilka.

CartoCSS

Oto przykład zgrabnej mapy MapBox używającej stylu o nazwie Pirates , stworzonego przez projektantów MapBox. Ponieważ MapBox działa na górze Leaflet, kod do osadzenia tego na twojej stronie internetowej będzie podobny do powyższego przykładu Leaflet:

Jak wspomniano powyżej, CartoCSS służy do stylizowania kafelków wektorowych w MapBox. Odbywa się to za pomocą ich MapBox Studio, które jest również open source. Dzięki MapBox Studio możliwe jest tworzenie własnych stylów map od podstaw lub zmienianie i rozszerzanie istniejących stylów stworzonych przez innych projektantów. Gdy Twoja niestandardowa mapa zostanie przesłana na Twoje konto MapBox, możesz osadzić ją w swojej witrynie za pomocą interfejsu API MapBox.

Poniżej znajduje się próbka CartoCSS użytego do uzyskania warstwy bazowej 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; } } }

Och, kolego!

Spójrz na niektóre z innych wstępnie zaprojektowanych stylów MapBox tutaj.

Plusy

• Rozszerza ulotkę.
• Duże repozytorium szczegółowych i bezchmurnych zdjęć satelitarnych.
• Szczegółowe dane terenowe.
• Mnóstwo połączonych usług.
• Pięknie zaprojektowane mapy po wyjęciu z pudełka.
• Graficzny interfejs do stylizowania i dostosowywania istniejących map.

Cons

• Gadżety nie są darmowe.
• Ceny są oparte bardziej na ruchu niż funkcjach.

CartoDB

Do bardziej złożonej wizualizacji i analizy danych geoprzestrzennych CartoDB jest jednym z najlepszych dostępnych narzędzi. Jest to usługa w chmurze, która przechowuje dane geograficzne w przestrzennej bazie danych w chmurze o nazwie PostGIS, zapewniając narzędzia do uzyskiwania dostępu do danych, analizowania ich z wykorzystaniem możliwości przestrzennych i geolokalizacyjnych PostGIS oraz wyświetlania ich za pomocą Leaflet.

CartoDB powstało z braku alternatyw dla łatwej wizualizacji i przechowywania danych geoprzestrzennych. W związku z tym CartoDB można uznać za alternatywę dla Fusion Tables firmy Google. Użytkownicy mogą importować zestawy danych w różnych formatach, w tym tabele CSV, KML lub Excel, i nakładać je na mapy z popularnych źródeł, takich jak Google, Here (Nokia) lub OpenStreetMap. Ponieważ wszystkie geodane są przechowywane w prawdziwej bazie danych, można uzyskać do nich dostęp i przeszukiwać je za pomocą SQL, a następnie stylizować za pomocą CSS.

Usługa CartoDB jest oferowana jako „freemium”; użytkownicy, którzy udostępniają swoje dane publicznie, mogą bezpłatnie udostępniać swoje projekty na stronie CartoDB. Aby przechowywać prywatne dane, importować więcej niż 5 MB danych lub korzystać z więcej niż pięciu tabel, użytkownicy muszą wykupić abonament premium.

GeoJSON

CartoDB to narzędzie do wizualizacji danych, więc jest używane nieco inaczej niż inne przykłady narzędzi do mapowania online. Twoja mapa CartoDB automatycznie zwizualizuje wszelkie dane, które mają georeferencyjne współrzędne na mapie. Możemy więc pokazać etykietę Zagrzebia, po prostu dodając ją do naszej bazy danych PostGIS. Oto przykład sformatowany w 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" } } ] } 

Jednak, aby naprawdę zorientować się, do czego zdolny jest CartoDB, spójrz na ich galerię.

Plusy

• Doskonały do ​​zarządzania i przechowywania danych geoprzestrzennych.
• Obsługuje wiele formatów danych i duże zestawy danych.
• Oparte na sprawdzonych produktach open source, takich jak Leaflet i PostGIS.
• Model Freemium.

Cons

• Nie darmowy.
• Ceny są oparte na rozmiarze przechowywanych danych, co może być drogie, jeśli używane są bardzo duże zestawy danych.

Inne opcje dla programistów internetowych

Są to najpopularniejsze obecnie dostępne frameworki mapowania, ale istnieją inne, mniej znane opcje. Jeśli jesteś związany z ekosystemem Microsoft, oferują interfejs API podobny do Google Maps o nazwie Bing Maps API.

I nie możemy nie wspomnieć o dinozaurze w świecie map online, MapQuest. Nadal jest dostępny i oferuje narzędzia do mapowania MapQuest.

Jeśli szukasz nieco innego podejścia do tworzenia map, Kartograph jest interesujący, ponieważ został stworzony z myślą o potrzebach projektantów i dziennikarzy danych.

Stylizacja swoich map

Wszystkie te struktury oferują sposób na dostosowanie stylu i wyglądu twoich map. MapBox i CartoDB oferują stylizację za pomocą CSS lub odmianę CSS.

Na froncie Google wersja 3 interfejsu API Map Google wprowadziła niestandardowe mapy stylizowane. To w końcu dało programistom, zwłaszcza projektantom, więcej miejsca na dostosowanie domyślnego projektu Map Google widocznego wszędzie i dostosowanie go do ogólnego motywu wizualnego witryny. W bogatej społeczności Map Google powstało kilka zasobów dotyczących stylizacji. Najbardziej godna uwagi jest Snazzy Maps, społeczność ludzi tworzących niestandardowe style dla Map Google i udostępniających je bezpłatnie.

Jeśli zdecydujesz się na OpenLayers lub Leaflet, jesteś ograniczony do wstępnie renderowanych kafelków mapy. Na szczęście do wyboru jest inny zakres kafelków map, od Google, Nokia, Bing czy domyślnych kafelków OSM, po te specjalnie stworzone przez projektantów, takie jak Stamen. Aby dowiedzieć się, ile istnieje dostępnych kafelków mapy lub jak wyglądają one w porównaniu ze sobą, odwiedź witryny Streetmap Smackdown lub Mapy z porównywaniem.

Przyszłość map internetowych i narzędzi mapowych

Ciekawie zapowiada się przyszłość świata kartograficznego. Oto kilka nowych technologii, które jeszcze kilka lat temu wyglądały jak science fiction:

• Vector-Only — Używanie map wektorowych zamiast obrazów rastrowych w D3.js zapewnia nowy świat funkcji, które nie są możliwe przy użyciu standardowych frameworków. MapBox również zmierza w tym kierunku, z MapBox GL, opartym na OpenGL.
• 3D — trójwymiarowy teren i budynki są teraz wyświetlane na mapach, a OpenLayers v3 jest dostarczany z wbudowaną obsługą Cesium.
• GIS i analiza przestrzenna w przeglądarce internetowej - Już możliwe przy użyciu Turf. Turf to biblioteka JavaScript, która obsługuje operacje przestrzenne i statystyczne, klasyfikację danych i tworzenie danych GeoJSON, wszystko w przeglądarce.

Zakończyć

Każde z najlepszych wymienionych tutaj narzędzi do mapowania online ma swoje mocne i słabe strony. Na przykład przykłady kodu pokazują prostotę korzystania z Leaflet w przeciwieństwie do złożoności, jaką zapewnia OpenLayers. Ale ulotka nie rozwiąże złożonych problemów przestrzennych, tak jak to zrobią OpenLayers. Wybór sprowadza się do Twoich potrzeb.

Podsumowując:

• Mapy Google — dobrze zaokrąglone, ugruntowane rozwiązanie mapowe, szczególnie dla nie-programistów, aby uzyskać podstawową mapę w Internecie, wraz ze wszystkimi możliwościami, z których (nie)słynie Google.
• OpenLayers — w sytuacjach, gdy inne struktury mapowania nie mogą rozwiązać problemów z analizą przestrzenną.
• Ulotka — Obecnie najlepsza platforma mapowania do ogólnych celów mapowania, zwłaszcza jeśli nie potrzebujesz dodatkowych usług oferowanych przez MapBox lub CartoDB.
• MapBox — szybko rozwijające się i zmieniające rynek rozwiązanie mapowe, gdy chcesz mieć większą kontrolę nad stylami map lub potrzebujesz usług, których inni nie świadczą, takich jak szczegółowe zdjęcia satelitarne, geokodowanie lub wskazówki.
• CartoDB - Jeśli masz duże zbiory danych, przechowywane w różnych formatach danych, nie szukaj dalej.

Dalsza lektura na blogu Toptal Engineering:

• Obsługuj klastry map 50x szybciej dzięki inteligentnemu buforowaniu