Umfrage der besten Online-Mapping-Tools für Webentwickler: Die Roadmap zu Roadmaps

Es geht nichts über eine gute, nützliche Karte.

Heutzutage ist die Verwendung von Online-Karten ein einfacher und ansprechender Prozess. Das Erstellen Ihrer eigenen Online-Karten ist kein großes Unterfangen mehr; Wir verfügen über eine große Auswahl an verfügbaren Online-Mapping-Tools, von kostenlos und einfach bis hin zu funktionsreich und komplex in der Anwendung. Für Webentwickler, die mit Webmapping nicht vertraut sind, kann die Qual der Wahl einschüchternd sein. Sie möchten Karten erstellen, wissen aber nicht, wo Sie anfangen sollen oder welche Tools Sie verwenden sollen. Ich bin hier, um mit dieser Liste der besten Mapping-Tools zu helfen.

Ein bisschen Geschichte

Technologie hat von Anfang an Einfluss auf die Kartenerstellung und die Verwendung von Karten gehabt. Mit fortschreitender Technologie entwickelten sich auch Kartographie- und Kartenerstellungsprozesse, von manuell gezeichneten Karten auf Papyrus bis hin zu interaktiven Karten im Internet.

Die zweite Hälfte des 20. Jahrhunderts war ein Wendepunkt für die Kartographie. Computer wurden zum Werkzeug der Wahl. Luftaufnahmen, Satellitenbilder und Fernerkundung haben die Art und Weise verändert, wie Geodaten erfasst werden. Geographische Informationssysteme (GIS) waren geboren. Schließlich begannen GIS-Karten, vom Desktop ins Internet zu wechseln, und große GIS-Anbieter begannen, die ersten Frameworks für Online-Karten zu entwickeln.

Aber GIS-Kartierung ist nicht einfach. Es erfordert viele serverseitige Technologien, Geostandards und Protokolle sowie deren Implementierungen. Es erfordert das Verständnis von Geodaten und Kartenprojektionen, Kenntnisse darüber, wie die Daten erfasst werden, wie die Daten angezeigt werden, welche Farben verwendet werden, wie die Daten auf bestimmte Maßstäbe verallgemeinert werden, wie Beschriftungen auf der Karte platziert werden, wie eine erstellt wird Server, der die Karten bereitstellt, wie man eine räumliche Datenbank verwendet und so weiter. GIS ist voll von Abkürzungen wie WMS, WFS, EPSG, CRS, SLD, GML, TMS, um nur einige zu nennen, und um sie zu kennen und zu verstehen, müssen Sie Bücher, wissenschaftliche Arbeiten und Artikel lesen.

Die Evolution der Online-Kartierung

Die ersten Webkarten zeigten typischerweise nur ein einziges, sehr kleines Kartenbild. Damals wurde das Schwenken durch Bewegen um einen Schritt, normalerweise um die Hälfte der Kartengröße, in eine von acht möglichen Himmelsrichtungen – N, NW, W, SW, S, SE, O, NE – implementiert. Nachdem der Benutzer auf die Schwenk- oder Zoom-Schaltfläche geklickt hat, müsste ein ganz neues Bild auf dem Kartenserver gerendert, über das Netzwerk geladen und dann vom Browser verarbeitet werden. Aufgrund der Beschränkungen der Technologie nahmen Karten nur einen sehr kleinen Teil der gesamten Webseite ein. Für eine bessere Interaktion erforderten frühe Karten Plugins wie Flash oder proprietäre Plugins auf Java-Basis oder sogar ActiveX, das nur im Internet Explorer funktionierte.

Google hat die Kartenwelt auf den Kopf gestellt, als es 2005 Google Maps eingeführt hat. Unter seinen Innovationen führte Google das kontinuierliche Schwenken durch Ziehen ein. Ihre Lösung bestand darin, eine Karte anzuzeigen, die in viele kleinere quadratische Bilder namens „Kacheln“ unterteilt war. Diese Kacheln wurden von einem „Kartenkachelserver“ gerendert und bereitgestellt und sind normalerweise 256 x 256 Pixel groß. Zum Zoomen und Schwenken mussten jetzt nur noch neue Kartenkacheln geladen werden, anstatt die gesamte Webseite neu zu laden. Das Ergebnis war eine größere sichtbare Karte, die mehr als die Hälfte des Browserfensters einnahm und ein reibungsloses Erlebnis zum Erkunden der Karte bot. Aufgrund der Fähigkeit, die Karte mit den reibungslosen Zoom- und Schwenkfunktionen „herumzuschieben“, wurden diese neuen Karten „rutschige Karten“ genannt. Google erlaubte auch Scripting, sodass Benutzer die Karten von Google auf ihre eigenen Websites stellen und ihre eigenen Daten zur Karte hinzufügen konnten. Dies führte dazu, dass ein weiterer neuer Begriff geprägt wurde: „Karten-Mash-ups“.

Plötzlich werden Online-Karten populär; Um Ihrer Website eine gut aussehende Karte hinzuzufügen, mussten Sie kein Kartograf oder GIS-Spezialist mehr sein. Auf den Flügeln der „Web 2.0“-Bewegung und aufbauend auf modernen Technologien wie HTML5, CSS3 und SVG, die eine einfache Erstellung interaktiver Inhalte ermöglichen, erleben interaktive Karten jetzt eine neue Renaissance.

Kartendaten

Wie bereits erwähnt, basierten frühe Online-Karten auf Sätzen von GIS-Daten und ihren räumlichen Geodatenbanken. Nicht viele Menschen hatten Zugang zu diesen Daten, ganz zu schweigen von ihrem Preis. Google und die Projektdatensätze von OpenStreetMap (OSM) haben das geändert. Die Datenbank von Google ist privat und mit Einschränkungen verbunden, während OSM vom Konzept der Wikipedia als Gemeinschaftsprojekt zur Erstellung einer freien Weltkarte inspiriert wurde. OpenStreetMap wird von einer Gemeinschaft freiwilliger Mapper erstellt, die zu den räumlichen Daten beitragen und diese pflegen.

Kurz gesagt, die größte Revolution, die heute zur einfachen Kartenerstellung beigetragen hat, besteht darin, dass die Probleme im Zusammenhang mit der Wartung eines Kartenservers und der räumlichen Datenbank beseitigt wurden.

Auswählen eines Web-Mapping-Frameworks

Wie wählen wir also bei all den Optionen das richtige Online-Mapping-Tool aus? Auf der einen Seite gibt es kommerzielle Online-Kartenanbieter wie Google, MapQuest, Microsoft und Nokia. Diese Dienste stellen Kartenkacheln und proprietäre JavaScript-APIs bereit, um sie anzuzeigen und mit einer Karte zu interagieren. Andererseits gibt es Open-Source-Mapping-Projekte, die ein einfaches Laden von OpenStreetMap-basierten Kartenkacheln bieten. Dazu gehören OpenLayers und Leaflet. Und dann gibt es Projekte wie MapBox und CartoDB, die ihre Geschäftsmodelle auf den Open-Source-Bibliotheken und OSM-Daten aufbauen und einen Mehrwert bieten, aber nicht kostenlos sind.

Werfen wir einen Blick auf einige Beispiele aus jeder dieser Kategorien. Hier werde ich einige dieser Online-Mapping-Tools diskutieren, einen kurzen Überblick über jedes geben, zusammen mit Codebeispielen, und die Vor- und Nachteile abwägen. Wir haben auch ein D3.js-Mapping-Lernprogramm geschrieben, das Sie möglicherweise als separate Lektüre interessant finden.

Google Maps

Beginnen wir mit der offensichtlichsten Wahl, Google Maps. Die erste Version der Google Maps-API wurde im Februar 2005 eingeführt und die aktuelle Google Maps-API v3 im Juni 2009. Die Google Maps-API ist nicht nur der JavaScript-API-Endpunkt; Es enthält mehr Projekte und bietet verschiedene Möglichkeiten, Google Maps mit umfangreichen Anpassungsmöglichkeiten in Webseiten einzubetten.

Zu den derzeit verfügbaren Google Maps-APIs gehören:

• Google Maps-JavaScript-API
• Google Static Maps-API
• Google Maps-Einbettungs-API
• Google Maps-SDK für iOS
• Google Maps-Android-API v2

Um Ihnen bei der Auswahl der richtigen API zu helfen, hat Google einen API-Picker entwickelt.

Es ist erwähnenswert, dass die grundlegenden APIs zwar kostenlos sind, aber einige Einschränkungen auferlegt werden. Erstens müssen Karten für Endnutzer frei und öffentlich zugänglich sein. Zweitens Nutzungsbeschränkungen: Der Dienst ist kostenlos, solange Ihre Website nicht mehr als 25.000 Kartenladevorgänge pro Tag über einen Zeitraum von 90 Tagen generiert. Wenn Sie größere Maßstäbe benötigen oder eine private Karte wünschen oder eine Unternehmens- oder kommerzielle Website betreiben, sollten Sie in Betracht ziehen, für Google Maps API for Work zu bezahlen.

Implementierung

Hier ist ein Beispiel für die Implementierung einer einfachen Google-Karte im Code. Es zeigt, wie man mit der API eine einfache Karte erstellt, einen Marker auf der Karte platziert und per Mausklick ein Popup öffnet.

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

Die resultierende Karte sieht so aus:

Vorteile

• Entwickelt und gepflegt von Google.
• Viele verschiedene APIs zum Einbinden einer Karte in Ihre Website oder Anwendung.
• Große Community von Benutzern.
• Sehr gute API-Dokumentation mit vielen Beispielen.

Nachteile

• Sind wir sicher, dass wir irgendwann keine Anzeigen sehen werden?
• Jeder benutzt es; Alle Karten sehen (meistens) gleich aus.
• Geschlossene und proprietäre API.
• Keine Plugins außer denen, die offiziell von Google entwickelt wurden.
• Unklare Preise für Google Maps for Work.

Offene Schichten

OpenLayers wurde von MetaCarta als Open-Source-Äquivalent zu Google Maps entwickelt, und die erste Version wurde im Juni 2006 veröffentlicht. OpenLayers ist ein Onling-Mapping-Tool, das eine JavaScript-API zum Erstellen umfangreicher webbasierter geografischer Anwendungen implementiert, mit einer ähnlichen API wie die Google Maps-API. OpenLayers gewann sehr schnell an Boden, und die Entwicklung war am Anfang schnell. OpenLayers 2 wurde nur zwei Monate nach Version 1, im August 2006, veröffentlicht. Die Bibliothek wurde ständig weiterentwickelt, und ständig wurden neue Versionen mit neuen Funktionen hinzugefügt. Der Nachteil dieses schnellen Fortschritts war, dass die Bibliothek der Version 2 sehr groß und klobig wurde und schließlich eine Größe von 1 MB erreichte und über 100.000 Codezeilen enthielt! Obwohl es mit vielen Funktionen ausgestattet war, wurden nicht alle von normalen Benutzern benötigt.

Dies war der Hauptgrund für eine umfassende Neufassung der Bibliothek. Ziel war es, die neuesten HTML5- und CSS3-Funktionen mit der gleichen Funktionalität wie OpenLayers 2, wie Unterstützung für Projektionen, Standardprotokolle und Bearbeitungsfunktionen, zu nutzen. Das Hauptaugenmerk lag auf Leistungsverbesserungen, leichteren Builds, schöneren visuellen Komponenten und einer besseren API. Dieses stark verbesserte OpenLayers 3 wurde im August 2014 veröffentlicht.

Implementierung

Mal sehen, wie dieselbe Karte wie im vorherigen Beispiel, diesmal mit 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>

Und das Ergebnis:

Vorteile

• Kostenlos und Open-Source.
• Funktionsreiche Bibliothek für Ihre Mapping-Anforderungen.
• Viele Beispiele.
• Unterstützung für eine Reihe von Datentypen und GIS-Standards.
• Integrierte Unterstützung für Kartenprojektionen und Bearbeitungsfunktionen.

Nachteile

• Version 3 befindet sich immer noch in intensiver Entwicklung, und die API ändert sich immer noch mit jedem Point-Release.
• Komplizierte API-Syntax.
• Die Dokumentation zu Version 3 ist derzeit nicht so gründlich, wie sie sein könnte.

Flugblatt

Man kann mit Sicherheit sagen, dass Leaflet als Reaktion auf die Aufblähung, Unordnung und Komplexität von OpenLayers geboren wurde. Vladimir Agafonkin wurde gebeten, einen Wrapper um OpenLayers zu bauen, aber er schuf stattdessen eine einfache und leichtgewichtige OpenLayers-Alternative, und im Mai 2011 wurde Leaflet geboren. Vladimir konzentrierte sich bei diesem Online-Kartentool auf Einfachheit, Leistung und Benutzerfreundlichkeit. Die Kernbibliothek verfügt nur über grundlegende Funktionen, die für die meisten Anwendungsfälle aus dem wirklichen Leben ausreichen. Dennoch kann Leaflet mit einer riesigen Menge an Plugins erweitert werden, die einfach zu entwickeln und zusätzlich zur Kernbibliothek hinzuzufügen sind. Darüber hinaus wurde Leaflet von Grund auf mit Blick auf die mobile Unterstützung entwickelt.

Leaflet ist einfach zu verwenden und verfügt über eine gut dokumentierte API sowie einen einfachen Quellcode, der auf GitHub verfügbar ist. Aufgrund seines Fokus auf Leistung, Benutzerfreundlichkeit, Einfachheit, geringe Größe und mobile Unterstützung ist es wesentlich weniger kompliziert als OpenLayers.

Auch die Zukunft von Leaflet sieht interessant aus. Laut Vladimir plant er, dass die nächste Hauptversion noch einfacher wird, die Leistung weiter verbessert und die Plugin-Infrastruktur aktualisiert wird.

Implementierung

Hier ist noch einmal dieselbe Karte wie zuvor, diesmal implementiert mit 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> 

Vorteile

• Kostenlos und Open-Source.
• Klein und schnell.
• Einfache und einfache API-Syntax.
• Mobilfreundlich.
• Gut, um schnell und einfach eine Online-Karte zu erstellen.
• Viele Beispiele mit sehr guter Dokumentation.

Nachteile

• Mangel an erweiterten Funktionen.

MapBox

Ein Startup namens MapBox versucht, den kartografischen Online-Marktplatz zu revolutionieren, mit dem Ziel, besser aussehende, vielseitigere Online-Karten zu erstellen. Die MapBox-JavaScript-API verwendet Leaflet und ist als Leaflet-Plugin geschrieben. Es erweitert die Leaflet-Funktionalität und lässt sich in andere MapBox-Webdienste integrieren, einschließlich MapBox-Hosting für benutzererstellte benutzerdefinierte Karten und Datensätze. Neben der JavaScript-API enthält MapBox die folgenden verbundenen Dienste:

• Mobile iOS- und Android-SDKs.
• Eine Reihe vorgefertigter Karten.
• Statische Karten, die angezeigt werden können, ohne dass eine Kartenbibliothek erforderlich ist.
• Ein GeoCoding-Dienst.
• Ein Wegbeschreibungsdienst.

MapBox bietet nicht nur seinen Kartendienst, sondern auch Zugriff auf die Daten, darunter privat erworbene Satellitenbilder, offene Daten der NASA und von der Community betriebene Weltdaten von OpenStreetMap. Das Daten-Styling erfolgt mit CartoCSS, einem von MapBox erstellten Style-Format, das auf CSS und dem LESS-Styling-Framework basiert. Obwohl der MapBox-Dienst ein kostenloses Kontingent bietet, ist er in Bandbreite und Speicherplatz begrenzt, und für jede ernsthafte Nutzung muss der Dienst bezahlt werden.

Viele große Unternehmen haben die Vorteile von MapBox erkannt und verwenden es auf ihren eigenen Websites. Dazu gehören Foursquare, Evernote, Pinterest, The Financial Times, GitHub und Etsy, um nur einige zu nennen.

CartoCSS

Hier ist ein Beispiel für eine raffinierte MapBox-Karte mit einem Stil namens Pirates , der von den Designern von MapBox erstellt wurde. Da MapBox auf Leaflet ausgeführt wird, wäre der Code zum Einbetten in Ihre Webseite ähnlich wie im obigen Leaflet-Beispiel:

Wie oben erwähnt, wird CartoCSS zum Stylen von Vektorkacheln in MapBox verwendet. Dies geschieht mit ihrem MapBox Studio, das ebenfalls Open Source ist. Mit MapBox Studio ist es möglich, Ihre eigenen Kartenstile von Grund auf neu zu erstellen oder vorhandene Stile zu ändern und zu erweitern, die von anderen Designern erstellt wurden. Sobald Ihre benutzerdefinierte Karte in Ihr MapBox-Konto hochgeladen wurde, können Sie sie mithilfe der MapBox-API in Ihre Website einbetten.

Das Folgende ist ein Beispiel für das CartoCSS, das zum Abrufen des Pirates -Basislayers verwendet wird:

 @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; } } }

Arrgh, Kumpel!

Sehen Sie sich hier einige der anderen vorgefertigten MapBox-Stile an.

Vorteile

• Merkblatt erweitert.
• Große Sammlung detaillierter und wolkenloser Satellitenbilder.
• Detaillierte Geländedaten.
• Viele verbundene Dienste.
• Wunderschön gestaltete Karten sofort einsatzbereit.
• Grafische Benutzeroberfläche zum Gestalten und Anpassen vorhandener Karten.

Nachteile

• Die Leckereien sind nicht kostenlos.
• Die Preisgestaltung basiert mehr auf dem Verkehr als auf Funktionen.

CartoDB

Für komplexere Visualisierung und Analyse von Geodaten ist CartoDB eines der besten Tools auf dem Markt. Es handelt sich um einen Cloud-Dienst, der geografische Daten in einer raumbezogenen Datenbank namens PostGIS in der Cloud speichert und Tools bereitstellt, um auf die Daten zuzugreifen, sie mit den räumlichen und geolokalisierungsbezogenen Fähigkeiten von PostGIS zu analysieren und sie mit Leaflet anzuzeigen.

CartoDB entstand aus Mangel an Alternativen für die einfache Visualisierung und Speicherung von Geodaten. Folglich kann CartoDB als Alternative zu Googles Fusion Tables angesehen werden. Benutzer können Datensätze in verschiedenen Formaten importieren, einschließlich CSV-, KML- oder Excel-Tabellen, und sie über Karten aus gängigen Quellen wie Google, Here (Nokia) oder OpenStreetMap legen. Da alle Geodaten in einer echten Datenbank gespeichert sind, können die Daten mit SQL abgerufen und abgefragt und dann mit CSS gestylt werden.

Der CartoDB-Dienst wird als „Freemium“ angeboten; Benutzer, die ihre Daten der Öffentlichkeit zugänglich machen, können ihre Projekte kostenlos auf der CartoDB-Website hosten. Um private Daten zu speichern, mehr als 5 MB Daten zu importieren oder mehr als fünf Tabellen zu verwenden, müssen Benutzer einen Premium-Plan abonnieren.

GeoJSON

CartoDB ist ein Tool zur Datenvisualisierung, daher wird es etwas anders verwendet als die anderen Beispiele für Online-Mapping-Tools. Ihre CartoDB-Karte visualisiert automatisch alle Daten mit georeferenzierten Koordinaten auf der Karte. So können wir ein Label für Zagreb anzeigen, indem wir es einfach zu unserer PostGIS-Datenbank hinzufügen. Hier ist ein in GeoJSON formatiertes Beispiel:

 { "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" } } ] } 

Um jedoch wirklich ein Gefühl dafür zu bekommen, wozu CartoDB in der Lage ist, werfen Sie einen Blick auf ihre Galerie.

Vorteile

• Ideal zum Verwalten und Speichern von Geodaten.
• Unterstützt viele Datenformate und große Datensätze.
• Basierend auf bewährten Open-Source-Produkten wie Leaflet und PostGIS.
• Freemium-Modell.

Nachteile

• Nicht frei.
• Die Preise basieren auf der gespeicherten Datengröße, was bei sehr großen Datensätzen teuer werden kann.

Weitere Optionen für Webentwickler

Dies sind die beliebtesten Mapping-Frameworks, die derzeit verfügbar sind, aber es gibt andere weniger bekannte Optionen in freier Wildbahn. Wenn Sie an das Microsoft-Ökosystem gebunden sind, bieten sie eine API ähnlich wie Google Maps namens Bing Maps API an.

Und wir können nicht gehen, ohne einen Dinosaurier in der Welt der Online-Kartierung, MapQuest, zu erwähnen. Es ist immer noch da und bietet MapQuest Mapping Tools.

Wenn Sie nach einem etwas anderen Ansatz für die Kartenerstellung suchen, ist Kartograph interessant, da es für die Bedürfnisse von Designern und Datenjournalisten entwickelt wurde.

Gestalten Sie Ihre Karten

Alle diese Frameworks bieten eine Möglichkeit, den Stil und das Erscheinungsbild Ihrer Karten anzupassen. MapBox und CartoDB bieten Styling mit CSS oder einer Variation von CSS.

An der Google-Front wurden mit Version 3 der Google Maps-API Karten mit benutzerdefiniertem Stil eingeführt. Dies gab Entwicklern, insbesondere Designern, endlich mehr Raum, um das überall zu sehende Standarddesign von Google Maps anzupassen und es besser an das allgemeine visuelle Thema einer Website anzupassen. Innerhalb der reichen Google Maps-Community wurden einige Styling-Ressourcen geboren. Am bemerkenswertesten ist Snazzy Maps, eine Community von Leuten, die benutzerdefinierte Stile für Google Maps erstellen und diese kostenlos teilen.

Wenn Sie sich für OpenLayers oder Leaflet entschieden haben, sind Sie auf vorgerenderte Kartenkacheln beschränkt. Glücklicherweise gibt es eine andere Auswahl an Kartenkacheln, von Google-, Nokia-, Bing- oder Standard-OSM-Kacheln bis hin zu speziell von Designern wie Stamen erstellten Kacheln. Um ein Gefühl dafür zu bekommen, wie viele verfügbare Kartenkacheln es gibt oder wie sie im Vergleich zueinander aussehen, besuchen Sie die Seiten Streetmap Smackdown oder Kartenvergleich.

Die Zukunft von Webkarten und Mapping-Tools

Die Zukunft der Mapping-Welt sieht interessant aus. Hier sind einige neue Technologien, die vor ein paar Jahren noch wie Science-Fiction ausgesehen hätten:

• Nur Vektor - Die Verwendung von Vektorkarten anstelle von Rasterbildern mit D3.js bringt eine neue Welt von Funktionen mit sich, die mit Standard-Frameworks nicht möglich sind. Auch MapBox bewegt sich in diese Richtung, mit MapBox GL, basierend auf OpenGL.
• 3D – Dreidimensionales Gelände und Gebäude werden jetzt auf Karten angezeigt, und OpenLayers v3 wird mit integrierter Unterstützung für Cäsium ausgeliefert.
• GIS und räumliche Analyse im Webbrowser - Mit Turf bereits möglich. Turf ist eine JavaScript-Bibliothek, die räumliche und statistische Operationen, Datenklassifizierung und GeoJSON-Datenerstellung innerhalb des Browsers unterstützt.

Einpacken

Jedes der besten hier aufgeführten Online-Mapping-Tools hat seine Stärken und Schwächen. Beispielsweise zeigen die Codebeispiele die Einfachheit der Verwendung von Leaflet gegenüber der Komplexität, die OpenLayers mit sich bringt. Aber Leaflet wird Ihre komplexen räumlichen Probleme nicht dort lösen, wo OpenLayers es tut. Die Wahl hängt von Ihren Bedürfnissen ab.

Zusammenfassen:

• Google Maps - Gut abgerundete, etablierte Kartenlösung, insbesondere für Nicht-Entwickler, um eine einfache Karte im Web zu erhalten, zusammen mit all den Fähigkeiten, für die Google (berüchtigt) ist.
• OpenLayers – Für Situationen, in denen andere Mapping-Frameworks Ihre räumlichen Analyseprobleme nicht lösen können.
• Merkblatt - Derzeit mit Abstand das beste Mapping-Framework für allgemeine Mapping-Zwecke, insbesondere wenn Sie die zusätzlichen Dienste, die MapBox oder CartoDB bieten, nicht benötigen.
• MapBox – Schnell wachsende und marktverändernde Kartenlösung, wenn Sie mehr Kontrolle über das Kartendesign wünschen oder Dienste benötigen, die andere nicht anbieten, wie z. B. detaillierte Satellitenbilder, Geokodierung oder Wegbeschreibungen.
• CartoDB - Wenn Sie umfangreiche Datensätze haben, die in verschiedenen Datenformaten gespeichert sind, suchen Sie nicht weiter.

Weiterführende Literatur im Toptal Engineering Blog:

• Stellen Sie Karten-Cluster 50-mal schneller mit intelligenterem Caching bereit