Gör en stadsdelskarta med Fusion Tables

5 Maj

Det behöver inte vara svårt att göra en interaktiv stadsdelskarta. Med Google Fusion Tables kan du slänga ihop en på några minuter. Så här går det till.

Data

Målet här är att göra en karta som illustrerar inkomstskillnaderna mellan de olika stadsdelarna. Datan vi behöver finns att hämta ur Stockholms stads API. Med hjälp av funktionen importXML anropar vi API:et och får följande datatabell.

Över till Fusion Tables

När vi har den data vi behöver kan vi gå över till Fusion Tables genom att i Google Docs välja Create > More > Table (Beta). I rutan Import new table klickar du på Google Spreadsheet och väljer sedan den fil du nyss sparade.

I följande ruta måste du se till att kolumnrubrikerna kommer ligger rätt rad.

Slå ihop inkomstdatan med geodatan

För att kunna köra en karta av inkomstdatan måste den kopplas till ett område. Geodatan för stadsdelgränserna finns samlade i en färdig Fusion-tabell.

Importera stadsdelgränserna genom att välja Merge. I rutan Merge with: skriver du in url:en till tabellen med geodatan, det vill säga https://www.google.com/fusiontables/DataSource?docid=1P-fwJEi4TXC4li0_1OIJr-oB5N9L00N4ub7acGo.

Nästa viktiga steg är att välja vilka kolumner som ska matchas. I det här fallet väljer vi stadsdelarnas namn: txt_område och name. För att det inte ska bli en så stor tabell kan vi välja att bara importera kolumnen geometry, som innehåller själv geodatan.

Skapa kartan

Nu har vi alltså alla uppgifter vi behöver i en ny tabell och vi kan gå över till den roliga biten: att göra själva kartan.

Välj Visualize > Map och du borde få upp en karta där stadsdelarna är utritade, men alla i samma färg. För att färglägga dem enligt medelinkomst väljer du Configure styles. Under rubriken Polygons klickar du sen på Fill color och Gradient.

Här kan vi applicera en färgskala på kartan, men då måste vi först ange ett inom vilket intervall vi rör oss. Om vi går tillbaka till vårt kalkylblad i Google Docs kan vi se att den lägsta medelinkomsten är 174.060,90 kronor och den högsta 366.083,12. Sätt in de här värdena, eller värden i närheten, i rutorna From och Through och välj att hämta värden från kolumnen Medelinkomst.

Sista kryddan: interaktivitet

Kartan börjar nu se ganska bra ut, men vi vill också att det ska vara möjligt att klicka på stadsdelarna för att visa mera info. Välj Configure info window.

Här kan du antingen skriva in innehållet i inforutan manuellt som html eller välj i en lista vilka variabler som ska visas i rutan. Jag väljer här att under fliken Custom göra några små justeringar, till exempel sätta in kronor som enhet. Så här ser html-koden ut:

<div class=’googft-info-window’ style=’font-family: sans-serif’>
<b>Medelinkomst:</b> {medelinkomst} kronor
</div>

Slutresultatet

Så här är den färdiga kartan. Klar att till exempel bäddas in på en sajt nära dig.

Svårare än så här är det inte att göra en interaktiv karta.

Annonser

3 svar to “Gör en stadsdelskarta med Fusion Tables”

  1. Tim juni 17, 2013 den 20:51 #

    Hej!
    Bra förklarat, jag har letat efter precis något sånt här då jag håller på med ett projekt i skolan. Dock gäller det Sveriges kommuner istället för stadsdelar i Stockholmsområdet. Hur konstruerade du / var hittar man den färdiga Fusion-tabellen som användes i exemplet här?
    /Tim

Trackbacks/Pingbacks

  1. Kartmappning med Google Fusion Tables : Lotta Holmström - januari 24, 2013

    […] hur man gör en enkel karta med Google Fusion Tables. I alla fall lyckas jag inte hitta någon. Leo Wallentins inlägg om hur man gör en stadsdelskarta är bra men lite för specifikt. Googles hjälpsidor för Fusion Tables finns bara på […]

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s

%d bloggare gillar detta: