Sondaggio sui migliori strumenti di mappatura online per sviluppatori Web: la Roadmap to Roadmaps

Pubblicato: 2022-03-11

Non c'è niente come una mappa buona e utile.

Oggi utilizzare le mappe online è un processo facile e coinvolgente. Creare le tue mappe online non è più una grande impresa; abbiamo a nostra disposizione una vasta gamma di strumenti di mappatura online disponibili, da quelli gratuiti e semplici, a quelli ricchi e complessi da utilizzare. Per gli sviluppatori web che non hanno familiarità con la mappatura web, l'agonia della scelta potrebbe intimidire. Vuoi creare mappe, ma non sai da dove iniziare né quali strumenti utilizzare. Sono qui per aiutarti con questo elenco dei migliori strumenti di mappatura.

Un po' di storia

Fin dall'inizio, la tecnologia ha avuto un'influenza sulla creazione di mappe e su come vengono utilizzate le mappe. Con il progredire della tecnologia, i processi di cartografia e creazione di mappe si sono evoluti con essa, dalle mappe disegnate manualmente su papiro alle mappe interattive sul web.

strumenti di mappatura per sviluppatori web

La mappatura nel passato.

La seconda metà del XX secolo segna una svolta per la cartografia. I computer sono diventati uno strumento privilegiato. La fotografia aerea, le immagini satellitari e il telerilevamento hanno cambiato il modo in cui vengono raccolti i dati spaziali. Nascono i Sistemi Informativi Geografici (GIS). Alla fine, le mappe GIS hanno iniziato a spostarsi dal desktop al Web e i grandi fornitori di GIS hanno iniziato a creare i primi framework per le mappe online.

Ma la mappatura GIS non è facile. Richiede molte tecnologie lato server, standard geospaziali e protocolli, insieme alle loro implementazioni. Richiede la comprensione dei dati geospaziali e delle proiezioni cartografiche, la conoscenza di come raccogliere i dati, come visualizzare i dati, quali colori utilizzare, come generalizzare i dati a scale specifiche, come posizionare etichette sulla mappa, come impostare un server che servirà le mappe, come utilizzare un database spaziale e così via. Il GIS è pieno di abbreviazioni, come WMS, WFS, EPSG, CRS, SLD, GML, TMS, solo per citarne alcune, e per conoscerle e comprenderle è necessario leggere libri, articoli accademici e articoli.

L'evoluzione della mappatura online

Le prime mappe web in genere mostravano solo una singola immagine mappa molto piccola. A quel tempo, il panning veniva implementato spostando un passo, solitamente della metà della dimensione della mappa, in una delle otto possibili direzioni della bussola: N, NW, W, SW, S, SE, E, NE. Dopo che l'utente ha fatto clic sul pulsante di panoramica o zoom, è necessario eseguire il rendering di un'immagine completamente nuova sul server delle mappe, caricata sulla rete e quindi elaborata dal browser. A causa dei vincoli della tecnologia, le mappe occupavano solo una parte molto piccola dell'intera pagina web. Per ottenere una migliore interazione, le prime mappe richiedevano plug-in come Flash o plug-in proprietari basati su Java o persino ActiveX, che funzionavano solo in Internet Explorer.

Google ha capovolto il mondo della mappatura quando ha introdotto Google Maps nel 2005. Tra le sue innovazioni, Google ha introdotto la panoramica continua tramite trascinamento. La loro soluzione era visualizzare una mappa tagliata in molte immagini quadrate più piccole chiamate "tessere". Questi riquadri sono stati renderizzati e serviti da un "server di riquadri mappa" e in genere sono 256 x 256 pixel. Lo zoom e la panoramica ora richiedevano solo il caricamento di nuovi riquadri della mappa invece di ricaricare l'intera pagina web. Il risultato è stata una mappa visibile più grande che copriva più della metà della finestra del browser e offriva un'esperienza fluida per esplorare la mappa. A causa della capacità di "spostare" la mappa con le funzioni di zoom e panoramica fluide, queste nuove mappe sono state chiamate "mappe scivolose". Google ha anche consentito lo scripting, in modo che gli utenti potessero inserire le mappe di Google sui propri siti Web e aggiungere i propri dati alla mappa. Ciò ha portato a coniare un altro nuovo termine: "Map mash-up".

Improvvisamente, le mappe online diventano popolari; per aggiungere una mappa di bell'aspetto al tuo sito web, non devi più essere un cartografo o uno specialista GIS. Sulle ali del movimento "Web 2.0" e sulla base di moderne tecnologie come HTML5, CSS3 e SVG, che consentono la facile creazione di contenuti interattivi, le mappe interattive stanno ora vivendo una nuova rinascita.

Mappatura in futuro?

Dati mappa

Come accennato in precedenza, le prime mappe online erano basate su insiemi di dati GIS e sui loro geodatabase spaziali. Non molte persone hanno avuto accesso a quei dati, per non parlare del loro prezzo. Google e i set di dati del progetto OpenStreetMap (OSM) lo hanno cambiato. Il database di Google è privato e viene fornito con restrizioni, mentre OSM è stato ispirato dal concetto di Wikipedia, come progetto collaborativo per creare una mappa del mondo libera. OpenStreetMap è costruito da una comunità di mappatori volontari, che contribuiscono e mantengono i dati spaziali.

In breve, la più grande rivoluzione che ha contribuito alla facile creazione di mappe oggi è che il problema relativo alla manutenzione di un map server e del database spaziale è stato rimosso.

Scelta di un framework di mappatura Web

Quindi, con tutte le opzioni, come scegliamo lo strumento di mappatura online giusto? Da un lato, ci sono fornitori di mappe online commerciali come Google, MapQuest, Microsoft e Nokia. Questi servizi forniscono riquadri mappa e API JavaScript proprietari per visualizzarli e interagire con una mappa. D'altra parte, ci sono progetti di mappatura open source che offrono un facile caricamento di riquadri mappa basati su OpenStreetMap. Questi includono OpenLayers e Leaflet. E poi ci sono progetti come MapBox e CartoDB, che basano i loro modelli di business sulle librerie open source e sui dati OSM, e forniscono valore aggiunto ma non sono gratuiti.

Diamo un'occhiata ad alcuni esempi di ciascuna di queste categorie. Qui, discuterò molti di questi strumenti di mappatura online, fornendo una breve panoramica di ciascuno, insieme a esempi di codice e soppesando i pro ei contro. Abbiamo anche scritto un tutorial sulla mappatura D3.js che potresti trovare interessante come lettura separata.

Google Maps

Cominciamo con la scelta più ovvia, Google Maps. La prima versione dell'API di Google Maps è stata introdotta nel febbraio 2005 e l'attuale API di Google Maps v3 nel giugno 2009. L'API di Google Maps non è solo l'endpoint dell'API JavaScript; include più progetti e offre diversi modi per incorporare Google Maps in pagine Web con un'ampia personalizzazione.

Le API di Google Maps attualmente disponibili includono:

API Javascript di Google Maps
API delle mappe statiche di Google
API di incorporamento di Google Maps
SDK di Google Maps per iOS
API di Google Maps Android v2

Per aiutarti a scegliere l'API giusta, Google ha sviluppato un selettore di API.

Vale la pena notare che mentre le API di base sono gratuite, ci sono alcune limitazioni imposte. Il primo è che le mappe devono essere liberamente e pubblicamente accessibili agli utenti finali. Il secondo sono le limitazioni di utilizzo: il servizio è gratuito purché il tuo sito non generi più di 25.000 caricamenti di mappe al giorno, in un periodo di 90 giorni. Se hai bisogno di scale più grandi o desideri una mappa privata, o gestisci un sito Web aziendale o commerciale, dovresti considerare di pagare per l'API di Google Maps for Work.

Implementazione

Ecco un esempio di come implementare una semplice mappa di Google nel codice. Mostra come creare una mappa semplice utilizzando l'API, posizionare un marker sulla mappa e aprire un popup con un clic del mouse.

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

La mappa risultante si presenta così:

Professionisti

Sviluppato e mantenuto da Google.
Molte API diverse per includere una mappa nel tuo sito Web o applicazione.
Grande comunità di utenti.
Documentazione API molto buona, con molti esempi.

contro

Siamo sicuri che non vedremo aggiunte a un certo punto?
Tutti lo usano; tutte le mappe (per lo più) sembrano uguali.
API chiusa e proprietaria.
Nessun plugin oltre a quelli sviluppati ufficialmente da Google.
Prezzi non chiari per Google Maps for Work.

OpenLayers

OpenLayers è stato sviluppato da MetaCarta come un open source equivalente a Google Maps e la prima versione è stata pubblicata nel giugno 2006. OpenLayers è uno strumento di mappatura onling che implementa un'API JavaScript per la creazione di applicazioni geografiche basate sul Web, con un'API simile alla API di Google Maps. OpenLayers ha guadagnato molta trazione molto velocemente e lo sviluppo all'inizio è stato rapido. OpenLayers 2 è stato rilasciato solo due mesi dopo la versione 1, nell'agosto 2006. La libreria era costantemente in fase di sviluppo e venivano costantemente aggiunte nuove versioni con nuove funzionalità. Lo svantaggio di questo rapido progresso è stato che la libreria della versione 2 è diventata molto grande e goffa, raggiungendo alla fine una dimensione di 1 MB e contenente oltre 100.000 righe di codice! Sebbene fosse dotato di molte funzionalità, non tutte erano necessarie agli utenti regolari.

Questo è stato il motivo principale per una riscrittura completa della sua biblioteca. L'obiettivo era quello di puntare alle ultime funzionalità HTML5 e CSS3, con le stesse funzionalità di OpenLayers 2, come il supporto per le proiezioni, i protocolli standard e la funzionalità di modifica. L'obiettivo principale era il miglioramento delle prestazioni, build più leggere, componenti visivi più belli e un'API migliore. Questo OpenLayers 3 molto migliorato è stato pubblicato nell'agosto 2014.

Implementazione

Vediamo come mappare la stessa mappa dell'esempio precedente, questa volta utilizzando 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>

E il risultato:

Professionisti

Gratuito e open source.
Libreria ricca di funzionalità per le tue esigenze di mappatura.
Un sacco di esempi.
Supporto per una gamma di tipi di dati e standard GIS.
Supporto integrato per proiezioni cartografiche e funzioni di modifica.

contro

La versione 3 è ancora in forte sviluppo e l'API sta ancora cambiando con ogni rilascio di punti.
Sintassi API complicata.
La documentazione della versione 3 non è attualmente così completa come potrebbe essere.

Volantino

È sicuro dire che Leaflet è nato come reazione al gonfiore, al disordine e alla complessità di OpenLayers. A Vladimir Agafonkin è stato chiesto di costruire un wrapper attorno a OpenLayers, ma ha invece creato un'alternativa OpenLayers semplice e leggera e nel maggio 2011 è nato Leaflet. Vladimir si è concentrato su semplicità, prestazioni e usabilità per questo strumento di mappe online. La libreria principale ha solo funzionalità di base, sufficienti per la maggior parte dei casi d'uso della vita reale. Tuttavia, Leaflet può essere esteso con un'enorme quantità di plugin facili da sviluppare e aggiungere alla libreria principale. Inoltre, Leaflet è stato sviluppato da zero pensando al supporto mobile.

Leaflet è facile da usare e ha un'API ben documentata, insieme a un semplice codice sorgente disponibile su GitHub. Come risultato della sua attenzione su prestazioni, usabilità, semplicità, dimensioni ridotte e supporto mobile, è significativamente meno complicato di OpenLayers.

Anche il futuro di Leaflet sembra interessante. Secondo Vladimir, prevede che la prossima major release sia ancora più semplice, migliorando ulteriormente le prestazioni e aggiornando l'infrastruttura dei plugin.

Implementazione

Ecco ancora una volta la stessa mappa di prima, questa volta implementata utilizzando 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>

Professionisti

Gratuito e open source.
Piccolo e veloce.
Sintassi API semplice e facile.
Mobile friendly.
Buono per ottenere una mappa online in modo rapido e semplice.
Un sacco di esempi con un'ottima documentazione.

contro

Mancanza di funzionalità avanzate.

MapBox

Una startup denominata MapBox sta cercando di rivoluzionare il mercato cartografico online, con l'obiettivo di creare mappe online più belle e versatili. L'API JavaScript MapBox utilizza Leaflet ed è scritta come un plug-in Leaflet. Estende la funzionalità del volantino e si integra con altri servizi web di MapBox, incluso l'hosting di MapBox per mappe e set di dati personalizzati creati dall'utente. Oltre all'API JavaScript, MapBox include i seguenti servizi connessi:

SDK per dispositivi mobili iOS e Android.
Un insieme di mappe pre-progettate.
Mappe statiche che possono essere visualizzate senza la necessità di una libreria di mappe.
Un servizio di GeoCodifica.
Un servizio di indicazioni.

MapBox offre non solo il suo servizio di mappatura, ma anche l'accesso ai dati, comprese le immagini satellitari acquisite privatamente, i dati aperti dalla NASA e i dati mondiali guidati dalla comunità da OpenStreetMap. Lo styling dei dati viene eseguito utilizzando CartoCSS, un formato di stile creato da MapBox, basato su CSS e il framework di stile LESS. Sebbene il servizio MapBox offra un livello gratuito, è limitato in termini di larghezza di banda e spazio di archiviazione e per qualsiasi uso serio il servizio deve essere pagato.

Molte grandi aziende hanno riconosciuto i vantaggi offerti da MapBox e lo stanno utilizzando sui propri siti. Includono Foursquare, Evernote, Pinterest, The Financial Times, GitHub ed Etsy, solo per citarne alcuni.

CartoCSS

Ecco un esempio di una mappa MapBox slick che utilizza uno stile chiamato Pirates , creato dai designer di MapBox. Poiché MapBox viene eseguito su Leaflet, il codice per incorporarlo nella tua pagina web sarebbe simile all'esempio di Leaflet sopra:

Come accennato in precedenza, CartoCSS viene utilizzato per modellare le tessere vettoriali in MapBox. Questo viene fatto usando il loro MapBox Studio, che è anche open source. Con MapBox Studio, è possibile creare i propri stili di mappa da zero o modificare ed estendere gli stili esistenti creati da altri designer. Una volta che la tua mappa personalizzata è stata caricata sul tuo account MapBox, puoi incorporarla nel tuo sito utilizzando l'API MapBox.

Quello che segue è un esempio del CartoCSS utilizzato per ottenere il baselayer di 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; } } }

Argh, amico!

Dai un'occhiata ad alcuni degli altri stili MapBox predefiniti qui.

Professionisti

Estende il volantino.
Grande archivio di immagini satellitari dettagliate e senza nuvole.
Dati dettagliati del terreno.
Tanti servizi connessi.
Mappe ben progettate fuori dagli schemi.
Interfaccia grafica per lo styling e la personalizzazione delle mappe esistenti.

contro

Le chicche non sono gratuite.
I prezzi si basano più sul traffico che sulle funzionalità.

CartoDB

Per la visualizzazione e l'analisi di dati geospaziali più complessi, CartoDB è uno dei migliori strumenti disponibili. È un servizio cloud che memorizza i dati geografici in un database abilitato allo spazio nel cloud chiamato PostGIS, fornendo strumenti per accedere ai dati, analizzarli utilizzando i poteri spaziali e di geolocalizzazione di PostGIS e visualizzarli utilizzando Leaflet.

CartoDB è stato creato a causa della mancanza di alternative per una facile visualizzazione e archiviazione dei dati geospaziali. Di conseguenza, CartoDB può essere considerato un'alternativa alle Fusion Tables di Google. Gli utenti possono importare set di dati in vari formati, comprese tabelle CSV, KML o Excel, e sovrapporli a mappe da fonti comuni come Google, Here (Nokia) o OpenStreetMap. Poiché tutti i geodati sono archiviati in un database reale, è possibile accedere ai dati e interrogarli con SQL, quindi applicare uno stile con CSS.

Il servizio CartoDB è offerto come "freemium"; gli utenti che lasciano i propri dati aperti al pubblico possono ospitare gratuitamente i propri progetti sul sito web di CartoDB. Per archiviare dati privati, importare più di 5 MB di dati o utilizzare più di cinque tabelle, gli utenti devono abbonarsi a un piano premium.

GeoJSON

CartoDB è uno strumento per la visualizzazione dei dati, quindi viene utilizzato in modo leggermente diverso rispetto agli altri esempi di strumenti di mappatura online. La tua mappa CartoDB visualizzerà automaticamente tutti i dati che hanno coordinate georeferenziate sulla mappa. Quindi possiamo mostrare un'etichetta per Zagabria semplicemente aggiungendola al nostro database PostGIS. Ecco un esempio formattato in 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" } } ] }

Tuttavia, per avere un'idea di ciò di cui è capace CartoDB, dai un'occhiata alla loro galleria.

Professionisti

Ottimo per la gestione e l'archiviazione di dati geospaziali.
Supporta molti formati di dati e set di dati di grandi dimensioni.
Basato su collaudati prodotti open source, come Leaflet e PostGIS.
Modello Freemio.

contro

Non gratis.
Il prezzo si basa sulla dimensione dei dati archiviati, che può diventare costoso se vengono utilizzati set di dati molto grandi.

Altre opzioni per gli sviluppatori Web

Questi sono i framework di mappatura più popolari attualmente disponibili, ma ci sono altre opzioni meno conosciute in natura. Se sei legato all'ecosistema Microsoft, offrono un'API simile a Google Maps chiamata Bing Maps API.

E non possiamo non menzionare un dinosauro nel mondo della mappatura online, MapQuest. È ancora in circolazione e offre strumenti di mappatura MapQuest.

Se stai cercando un approccio leggermente diverso alla creazione di mappe, Kartograph è interessante perché è stato creato pensando alle esigenze di designer e giornalisti di dati.

Stile delle tue mappe

Tutti questi framework offrono un modo per personalizzare lo stile e l'aspetto delle tue mappe. MapBox e CartoDB offrono uno stile utilizzando CSS o una variazione di CSS.

Sul fronte di Google, la versione 3 dell'API di Google Maps ha introdotto mappe con uno stile personalizzato. Ciò ha finalmente consentito agli sviluppatori, in particolare ai designer, di avere più spazio per personalizzare il design predefinito di Google Maps visto ovunque e renderlo più in linea con il tema visivo generale di un sito web. All'interno della ricca community di Google Maps, sono nate alcune risorse di stile. Il più notevole è Snazzy Maps, una comunità di persone che creano stili personalizzati per Google Maps e li condividono gratuitamente.

Se hai deciso di utilizzare OpenLayers o Leaflet, sei limitato ai riquadri mappa pre-renderizzati. Fortunatamente, c'è una gamma diversa di tessere mappa tra cui scegliere, da Google, Nokia, Bing o tessere OSM predefinite, a quelle create appositamente dai designer, come Stamen. Per avere un'idea del numero di riquadri della mappa disponibili o di come appaiono l'uno rispetto all'altro, visita i siti Streetmap Smackdown o Map Compare.

Il futuro delle mappe web e degli strumenti di mappatura

Il futuro del mondo della mappatura sembra interessante. Ecco alcune tecnologie emergenti che sarebbero sembrate fantascienza solo pochi anni fa:

Solo vettore - L'utilizzo di mappe vettoriali invece di immagini raster con D3.js offre un nuovo mondo di funzionalità che non sono possibili utilizzando framework standard. Anche MapBox si sta muovendo in questa direzione, con MapBox GL, basato su OpenGL.
3D - Il terreno e gli edifici tridimensionali ora vengono visualizzati nelle mappe e le navi OpenLayers v3 con supporto integrato per Cesium.
GIS e analisi spaziale nel browser web - Già possibile utilizzando Turf. Turf è una libreria JavaScript che supporta operazioni spaziali e statistiche, classificazione dei dati e creazione di dati GeoJSON, il tutto all'interno del browser.

Incartare

Ognuno dei migliori strumenti di mappatura online elencati qui ha i suoi punti di forza e di debolezza. Ad esempio, gli esempi di codice mostrano la semplicità dell'utilizzo di Leaflet, rispetto alla complessità offerta da OpenLayers. Ma Leaflet non risolverà i tuoi complessi problemi spaziali dove lo farà OpenLayers. La scelta dipende da quali sono le tue esigenze.

Riassumere:

Google Maps - Soluzione di mappatura ben arrotondata e consolidata, in particolare per i non sviluppatori per ottenere una mappa di base sul Web, insieme a tutti i poteri per cui Google è (in)famoso.
OpenLayers - Per situazioni in cui altri framework di mappatura non possono risolvere i tuoi problemi di analisi spaziale.
Volantino - Attualmente, è facilmente il miglior framework di mappatura per scopi di mappatura generale, specialmente se non hai bisogno dei servizi aggiuntivi forniti da MapBox o CartoDB.
MapBox - Soluzione di mappatura in rapida crescita e in evoluzione del mercato per quando si desidera un maggiore controllo sullo stile delle mappe o si ha bisogno di servizi che altri non forniscono, come immagini satellitari dettagliate, geocodifica o indicazioni stradali.
CartoDB - Se hai set di dati pesanti, archiviati in diversi formati di dati, non cercare oltre.

Ulteriori letture sul blog di Toptal Engineering:

Servi i cluster di mappe 50 volte più velocemente utilizzando una cache più intelligente