Slik laget vi #kommunebygger – del 2: kart, men uten terreng

Historien om et kart uten terreng, og en dose nyttige kartverktøy.

Dette er del 2 i serien «Slik laget vi #kommunebygger». Del 1 finner du her og del 3 finner du her

Helt fra den første ideen om #kommunebygger kom var kartet en helt sentral del.  Vi ville at leserne skulle klikke seg rundt for å markere kommuner og dermed “slå dem sammen”.Til det trengte vi et brukervennlig og enkelt basiskart.

Da vi laget Fjordkloden om hvor innvandrere bosetter seg, snekret vi et kommunekart ved hjelp av visualiseringsrammeverket D3. Men vi var ikke helt fornøyd med resultatet. Nettleseren bruker mye krefter på å bygge kartet – særlig på mobiltelefon – og det er vanskelig å navigere i. Vi måtte tilbake til nettkartets røtter.

Flis for flis

De fleste store kartnettsteder på nettet, slik som Google Maps og Bing, har tradisjonelt brukt kartfliser for å bygge og vise deg kart.

Verden blir delt opp i et utall små bilder som nettleseren setter sammen til et kart. På den måten laster du bare de bitene du trenger for å se akkurat ditt kartutsnitt. kartsammenlikning2Til kommunebyggeren vurderte vi kartlag fra både Google Maps, Statens kartverk, Mapbox og andre leverandører. Felles for dem alle var for mye detaljer i kartet og støy.

Vi trengte ikke veier, elver, stedsnavn og nasjonalparker. Vi trengte kun to ting: kommunegrenser og kommunenavn. Løsningen ble å designe kartet fra bunnen av selv.

Ja, til åpne data

På bord4# er vi selvsagt svært glade i åpne data. Og vi jubler hver gang Statens kartverk slipper et nytt datasett ut i offentligheten.

Et av de mest brukte på vårt bord er administrative grenser for Norge. Kommunegrensene du får fra kartverket har med sjøområder og det gjør Norge visuelt ugjenkjennelig. Vi fjernet derfor sjøområdene ved å «klippe» kartlag mot hverandre i vårt favoritt-kartverktøy QGIS slik Bjørn Sandvik så utmerket har forklart her.

Kartet ble også «simplifisert» dvs at grensene ble gjort mindre detaljert. Dette for å lette prosessen med å slå sammen kommuner senere.

Sveiv i gang flismølla

Kommunegrenser uten stylingNå trengte vi å bygge flisene som vårt kart skulle bestå av. Til det brukte vi verktøyet Tilemill fra skytjenesten Mapbox.

I Tilemill importerte vi Geojson-filen med kommunegrensene som to kartlag – først til grensene, så til kommunenavnene.

Det fine med Tilemill er at man selv kan endre stilene i kartene ved hjelp av noe som likner vanlig CSS, nemlig CartoCSS. Vi ville ha nøytrale og enkle kart, så det ikke var noen tvil om hva man så på. En gråfarge bak, tydelige grenser og kommunenavnet ble lagt på ved hjelp av CartoCSS.

Vi valgte også å skjule kommunenavn om du zoomet mye ut. Alternativet var et salig kaos av navn i kartet.

Her er CartoCSS-koden vi brukte som en Gist hos Github. Skjermbilde 2014-09-09 kl. 12.49.47

Det ferdige kartet lastet vi opp til Mapbox slik at vi kunne bruke det i #kommunebygger gjennom kartbiblioteket Leaflet JS.

Kart på kart

Ulempen med kartfliser er at de må genereres opp og ikke så enkelt kan endres.

Vi ønsket at leserne umiddelbart skulle se sin kommune markert i blått når de klikket på den. Derfor trengte vi et kartlag til i Leaflet – nå som rådata. Løsningen – trodde vi – skulle bli Geojson.

Vi hentet inn kommunegrensene i scriptet i nettleseren og tegnet opp grensene og fargela dem når brukeren klikket. Det gikk flott, men ikke på mobil. Geojson-filene kan bli nokså store, og mange store filer som skal lastes ned går sjelden bra på mobil. Særlig på Android-telefoner ble dette et problem.Vi måtte få ned filstørrelsen.

Hils på topojson. Laget av mannen bak det kjente visualiseringsrammeverket D3, Mike Bostock.  Det er et format for geografiske data som er svært komprimert og basert på såkalt topologi.

I motsetning til i vanlige geografiske dataformater som Geojson så er f.eks. kommunegrensen mellom to kommuner representert ved en enkelt linje og ikke to (en for hver kommune) i topojson.

Geojson-filen ble konvertert til topojson og konvertert tilbake til geojson i nettleseren. Selv om dette ble en ekstra konvertering gikk kartet nå kjappere på mobil.

På grensen

Et sentralt punkt i regelsettet for #kommunebygger var å hindre folk i å slå sammen kommuner som ikke grenset til hverandre.

For å finne ut hvilke nabokommuner alle kommunene i Norge har tok vi i bruk litt javascript.

Måten topojson-filen er bygget opp på gjør at den kan brukes for å finne ut hvilke polygoner (her kommuner) som deler grense og dermed er naboer. KommunegrenserVi startet med å hente ut de meste detaljerte kommunegrensene fra Statens kartverk. Denne gangen beholdt vi sjøområdene fordi vi også ville ha med kommuner som grenset til hverandre til sjøs.

Grensedataeene ble konvertert til topojson, og for å hente ut nabokommuner laget vi et node.js script.

Hele koden og rådataene finner du på denne Gist’en. 

Her vil sikkert karteksperter påpeke at vi kunne gjort samme jobben i geodatabasen PostGIS med et par smekre SQL-kommandoer, men vi fant topojson-metoden enklere.

Resultatet ble en CSV-fil som vi kunne laste opp til CartoDB, koble med andre data og bruke i #kommunebygger-applikasjonen for å sjekke at folk kun slo sammen kommuner som har felles grense.

Kommunesammenslåing i SQL

Storkommunene som leserne bygget og sendte inn ble lagret i CartoDB. For å gjøre det enklere å hente ut omrisset av den nye kommunen, ønsket vi å lagre en fiks ferdig storkommune som et geometri-objekt i CartoDB.

Vi trengte å «smelte sammen» to eller flere geometrier for kommuner til en storkommune. Det heter en «union» på geodatabasespråket. Omriss av kommuneneGeometriene for alle kommuner hadde vi allerede i CartoDB. I vår serverkode som tar imot en storkommune fra brukerens nettleser, laget vi derfor denne SQLen som vi kjørte når storkommunen ble lagret.

Den gjorde at vi hadde et omriss av den nye kommunen brukeren hadde laget. Fra denne genererte vi små bilder til topplister og vi hentet ut disse dataene som geojson når vi skulle vise fram en storkommune.

Siden vi hadde alle storkommunene som geometrier i CartoDB kunne vi også lage visualiseringer som denne der senterpunktet for alle storkommunene folk laget kunne visualiseres på et kart over tid. 

Verdien av en geodatabase

Skjermbilde 2014-09-09 kl. 13.54.24Nå har vi godt over 26.000 storkommuner i CartoDB og det gir oss store analysemuligheter.

Bildet viser et eksempel på en visualisering som viser hvilke kommuner som oftest opptrer sammen med Bergen i folkets storkommuner.  Mørkere farge betyr at flere har slått denne kommunen sammen med Bergen.

Med SQL-spørringer kan vi også finne de mest brukte kombinasjonen/geometriene som folk har laget i kartet vårt. Følg med på bt.no!

Flere bloggposter om #kommunebygger:

Del 1 «Tall til folket»

Del 3 «Viral folkeopplysning»