Sondaj al celor mai bune instrumente de cartografiere online pentru dezvoltatorii web: foaia de parcurs către foile de parcurs

Nu există nimic ca o hartă bună și utilă.

Astăzi, folosirea hărților online este un proces ușor și captivant. Realizarea propriilor hărți online nu mai este o afacere mare; avem la dispoziție o gamă largă de instrumente de cartografiere online disponibile, de la gratuite și simple, la caracteristici bogate și complexe de utilizat. Pentru dezvoltatorii web care nu sunt familiarizați cu maparea web, agonia alegerii ar putea fi intimidantă. Vrei să faci hărți, dar nu știi de unde să începi și nici ce instrumente să folosești. Sunt aici pentru a vă ajuta cu această listă cu cele mai bune instrumente de cartografiere.

Un pic de istorie

De la început, tehnologia a influențat realizarea hărților și modul în care sunt utilizate hărțile. Pe măsură ce tehnologia a progresat, cartografia și procesele de creare a hărților au evoluat odată cu ea, de la hărți desenate manual pe papirus la hărți interactive de pe web.

A doua jumătate a secolului al XX-lea a fost un punct de cotitură pentru cartografie. Calculatoarele au devenit un instrument de alegere. Fotografiile aeriene, imaginile prin satelit și teledetecția au schimbat modul în care sunt colectate datele spațiale. S-au născut Sistemele Informaționale Geografice (GIS). În cele din urmă, hărțile GIS au început să se deplaseze de pe desktop pe web, iar marii furnizori de GIS au început să creeze primele cadre pentru hărți online.

Dar cartografierea GIS nu este ușoară. Necesită multe tehnologii pe partea de server, standarde geospațiale și protocoale, împreună cu implementările acestora. Este nevoie de înțelegerea datelor geospațiale și a proiecțiilor hărților, cunoașterea modului de adunare a datelor, a modului de afișare a datelor, a culorilor de utilizat, a modului de generalizare a datelor la scări specifice, a modului de plasare a etichetelor pe hartă, a modului de a configura un server care va servi hărțile, cum se utilizează o bază de date spațială și așa mai departe. GIS este plin de abrevieri, precum WMS, WFS, EPSG, CRS, SLD, GML, TMS, doar pentru a numi câteva, iar pentru a le cunoaște și înțelege, trebuie să citiți cărți, lucrări academice și articole.

Evoluția cartografierii online

Primele hărți web prezentau de obicei doar o singură imagine a hărții, foarte mică. La acel moment, deplasarea a fost implementată prin deplasarea cu un pas, de obicei cu jumătate din dimensiunea hărții, într-una dintre cele opt direcții posibile ale busolei - N, NV, V, SW, S, SE, E, NE. După ce utilizatorul a făcut clic pe butonul Pan sau zoom, o imagine complet nouă ar trebui să fie redată pe serverul de hărți, încărcată în rețea și apoi procesată de browser. Din cauza constrângerilor tehnologiei, hărțile au ocupat doar o parte foarte mică din întreaga pagină web. Pentru a obține o interacțiune mai bună, hărțile timpurii necesitau pluginuri precum Flash sau pluginuri de proprietate bazate pe Java sau chiar ActiveX, care funcționau doar în Internet Explorer.

Google a dat peste cap lumea cartografice când a introdus Google Maps în 2005. Printre inovațiile sale, Google a introdus panoarea continuă prin glisare. Soluția lor a fost să afișeze o hartă tăiată în mai multe imagini pătrate mai mici numite „plăci”. Aceste plăci au fost redate și difuzate de pe un „server de plăci de hartă” și au, de obicei, 256 x 256 pixeli. Mărirea și deplasarea acum necesită doar încărcarea unor noi dale de hartă în loc să reîncărcați întreaga pagină web. Rezultatul a fost o hartă vizibilă mai mare care acoperea mai mult de jumătate din fereastra browserului și a oferit o experiență simplă pentru explorarea hărții. Datorită capacității de „alunecare” a hărții cu funcțiile de zoom și panoramă fluide, aceste noi hărți au fost numite „hărți alunecoase”. Google a permis, de asemenea, crearea de scripturi, astfel încât utilizatorii să poată pune hărțile Google pe propriile lor site-uri web și să-și adauge propriile date pe hartă. Acest lucru a dus la inventarea unui alt termen nou: „Mash-up-uri de hărți”.

Brusc, hărțile online devin populare; pentru a adăuga o hartă frumos pe site-ul dvs. web, nu mai trebuie să fiți cartograf sau specialist GIS. În aripile mișcării „Web 2.0” și construind tehnologii moderne precum HTML5, CSS3 și SVG, care permit crearea ușoară de conținut interactiv, hărțile interactive trăiesc acum o nouă renaștere.

Date de hartă

După cum sa menționat anterior, hărțile online timpurii s-au bazat pe seturi de date GIS și bazele lor de geodate spațiale. Nu mulți oameni au avut acces la acele date, ca să nu mai vorbim de prețul lor. Google și seturile de date ale proiectului OpenStreetMap (OSM) au schimbat asta. Baza de date Google este privată și vine cu restricții, în timp ce OSM a fost inspirată de conceptul Wikipedia, ca un proiect de colaborare pentru a crea o hartă gratuită a lumii. OpenStreetMap este construit de o comunitate de cartografi voluntari, care contribuie la și mențin datele spațiale.

Pe scurt, cea mai mare revoluție care a contribuit la crearea ușoară a hărților astăzi este că problema legată de întreținerea unui server de hărți și a bazei de date spațiale a fost eliminată.

Alegerea unui cadru de cartografiere web

Deci, cu toate opțiunile, cum alegem instrumentul de cartografiere online potrivit? Pe de o parte, există furnizori comerciali de hărți online precum Google, MapQuest, Microsoft și Nokia. Aceste servicii oferă plăci de hărți și API-uri JavaScript pentru a le vizualiza și a interacționa cu o hartă. Pe de altă parte, există proiecte de cartografiere open source care oferă o încărcare ușoară a hărților bazate pe OpenStreetMap. Acestea includ OpenLayers și Leaflet. Și apoi există proiecte precum MapBox și CartoDB, care își bazează modelele de afaceri pe bibliotecile open source și datele OSM și oferă valoare adăugată, dar nu sunt gratuite.

Să aruncăm o privire la câteva exemple din fiecare dintre aceste categorii. Aici, voi discuta câteva dintre aceste instrumente de cartografiere online, oferind o scurtă prezentare generală a fiecăruia, împreună cu exemple de cod și cântărind argumentele pro și contra. De asemenea, am scris un tutorial de cartografiere D3.js pe care l-ați putea găsi interesant ca citire separată.

Hărți Google

Să începem cu cea mai evidentă alegere, Google Maps. Prima versiune a API-ului Google Maps a fost introdusă în februarie 2005, iar actuala API Google Maps v3 în iunie 2009. API-ul Google Maps nu este doar punctul final al API-ului JavaScript; include mai multe proiecte și oferă mai multe modalități diferite de a încorpora Google Maps în pagini web cu personalizare extinsă.

API-urile Google Maps disponibile în prezent includ:

• Google Maps Javascript API
• API-ul Google Static Maps
• API-ul Google Maps Embed
• Google Maps SDK pentru iOS
• Google Maps Android API v2

Pentru a vă ajuta să alegeți API-ul potrivit, Google a dezvoltat un selector API.

Este de remarcat faptul că, deși API-urile de bază sunt gratuite, există unele limitări impuse. Prima este că hărțile trebuie să fie liber și public accesibile pentru utilizatorii finali. În al doilea rând, sunt limitările de utilizare: serviciul este gratuit atâta timp cât site-ul dvs. nu generează mai mult de 25.000 de hărți în fiecare zi, în orice perioadă de 90 de zile. Dacă aveți nevoie de scări mai mari sau doriți o hartă privată sau dacă gestionați un site web de întreprindere sau comercial, ar trebui să vă gândiți să plătiți pentru Google Maps API for Work.

Implementarea

Iată un exemplu despre cum să implementați o hartă Google simplă în cod. Acesta arată cum să creați o hartă simplă folosind API-ul, să plasați un marcator pe hartă și să deschideți o fereastră pop-up cu un clic de 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>

Harta rezultată arată astfel:

Pro

• Dezvoltat și întreținut de Google.
• O mulțime de API-uri diferite pentru includerea unei hărți în site-ul sau în aplicația dvs.
• Comunitate mare de utilizatori.
• Documentație API foarte bună, cu o mulțime de exemple.

Contra

• Suntem siguri că nu vom vedea adaosuri la un moment dat?
• Toată lumea îl folosește; toate hărțile (în mare parte) arată la fel.
• API închis și adecvat.
• Nu există pluginuri în afară de cele dezvoltate oficial de Google.
• Prețuri neclare pentru Google Maps for Work.

OpenLayers

OpenLayers a fost dezvoltat de MetaCarta ca un echivalent open source cu Google Maps, iar prima versiune a fost publicată în iunie 2006. OpenLayers este un instrument de cartografiere onling care implementează un API JavaScript pentru construirea de aplicații geografice bogate bazate pe web, cu un API similar cu API-ul Google Maps. OpenLayers a câștigat multă tracțiune foarte rapid, iar dezvoltarea la început a fost rapidă. OpenLayers 2 a fost lansat la doar două luni după versiunea 1, în august 2006. Biblioteca era în continuă dezvoltare, iar noi versiuni cu noi caracteristici erau adăugate constant. Dezavantajul acestui progres rapid a fost faptul că biblioteca versiunea 2 a devenit foarte mare și greoaie, ajungând în cele din urmă la 1MB și conținând peste 100.000 de linii de cod! Deși a venit cu o mulțime de funcții, nu toate au fost necesare pentru utilizatorii obișnuiți.

Acesta a fost motivul principal pentru o rescrie cuprinzătoare a bibliotecii sale. Scopul a fost să vizeze cele mai recente funcții HTML5 și CSS3, cu aceeași funcționalitate din OpenLayers 2, cum ar fi suport pentru proiecții, protocoale standard și funcționalitate de editare. Accentul principal a fost pe îmbunătățirea performanței, versiuni mai ușoare, componente vizuale mai frumoase și un API mai bun. Acest OpenLayers 3 mult îmbunătățit a fost publicat în august 2014.

Implementarea

Să vedem cum este aceeași hartă ca în exemplul anterior, de data aceasta folosind 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>

Si rezultatul:

Pro

• Gratuit și open source.
• Bibliotecă plină de caracteristici pentru nevoile dvs. de cartografiere.
• O mulțime de exemple.
• Suport pentru o serie de tipuri de date și standarde GIS.
• Suport încorporat pentru proiecțiile hărților și funcțiile de editare.

Contra

• Versiunea 3 este încă în dezvoltare, iar API-ul încă se schimbă cu fiecare lansare punctuală.
• Sintaxă API complicată.
• Documentația versiunii 3 nu este în prezent atât de detaliată pe cât ar putea fi.

pliant

Este sigur să spunem că Leaflet s-a născut ca o reacție la balonarea, dezordinea și complexitatea OpenLayers. Vladimir Agafonkin a fost rugat să construiască un wrapper în jurul OpenLayers, dar el a creat în schimb o alternativă OpenLayers simplă și ușoară, iar în mai 2011 s-a născut Leaflet. Vladimir sa concentrat pe simplitate, performanță și utilizare pentru acest instrument de hartă online. Biblioteca de bază are doar funcționalitate de bază, ceea ce este suficient pentru majoritatea cazurilor de utilizare din viața reală. Totuși, Leaflet poate fi extins cu o cantitate imensă de plugin-uri care sunt ușor de dezvoltat și de adăugat în partea de sus a bibliotecii de bază. În plus, Leaflet a fost dezvoltat de la zero, având în vedere suportul mobil.

Leaflet este ușor de utilizat și are un API bine documentat, împreună cu cod sursă simplu disponibil pe GitHub. Ca urmare a concentrării pe performanță, utilizare, simplitate, dimensiuni reduse și suport mobil, este semnificativ mai puțin complicat decât OpenLayers.

Viitorul Leaflet pare interesant, de asemenea. Potrivit lui Vladimir, el plănuiește ca următoarea versiune majoră să fie și mai simplă, îmbunătățind în continuare performanța și modernizarea infrastructurii pluginului.

Implementarea

Iată din nou aceeași hartă ca înainte, implementată de data aceasta folosind 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> 

Pro

• Gratuit și open source.
• Mic și rapid.
• Sintaxă API simplă și ușoară.
• Compatibil cu dispozitivele mobile.
• Bun pentru a obține o hartă online rapid și ușor.
• O mulțime de exemple cu o documentație foarte bună.

Contra

• Lipsa funcționalității avansate.

MapBox

Un startup numit MapBox încearcă să revoluționeze piața cartografică online, cu scopul de a construi hărți online mai arătatoare și mai versatile. API-ul JavaScript MapBox folosește Leaflet și este scris ca un plugin Leaflet. Acesta extinde funcționalitatea Leaflet și se integrează cu alte servicii web MapBox, inclusiv găzduire MapBox pentru hărți și seturi de date personalizate create de utilizator. Pe lângă API-ul JavaScript, MapBox include următoarele servicii conectate:

• SDK-uri mobile pentru iOS și Android.
• Un set de hărți pre-proiectate.
• Hărți statice care pot fi afișate fără a fi nevoie de o bibliotecă de cartografiere.
• Un serviciu de GeoCoding.
• Un serviciu de Direcții.

MapBox oferă nu numai serviciul său de cartografiere, ci și acces la date, inclusiv imagini prin satelit achiziționate în mod privat, date deschise de la NASA și date despre lume conduse de comunitate de la OpenStreetMap. Stilul datelor se face folosind CartoCSS, un format de stil creat de MapBox, bazat pe CSS și cadrul de stil LESS. Deși serviciul MapBox oferă un nivel gratuit, acesta este limitat în lățime de bandă și stocare, iar pentru orice utilizare serioasă serviciul trebuie plătit.

Multe companii mari au recunoscut beneficiile pe care le oferă MapBox și le folosesc pe propriile lor site-uri. Printre acestea se numără Foursquare, Evernote, Pinterest, The Financial Times, GitHub și Etsy, pentru a numi câteva.

CartoCSS

Iată un exemplu de hartă MapBox elegantă folosind un stil numit Pirates , creat de designerii MapBox. Deoarece MapBox rulează peste Leaflet, codul pentru a încorpora acest lucru în pagina dvs. web ar fi similar cu exemplul Leaflet de mai sus:

După cum s-a menționat mai sus, CartoCSS este folosit pentru a stila dale vectoriale în MapBox. Acest lucru se face folosind MapBox Studio, care este, de asemenea, open source. Cu MapBox Studio, este posibil să vă creați propriile stiluri de hărți de la zero sau să schimbați și să extindeți stilurile existente create de alți designeri. Odată ce harta dvs. personalizată este încărcată în contul dvs. MapBox, o puteți încorpora pe site-ul dvs. folosind API-ul MapBox.

Următorul este un exemplu de CartoCSS folosit pentru a obține stratul de bază 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; } } }

Arrgh, amice!

Aruncă o privire la câteva dintre celelalte stiluri MapBox preproiectate aici.

Pro

• Extinde prospectul.
• Depozit mare de imagini din satelit detaliate și fără nori.
• Date detaliate despre teren.
• O mulțime de servicii conectate.
• Hărți frumos proiectate din cutie.
• Interfață grafică pentru stilarea și personalizarea hărților existente.

Contra

• Bunătățile nu sunt gratuite.
• Prețul se bazează mai mult pe trafic decât pe funcții.

CartoDB

Pentru vizualizarea și analizarea datelor geospațiale mai complexe, CartoDB este unul dintre cele mai bune instrumente disponibile. Este un serviciu cloud care stochează date geografice într-o bază de date activată spațial în cloud numită PostGIS, oferind instrumente pentru a accesa datele, a le analiza folosind puterile spațiale și de localizare geografică ale PostGIS și pentru a le afișa folosind Leaflet.

CartoDB a fost creat ca urmare a lipsei de alternative pentru vizualizarea și stocarea ușoară a datelor geospațiale. În consecință, CartoDB poate fi considerat o alternativă la Fusion Tables de la Google. Utilizatorii pot importa seturi de date în diferite formate, inclusiv tabele CSV, KML sau Excel și le pot suprapune peste hărți din surse comune, cum ar fi Google, Here (Nokia) sau OpenStreetMap. Deoarece toate geodatele sunt stocate într-o bază de date reală, datele pot fi accesate și interogate cu SQL și apoi modelate cu CSS.

Serviciul CartoDB este oferit ca „freemium;” utilizatorii care își lasă datele deschise publicului își pot găzdui proiectele pe site-ul web CartoDB gratuit. Pentru a stoca date private, a importa mai mult de 5 MB de date sau a utiliza mai mult de cinci tabele, utilizatorii trebuie să se aboneze la un plan premium.

GeoJSON

CartoDB este un instrument pentru vizualizarea datelor, deci este folosit puțin diferit față de celelalte exemple de instrumente de cartografiere online. Harta dvs. CartoDB va vizualiza automat orice date care au coordonate georeferențiate pe hartă. Așadar, putem afișa o etichetă pentru Zagreb prin simpla adăugare la baza noastră de date PostGIS. Iată un exemplu formatat în 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" } } ] } 

Cu toate acestea, pentru a înțelege cu adevărat de ce este capabil CartoDB, aruncați o privire în galeria lor.

Pro

• Excelent pentru gestionarea și stocarea datelor geospațiale.
• Acceptă o mulțime de formate de date și seturi mari de date.
• Bazat pe produse open source dovedite, cum ar fi Leaflet și PostGIS.
• Model Freemium.

Contra

• Nu este gratis.
• Prețul se bazează pe dimensiunea datelor stocate, care poate deveni costisitoare dacă sunt utilizate seturi de date foarte mari.

Alte opțiuni pentru dezvoltatorii web

Acestea sunt cele mai populare cadre de cartografiere disponibile în prezent, dar există și alte opțiuni mai puțin cunoscute în sălbăticie. Dacă sunteți legat de ecosistemul Microsoft, aceștia oferă un API similar cu Google Maps numit API Bing Maps.

Și, nu putem trece fără a menționa un dinozaur în lumea cartografierii online, MapQuest. Este încă în jur și oferă instrumente de cartografiere MapQuest.

Dacă sunteți în căutarea unei abordări ușor diferite a hărților, Kartograph este interesant, deoarece a fost creat având în vedere nevoile designerilor și jurnaliştilor de date.

Stilizarea hărților dvs

Toate aceste cadre oferă o modalitate de a personaliza stilul și aspectul hărților dvs. MapBox și CartoDB oferă stiluri folosind CSS sau o variantă a CSS.

Pe partea Google, versiunea 3 a API-ului Google Maps a introdus hărți cu stil personalizat. Acest lucru a permis în cele din urmă dezvoltatorilor, în special designerilor, mai mult spațiu pentru a personaliza designul implicit Google Maps văzut peste tot și pentru a-l alinia mai mult cu tema vizuală generală a unui site web. În cadrul bogatei comunități Google Maps, s-au născut câteva resurse de stil. Cel mai notabil este Snazzy Maps, o comunitate de oameni care creează stiluri personalizate pentru Google Maps și le partajează gratuit.

Dacă ați decis să utilizați OpenLayers sau Leaflet, atunci sunteți limitat la plăcile de hărți prestate în prealabil. Din fericire, există o gamă diferită de plăci de hărți pentru a alege, de la plăci Google, Nokia, Bing sau OSM implicite, până la cele special create de designeri, precum Stamen. Pentru a vă simți cât de multe plăci de hărți disponibile există sau cum arată acestea una cu cealaltă, vizitați site-urile Streetmack Smackdown sau Map compar.

Viitorul hărților web și al instrumentelor de cartografiere

Viitorul lumii cartografice pare interesant. Iată câteva tehnologii emergente care ar fi arătat ca științifico-fantastică cu doar câțiva ani în urmă:

• Numai Vector - Utilizarea hărților vectoriale în loc de imagini raster cu D3.js aduce o nouă lume de caracteristici care nu sunt posibile folosind cadre standard. MapBox se mișcă și el în această direcție, cu MapBox GL, bazat pe OpenGL.
• 3D - Terenul și clădirile tridimensionale apar acum pe hărți, iar OpenLayers v3 este livrat cu suport încorporat pentru Cesium.
• GIS și analiză spațială în browser - Deja posibil folosind Turf. Turf este o bibliotecă JavaScript care acceptă operațiuni spațiale și statistice, clasificarea datelor și crearea de date GeoJSON, toate în browser.

Învelire

Fiecare dintre cele mai bune instrumente de cartografiere online enumerate aici are punctele sale forte și punctele slabe. De exemplu, exemplele de cod arată simplitatea utilizării Leaflet, față de complexitatea pe care OpenLayers o aduce. Dar Leaflet nu vă va rezolva problemele spațiale complexe acolo unde OpenLayers o va rezolva. Alegerea se rezumă la nevoile tale.

A rezuma:

• Hărți Google - Soluție de cartografiere bine rotunjită, bine stabilită, în special pentru non-dezvoltatori pentru a obține o hartă de bază pe web, împreună cu toate puterile pentru care Google este (in)famos.
• OpenLayers - Pentru situații în care alte cadre de cartografiere nu vă pot rezolva problemele de analiză spațială.
• Pliant - În prezent, cel mai bun cadru de cartografiere pentru scopuri generale de cartografiere, mai ales dacă nu aveți nevoie de serviciile suplimentare pe care le oferă MapBox sau CartoDB.
• MapBox - Soluție de cartografiere cu creștere rapidă și schimbare a pieței pentru atunci când doriți mai mult control asupra stilului hărții sau aveți nevoie de servicii pe care alții nu le oferă, cum ar fi imagini detaliate din satelit, geocodare sau direcții.
• CartoDB - Dacă aveți seturi de date grele, stocate în diferite formate de date, nu căutați mai departe.

Citiți suplimentare pe blogul Toptal Engineering:

• Serviți clustere de hărți de 50 de ori mai rapid, folosind o memorie cache mai inteligentă