Enkle kart for nettpublisering

Denne artikkelen har som må å gi ei enkel innføring i bruk av kart for nett. Den vil gå gjennom to verktøy, Google Mymaps og Datawrapper. Google Mymaps er bra for generell kartvisning med markørar, ruter og andre ting, mens Datawrapper er et bra verktøy for å vise data (feks. statistikk) i kart.

Google Mymaps

Google Mymaps er en litt anna variant av det velkjente google maps der fokuset er å la brukaren legge til sitt innhold i kartet. Du må ha en google konto for å bruke denne løysinga.

https://www.google.com/mymaps

Her er google sin guide for å lage kart:

https://support.google.com/mymaps/answer/3024454?hl=en&ref_topic=3024924

Utsnitt og karttype

Når du skal lage eit kart er det alltid viktig å tenke på kva ditt publikum kan om det aktuelle geografiske området. Hvis du skal lage eit kart med innhald frå ein annan del av verden til eit norsk publikum, kan det være lurt å velge et stort kartutsnitt som viser andre land i den delen av verden. Det er for at ditt publikum skal få nok geografiske referansar til å plassere innhaldet i verden. Hvis du derimot skal publisere kartinnhald frå Norge til eit norsk publikum kan du velge et nærmare utsnitt. Du bør fortsatt vurdere å ta med byar, kystlinjer, vegar eller andre markante geografiske strukturar i kartet for å gi publikum fleire visuelle referansar til innhaldet.

Sånn velger du kartutsnitt i Google Mymaps:

Først må du velge zoomnivå og kartutsnitt som er det du vil ha. Deretter kan du trykke på dei tre prikkane ved sidan av tittelen i kartet ditt og velge ‘Set default view’. For å sjekke at det ser bra ut kan du bruke Preview / Forhåndsvisning. Prøv gjerne å sjå på kartet ditt i ulike skjermstørrelsar.

Karttype

Du kan også velge karttype, altså kor sjølve kartet skal sjå ut. Nederst på kartmenyen er det et valg som heiter ‘base map’. Hvis du klikkar på det kan du velge mellom ulike akrttypar som vanleg kart, satelittbilde, terrengkart og en del andre typar. Velg et kart som framhevar innhaldet i ditt kart. Et kart som er altfor fargerikt eller har veldig mange andre markørar kan fort opplevast som visuell støy som hindrar brukaren i å lese din informasjon frå kartet.

Her er et kjapt lite kart eg lagde i timen. Det har litt innhald som eg har lagt inn.

Publisering av kartet

For å publisere kartet på på ei nettside må du få en embed kode, også kjent som en iframe. I Google Mymaps får du det ved å klikke på dei tre prikkane rett ved kart-tittelen (øverst) og så velge ‘Embed on my site’. Hvis du har norsk språk heiter det kanskje ‘Bygg inn på min nettside’. Da får du opp et pop-up vindu med en liten html kodesnutt som skal være markert blå. Klikk Ctrl + C (Win) eller Cmd + C (Mac) for å kopiere kodesnutten. Logg inn i ditt CMS system (feks WordPress eller Drupal) og lim inn kodesnutten på riktig måte. Hvis du brukar WordPress betyr det at du velger blokktypen ‘Custom HTML’ som er tilgjengeleg under blokkkategorien ‘Widgets’. Hvis du skal ha kartet på ei html side limen du inn kodesnutten som et vanleg html element.

For at kartet skal bli vist best mogleg på alle skjermstørrelsar anbefaler eg å endre en verdi i iframe koden for å styre breidde på elementet. Når du får iframe koden frå Google Mymaps har den som regel en fast breidde verdi på 640 pikslar som du kan sjå i iframe koden under:

<iframe src="https://www.google.com/maps/d/embed?mid=1z1oxRmikeX4BUhCZfBwDvKaEdpnUvgSY" width="640" height="480"></iframe>

Eg anbefalar å endre width=”640″ til width=”100%”. Da vil kartet endre størrelse og tilpasse seg breidden av resten av sida. Det er ikkje så viktig å endre høgde på kartet, emn hvis du vil gjere det er det heilt greit å bruke en pikselverdi. Etter eg har endra breidden vil altså heile kodesnutten sjå sånn ut:

<iframe src="https://www.google.com/maps/d/embed?mid=1z1oxRmikeX4BUhCZfBwDvKaEdpnUvgSY" width="100%" height="480"></iframe>

Dette er så klart iframe koden til mitt kart, så du må gjere endringa i koden til ditt kart.

Datakart med Datawrapper

Datawrapper er ei fint verktøy for å visualisere data på nett. Det har også bra funksjonar for å lage datakart. For å starte å lage eit kart kan du gå til denne sida:

https://app.datawrapper.de/create/map

Først litt om å vise data i kart. På startsida til datawrapper er det tre typar kart du kan bruke. Dei to første er datakart mens det siste lignar meir på det vi gjorde i google Mymaps, altså at du kan plassere markørar ol.

Land doesn’t vote. People do.

Det er greit å tenke litt gjennom kva datamaterialet ditt skal kommunisere før du velger Koroplet (engelsk Choropleth) eller Symbol map. Koroplet kart er estetisk sett fine kart, men dei har en del problem hvis du skal vise data som representerer befolkning. Fordi Koroplet kart viser administrative regionar (kommuner, fylker, land osv.) er det den geografiske størrelsen av kvar enkelt region som dominerer visninga. Dette samsvarer sjelden med kor ei område er befolka. For å vise data om befolkning er gjerne symbol map ett bedre valg. Ett bra eksempel på kor Koroplet kart kan være misvisande er Donald Trump sin bruk av et valgkart frå 2016 som han brukte for å påberope seg enorm støtte i den amerikanske befolkninga under slagordet ‘Try to impeach this’.

For det første har dette kartet en del feil, dva enkelte fylker er farga raudt (republikansk) sjølv om det var demokraten Hillar Clinton som vann desse fylka, men det er snakk mo nokre få fylke som ikkje endrar inntrykket av kartet i særleg stor grad. Det egenltege problemet med kartet er karttypen som viser landområde heller enn befolkning. Ei populær opåsummering av sånn bruk av koroplet kart er frasen ‘Land doesn’t vote. People do.’ Her er et kart frå Washington post som er meir likt symbol map kart typen, og som gir et bedre inntrykk av kor befolkninga stemte.

Når det er sagt så skal vi sette i gang med et eksempel der vi lagar et koroplet kart. Dette kartet er basert på datasettet vi gjekk gjennom i timen som viser snittpris i firitdsboligar i norske fylke. Dette kartet vil faktisk vise geografiske regionar og snittprisen for en bolig i desse regionane så da er koroplet kart et greit valg.

SSB statistikkbanken

I SSB sin statistikkbank kan du finne masse data som kan brukast i kart. Her er ei lenke til forsida til statistikkbanken:

https://www.ssb.no/statbank/

Og her er datasettet som skal brukast i dette koroplet kartet:

https://www.ssb.no/statbank/table/09332/

For å bruke SSB data i Datawrapper må du velge ei kart regionar i Datawrappersom passar til innhaldet i SSB tabellen du har valgt, meir om det seinare. I statistikkbanken må du velge kva variablar du vil ha med før du kan få en strukturert tabell. For dette datasettet kan vi velge ulike typar mpl på handel av fritidsbolig. For denne visninga vil eg ha:

  • Kjøpesum per omsetning (1000 kr)
  • 2020K4
  • Alle nye fylker, altså ikkje dei som har (-2019).

Det resulterer i denne tabellen:

03+30 Oslo og Viken2 874
34 Innlandet2 380
38 Vestfold og Telemark2 477
42 Agder2 424
11 Rogaland1 952
46 Vestland2 058
15 Møre og Romsdal1 376
50 Trøndelag – Trööndelage1 489
18 Nordland1 183
54 Troms og Finnmark – Romsa ja Finnmárku1 115

Det er en grei tabell, men ett problem er at ‘Oslo og Viken’ er ein region i statistikkbanken men ulike regionar i Datawrapper sin kartmal for norske fylker. Det går an å bruke same verdi for Oslo og Viken i kartet men da er det anbefalt å skrive en merknad om dette i kartet. Vi må også renske litt i tabellen over. Nummera fremst i regionnavna ønsker eg ikkje å ha med, og dei vil også hindre alfabetisk sortering på regionnavn som er nyttig for at tabellen skal samsvare med Datawrapper sin mal. Eg anbefaler å fikse dete i et regnark, feks Excel eller sheets.google.com. Fjern talla fremst i navnet, og så kan du markere heile tabellen og så velge ‘Sort A-Z’ som du finn over kolonna for regionnavn. Her er den sorterte tabellen uten nummer først i regionnavn.

Agder2 424
Innlandet2 380
Møre og Romsdal1 376
Nordland1 183
Oslo og Viken2 874
Rogaland1 952
Troms og Finnmark – Romsa ja Finnmárku1 115
Trøndelag – Trööndelage1 489
Vestfold og Telemark2 477
Vestland2 058

Denne tabellen vil neten samsvare med malen ‘Norway >> Coounties(2020)’ i Datawrapper. Forskjellen er som sagt at Oslo og Viken er en region hos SSB, men to regionar i Datawrapper. Hvis du vil gjere dette enkelt kan du kopiere kun kolonna med tallverdiar til høgre, men dobbeltsjekk at rekkefølga på regionane samsvarer med datawrapper. Lim inn (Ctr + V / Cmd + V) i høfre kolonne i datawrapper. Tast inn verdien for Oslo og Viken i Viken også. Du kan også trykke på ‘tannhjula’ i datawrapper for å velge region for å få riktig formatering på dataformat for norsk språk.

Trykk proceed.

Under neste steg i datawrapper (Visualize) kan du velge fargar, legge inn tittel, kilde (ssb), lenke til datakilde (url til datasettet). Du bør alltid legge til alternative description for at brukarar med synshemningar kan få en beskrivelse av kartet.

Tilpass tooltip

Tooltip er den lille bobla som dukkar opp når du bevegar peikaren over en region i kartet. I utgangspunktet er informasjonen i tootlip feks:

Agder

2424

Dette er ikkje veldig informativt for brukaren. Vardien frå datasettet er snittprisen i 1000 kr. Verdien for Agder er altså 2 424 000, også kjent som 2,42 mill kr. Du kan få datawrapper til å vise akkurat det i tooltipen med unntak av at eg ikkje harklart å få komma som desimaltegn som vi brukar på norsk. Det blir punktum som desimaltegn. Det er likavel bedre enn ‘Agder 2424’. Sånn kan du ordne det:

Du må være på ‘Annotate’ tabben i datawrapper. Nederst er det et valg for Customize tooltip, trykk på det. Da får du opp to boksar med to variabelnavn inne i krøleparantesar, id og value. id representerer i dette tilfellet navn på fylke mens value er tallverdien. Du kan legge til tekst rundt krølleparantesane for å gjere verdiane meir forståeleg for brukaren. Eg vil at den skal seie ‘Snittpris XX millionar kr.’

Eg må også gjere om verdien til en tallverdi som representerer millionar, ikkje tusenFor å få til dette må eg seie til datawrapper at tallverdien skal delast på tusen. For å få inn litt forklarande ord og en meir intuituv verdi kan du endre det i tekstboksen til det som står under.

Snittpris {{ value / 1000 }} mill kr.

Publisering

Du kan gjere fleire valg så eg oppfordrar til eksperimentering, men for denne artikkelen sin del er det på tide å publisere kartet avrunde. Trykk på proceed så kjem du til ‘Design’ tabben der du bla. kan velge innstillingar for norsk språk og om du skal ha deleknappar for SoMe. Tryk Proceed når du er klar til å publisere.

Når du skal publisere har du uliek valg. Du kan velge å laste ned kartet som ett bilde (PNG). Det kan fungerre bra hvis du ksla publisere det på SoMe der du gjerne ikkje får publisert interkative web-element.

Hvis du skal publisere på ei nettside (html/Wordpress/Drupal) må du først velge ‘Publish map’. Deretter må du kopiere embed koden. Sjekk at ‘responsive iframe’ er valgt sidan det vil gi et kart som tilpassar seg uliek skjermstørrelsar. Iframe koden bør ligne på dette:

<iframe title="Snittpris for fritidsboligar i Norge" aria-label="map" id="datawrapper-chart-bWfQV" src="https://datawrapper.dwcdn.net/bWfQV/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="903"></iframe><script type="text/javascript">!function(){"use strict";window.addEventListener("message",(function(a){if(void 0!==a.data["datawrapper-height"])for(var e in a.data["datawrapper-height"]){var t=document.getElementById("datawrapper-chart-"+e)||document.querySelector("iframe[src*='"+e+"']");t&&(t.style.height=a.data["datawrapper-height"][e]+"px")}}))}();
</script>

For å publisere dette i WordPress må du igjen velge blokktypen ‘Custom html’ og da blir resultatet som under