Det er ingenting som et godt, nyttig kart.
I dag er bruk av online kart en enkel og engasjerende prosess. Å lage dine egne online kart er ikke et stort foretak lenger; Vi har til rådighet et bredt utvalg av tilgjengelige online kartleggingsverktøy, fra gratis og enkelt, til funksjonerrike og komplekse å bruke. Til webutviklere som ikke er kjent med nettkartlegging, kan valgets smerte være skremmende. Du vil lage kart, men vet ikke hvor du skal begynne eller hvilke verktøy du skal bruke. Jeg er her for å hjelpe deg med denne listen over de beste kartleggingsverktøyene.
Fra begynnelsen har teknologi hatt innflytelse på kartlaging og hvordan kart brukes. Etter hvert som teknologien utviklet seg, utviklet kartografiprosesser og kartprosesser seg med den, fra manuelt tegnede kart på papyrus til interaktive kart på nettet.
Kartlegging tidligere.
Andre halvdel av 1900-tallet var et vendepunkt for kartografi. Datamaskiner ble et valgverktøy. Flyfotografering, satellittbilder og fjernmåling endret måten romlige data samles på. Geografiske informasjonssystemer (GIS) ble født. Til slutt begynte GIS-kart å flytte fra skrivebordet til nettet, og store GIS-leverandører begynte å lage de første rammene for online kart.
Men GIS-kartlegging er ikke lett. Det krever mange serverteknologier, geospatiale standarder og protokoller, sammen med implementeringene. Det krever forståelse av geospatiale data og kartprojeksjoner, kunnskap om hvordan man samler inn data, hvordan man viser dataene, hvilke farger som skal brukes, hvordan man generaliserer dataene til spesifikke skalaer, hvordan man plasserer etiketter på kartet, hvordan man setter opp en server som skal tjene kartene, hvordan du bruker en romlig database, og så videre. GIS er full av forkortelser, for eksempel WMS, WFS, EPSG, CRS, SLD, GML, TMS, bare for å nevne noen, og for å kjenne og forstå dem, må du lese bøker, vitenskapelige artikler og artikler.
De første nettkartene viste vanligvis bare et enkelt, veldig lite kartbilde. På den tiden ble panorering implementert ved å flytte ett trinn, vanligvis med halvparten av kartstørrelsen, i en av åtte mulige kompassretninger - N, NW, W, SW, S, SE, E, NE. Etter at brukeren har klikket på panorering eller zoomknappen, må et helt nytt bilde gjengis på kartserveren, lastes over nettverket og deretter behandles av nettleseren. På grunn av begrensningene i teknologien okkuperte kart bare en veldig liten del av hele websiden. For å få bedre samhandling krevde tidlige kart plugins som Flash eller propriety plugins basert på Java, eller til og med ActiveX, som bare fungerte i Internet Explorer.
Google snudde kartverdenen på hodet da den introduserte Google Maps i 2005. Blant nyhetene introduserte Google kontinuerlig panorering ved å dra. Løsningen deres var å vise et kart skåret i mange mindre firkantede bilder kalt 'fliser'. Disse flisene ble gjengitt og servert fra en 'kartfliserver', og er vanligvis 256 x 256 piksler. Zooming og panorering krevde nå bare å laste inn nye kartfliser i stedet for å laste hele websiden på nytt. Resultatet var et større synlig kart som dekket mer enn halvparten av nettleservinduet, og tilbød en jevn opplevelse for å utforske kartet. På grunn av muligheten til å 'glide' kartet med jevn zooming og panorering, ble disse nye kartene kalt 'glatte kart'. Google tillot også skripting, slik at brukerne kunne legge Googles kart på sine egne nettsteder og legge til egne data på kartet. Dette resulterte i at et nytt nytt begrep ble laget: 'Map mash-ups.'
Plutselig blir kart på nett populært; for å legge til et flott kart på nettstedet ditt, trenger du ikke lenger å være kartograf eller GIS-spesialist. På vingene av 'Web 2.0' -bevegelsen, og bygger opp moderne teknologier som HTML5, CSS3 og SVG, som muliggjør enkel oppretting av interaktivt innhold, lever interaktive kart nå en ny renessanse.
Kartlegging i fremtiden?
Som nevnt tidligere var tidlige nettkart basert på sett med GIS-data og deres romlige geodatabaser . Ikke mange hadde tilgang til dataene, for ikke å nevne prislappen. Google og OpenStreetMap (OSM) prosjekt datasett endret det. Googles database er privat og følger med begrensninger , mens OSM ble inspirert av begrepet Wikipedia, som et samarbeidsprosjekt for å lage et gratis kart over verden. OpenStreetMap er bygget av et fellesskap av frivillige kartleggere, som bidrar til og vedlikeholder romlige data.
Kort sagt, den største revolusjonen som bidro til enkel kartproduksjon i dag, er at problemene knyttet til vedlikehold av en kartserver og den romlige databasen er fjernet.
Så, med alle alternativene, hvordan velger vi riktig online kartleggingsverktøy? På den ene siden er det kommersielle online-kartleverandører som Google, MapQuest, Microsoft og Nokia. Disse tjenestene tilbyr kartfliser og forsvarlige JavaScript-API-er for å se dem og samhandle med et kart. På den annen side er det kartleggingsprosjekter med åpen kildekode som tilbyr enkel lasting av OpenStreetMap-baserte kartfliser. Disse inkluderer OpenLayers og Leaflet. Og så er det prosjekter som MapBox og CartoDB, som baserer forretningsmodellene sine på open source-biblioteker og OSM-data, og gir merverdi, men er ikke gratis.
La oss se på noen eksempler fra hver av disse kategoriene. Her vil jeg diskutere flere av disse online kartleggingsverktøyene, gi en kort oversikt over hver, sammen med kodeeksempler, og veie fordeler og ulemper. Vi skrev også a Kartleggingsveiledning for D3.js som du kanskje synes er interessant som en separat lesing.
La oss starte med det mest åpenbare valget, Google Kart . Den første versjonen av Google Maps API ble introdusert i februar 2005, og den nåværende Google Maps API v3 i juni 2009. Google Maps API er ikke bare JavaScript API-endepunktet; det inkluderer flere prosjekter og tilbyr flere forskjellige måter å bygge inn Google Maps på websider med omfattende tilpasning.
Nåværende tilgjengelige Google Maps API-er inkluderer:
For å hjelpe deg med å velge riktig API utviklet Google en API-velger .
Det er verdt å merke seg at mens de grunnleggende API-ene er gratis, er det noen begrensninger pålagt. Den første er at kart må være fritt og offentlig tilgjengelig for sluttbrukere . For det andre er bruksbegrensninger: tjenesten er gratis så lenge nettstedet ditt ikke genererer mer enn 25.000 kartbelastninger hver dag, over en periode på 90 dager . Hvis du trenger større skalaer eller ønsker et privat kart, eller hvis du driver en bedrift eller et kommersielt nettsted, bør du vurdere å betale for Google Maps API for Work .
Gjennomføring
Her er et eksempel på hvordan du implementerer et enkelt Google-kart i kode. Den viser hvordan du lager et enkelt kart ved hjelp av API, plasserer en markør på kartet og åpner en popup med et museklikk.
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));
Det resulterende kartet ser slik ut:
Fordeler
Ulemper
OpenLayers ble utviklet av MetaCarta som en åpen kildekode som tilsvarer Google Maps, og den første versjonen ble publisert i juni 2006. OpenLayers er et onling kartleggingsverktøy som implementerer et JavaScript API for å bygge rike nettbaserte geografiske applikasjoner, med en API som ligner på Google Maps API. OpenLayers fikk mye trekkraft veldig raskt, og utviklingen i begynnelsen var rask. OpenLayers 2 ble utgitt bare to måneder etter versjon 1, i august 2006. Biblioteket var stadig under utvikling, og nye versjoner med nye funksjoner ble stadig lagt til. Ulempen med denne raske fremgangen var at versjon 2-biblioteket ble veldig stort og klumpete, og til slutt nådde 1 MB i størrelse og inneholdt over 100 000 linjer med kode! Selv om det kom med mange funksjoner, var ikke alle nødvendige av vanlige brukere.
Dette var hovedårsaken til en omfattende omskriving av biblioteket. Målet var å målrette mot de nyeste HTML5- og CSS3-funksjonene, med samme funksjonalitet fra OpenLayers 2, som støtte for projeksjoner, standardprotokoller og redigeringsfunksjonalitet. Hovedfokuset var på ytelsesforbedringer, lettere bygg, penere visuelle komponenter og bedre API. Dette mye forbedrede OpenLayers 3 ble publisert i august 2014.
Gjennomføring
La oss se hvor samme kart som i forrige eksempel, denne gangen ved hjelp av OpenLayers 3.
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' : ''; });
Og resultatet:
Fordeler
Ulemper
Det er trygt å si det Folder ble født som en reaksjon på OpenLayers 'oppblåsthet, rot og kompleksitet. Vladimir Agafonkin ble bedt om å bygge en innpakning rundt OpenLayers, men han opprettet i stedet et enkelt og lett OpenLayers-alternativ, og i mai 2011 ble Leaflet født. Vladimir fokuserte på enkelhet, ytelse og brukervennlighet for dette online kartverktøyet. Kjernebiblioteket har bare grunnleggende funksjonalitet, som er nok for de fleste brukssaker. Likevel kan Leaflet utvides med en enorm mengde plugins som er enkle å utvikle og legge til på toppen av kjernebiblioteket. I tillegg ble Leaflet utviklet fra bunnen av med tanke på mobilstøtte.
Leaflet er enkelt å bruke og har et veldokumentert API, sammen med enkel kildekode tilgjengelig på GitHub . Som et resultat av fokus på ytelse, brukervennlighet, enkelhet, liten størrelse og mobilstøtte, er det betydelig mindre komplisert enn OpenLayers.
Leaflets fremtid ser også interessant ut. I følge Vladimir planlegger han neste store utgivelse til være enda enklere , forbedre ytelsen ytterligere, og oppgradere plugin-infrastrukturen.
Gjennomføring
Her er det samme kartet som nok en gang, denne gangen implementert ved hjelp av Leaflet.
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);
Fordeler
Ulemper
En oppstart kalt MapBox prøver å revolusjonere den online kartografiske markedsplassen, med målet om å bygge bedre og mer allsidige kart på nettet. De MapBox JavaScript API bruker Leaflet, og er skrevet som et Leaflet-plugin. Den utvider Leaflet-funksjonaliteten, og integreres med andre MapBox webtjenester , inkludert MapBox-hosting for brukeropprettede tilpassede kart og datasett. I tillegg til JavaScript API inkluderer MapBox følgende tilkoblede tjenester:
MapBox tilbyr ikke bare kartleggingstjenesten, men også tilgang til dataene, inkludert private ervervede satellittbilder, åpne data fra NASA og samfunnsdrevne verdensdata fra OpenStreetMap. Datastyling gjøres ved hjelp av CartoCSS , et stilformat opprettet av MapBox, basert på CSS og LESS styling-rammeverket. Selv om MapBox-tjenesten tilbyr et gratis nivå, er den begrenset i båndbredde og lagring, og for alvorlig bruk må tjenesten betales for.
Mange store selskaper har anerkjent fordelene som MapBox gir, og bruker det på sine egne nettsteder. De inkluderer Foursquare, Evernote, Pinterest, The Financial Times, GitHub og Etsy, for å nevne noen.
CartoCSS
Her er et eksempel på et glatt MapBox-kart med en stil som heter Pirater , laget av MapBox designere. Siden MapBox kjører på toppen av Leaflet, vil koden for å legge inn dette på websiden din være lik Leaflet-eksemplet ovenfor:
Som nevnt ovenfor brukes CartoCSS til å style vektorfliser i MapBox. Dette gjøres ved hjelp av deres MapBox Studio , som også er åpen kilde . Med MapBox Studio er det mulig å lage dine egne kartstiler fra bunnen av, eller endre og utvide eksisterende stiler opprettet av andre designere. Når det egendefinerte kartet ditt er lastet opp til MapBox-kontoen din, kan du legge det inn på nettstedet ditt ved hjelp av MapBox API.
Følgende er et utvalg av CartoCSS som brukes til å få Pirater grunnlag:
@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, kompis!
Ta en titt på noen av de andre forhåndsdesignede MapBox-stilene her .
Fordeler
Ulemper
For mer komplisert geospatial datavisualisering og analyse, CartoDB er et av de beste verktøyene der ute. Det er en skytjeneste som lagrer geografiske data i en romlig aktivert database i skyen som kalles PostGIS , som gir verktøy for å få tilgang til dataene, analysere dem ved hjelp av romlige og geolokaliserende krefter i PostGIS, og vise dem ved hjelp av Leaflet.
CartoDB ble opprettet som et resultat av mangel på alternativer for enkel geospatial datavisualisering og lagring. Derfor kan CartoDB betraktes som et alternativ til Googles Fusion Tables . Brukere kan importere datasett i forskjellige formater, inkludert CSV-, KML- eller Excel-tabeller, og legge dem over kart fra vanlige kilder som Google, Her (Nokia) eller OpenStreetMap. Siden alle geodata er lagret i en ekte database, kan du få tilgang til og spørre om dataene med SQL, og deretter styles med CSS.
CartoDB-tjenesten tilbys som 'freemium;' brukere som lar dataene deres være åpne for publikum, kan være vert for prosjektene sine på CartoDB-nettstedet gratis. For å lagre private data, importere mer enn 5 MB data eller bruke mer enn fem tabeller, må brukerne abonnere på en premium plan .
GeoJSON
CartoDB er et verktøy for datavisualisering, så det brukes litt annerledes enn de andre online kartleggingsverktøyeksemplene. CartoDB-kartet ditt vil automatisk visualisere alle data som har georefererte koordinater på kartet. Så vi kan vise en etikett for Zagreb ved å legge den til i PostGIS-databasen. Her er et eksempel formatert i 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' } } ] }
Men for å virkelig få en følelse av hva CartoDB er i stand til, ta en titt deres galleri .
Fordeler
Ulemper
Dette er de mest populære kartleggingsrammene som er tilgjengelige for øyeblikket, men det er andre mindre kjente alternativer i naturen. Hvis du er knyttet til Microsofts økosystem, tilbyr de en API som ligner på Google Maps Bing Maps API .
Og vi kan ikke gå uten å nevne en dinosaur i den online kartleggingsverdenen, MapQuest. Det er fortsatt rundt og tilbyr MapQuest kartleggingsverktøy .
Hvis du leter etter en litt annen tilnærming til å lage kart, Kartograf er interessant fordi det ble laget med tanke på behovene til designere og datajournalister.
Alle disse rammene gir deg en måte å tilpasse stilen og utseendet på kartene dine. MapBox og CartoDB tilbyr styling ved hjelp av CSS eller en variant av CSS.
På Google-fronten ble versjon 3 av Google Maps API introdusert tilpassede kart . Dette tillot endelig utviklere, spesielt designere, mer rom for å tilpasse standard Google Maps-design sett overalt, og bringe det mer i tråd med et nettsteds overordnede visuelle tema. Innenfor det rike Google Maps-fellesskapet har noen få stylingsressurser blitt født. Det mest bemerkelsesverdige er Snazzy Maps , et fellesskap av mennesker som lager tilpassede stiler for Google Maps og deler dem gratis.
Hvis du bestemte deg for å gå med OpenLayers eller Leaflet, er du begrenset til forhåndsgjengitte kartfliser. Heldigvis er det et annet utvalg av kartfliser å velge, fra Google, Nokia, Bing eller standard OSM-fliser, til de som er spesielt laget av designere, for eksempel Stamen . For å få en følelse av hvor mange tilgjengelige kartbrikker som finnes, eller hvordan de ser ut i forhold til hverandre, besøk Streetmap Smackdown eller Kart sammenligne nettsteder.
Fremtiden for kartverden ser interessant ut. Her er noen nye teknologier som ville ha sett ut som science fiction for bare noen få år siden:
Hvert av de beste online kartleggingsverktøyene som er oppført her, har sine styrker og svakheter. For eksempel viser kodeeksemplene enkelheten med å bruke Leaflet, i motsetning til kompleksiteten som OpenLayers gir. Men Leaflet løser ikke dine komplekse romlige problemer der OpenLayers vil. Valget kommer ned til hva dine behov er.
Å oppsummere: