Fem tips til et bedre kart

cartodb_blogg2

Et godt kart kan opplyse leserne dine på en enkel og kjapp måte. Men det er lett for at kartet blir for detaljert, eller at viktig informasjon gjemmes vekk i popups.

På #bord4 er vi flittige brukere av CartoDB. Det spanske verktøyet lar deg enkelt lage kartvisualiseringer av datasett og regneark du har liggende.

Vi har laget mye rart i CartoDB, og her er noe av det vi har lært.

Punktene krever at du har laget et par kart i CartoDB før, og kjenner verktøyet grunnleggende.

1. Unngå å gjøre brukeren “scroll stuck”

Du har sikkert sett det selv. Du kommer til en artikkel der en kreativ journalist har laget et kart i Google eller CartoDB, og lagt det inn i artikkelen. Du scroller nedover på mobilen og plutselig sitter du fast i kartet. Du klarer ikke å scrolle deg ned til resten av artikkelen, men scroller vilt rundt i verden inne i kartet.

Skjermbilde 2015-12-14 kl. 14.58.43Du er “scroll stuck”.

Den enkleste løsningen på problemet er å legge til en marg på høyre og venstre side av kartet slik at brukeren får tak med tommelen og kan scrolle seg forbi.

Du gjør dette ved å legge til følgende style-kode i slutten av embed/iframe-koden du får fra CartoDB:

da blir embed-koden din seende for eksempel slik ut:

Da får du plass til tommelen ved siden av kartet og kan scrolle deg ned til resten av artikkelen.

Husk også at kartet ikke bør være mer enn ca 450 px høyt så det ikke dekker hele mobilskjermen. Det er godt å ha noe å ta tak i over/under kartet også.

2. Ikke stol på at brukeren klikker

Tekst i selve kartet kan ofte fungere bedre enn popup-bokser. Folk scroller gjerne forbi, men vår erfaring er at få klikker i kart. Vis den viktigste informasjonen uten at brukeren må klikke.

  • For å vise tekst ved et punkt eller et område i kartet kan du velge “Simple” under “Map Layer Wizard” (der du justerer fargene på punktene/områdene).
  • Så velger du feltet du vil vise som tekst i nedtrekksmenyen “Label text”. Der kan du også justere tekststørrelse og farge.

Vil du ha flere muligheter og ikke er redd for litt kode, så kan du kikke under fanen “CSS”. Der finner du stilsettet til teksten din. Mapbox har en god manual i hvordan du kan plassere teksten din på ulike måter.

Et tips er å legge til flere felter med tekst på samme geografiske punkt. Du kan for eksempel legge til navnet på stedet du viser og en verdi.

  • Først må du kopiere koden som viser stilen for tekstlaget ditt. Laget har et navn på formen #mittlag::labels
  • Legg kopien rett under koden for laget som allerede er der.
  • Så må du endre der det står ::labels og gi kopien et annet navn slik at CartoDB skjønner at du skal ha to tekstetiketter på hvert sted. Du kan gjerne gi originallaget et nytt navn også for å skille det ut.
  • Hvilken tabellkolonne du skal hente verdien fra skriver du mellom []-klammene ved attributten text-name
  • Du må også endre på verdien text-dy som angir hvor langt ned fra kartpunktet teksten skal stå. Dette er viktig slik at de to tekstene ikke står oppå hverandre.

Det kan se slik ut:

Skjermbilde 2015-12-14 kl. 15.19.11

3. Tilpass detaljene til kartutsnittet

Legger du mye tekst i kartet kan det bli rotete og uoversiktlig.

Derfor kan det være smart å tilpasse hva som vises i kartet ut fra hvilket kartutsnitt brukeren ser på.

CartoDB operer med ulike tall for zoom-nivået brukere har aktivert. Et lavt tall betyr at du ser mye av verden, et høyt tall betyr at brukeren har zoomet seg inn. Du ser tallet under zoom-knappene når du redigerer kartet i CartoDB.

Dersom vi for eksempel ønsker å skjule prosentandelen i bydelskartet dersom brukeren ser på hele Bergen, så kan vi gjøre det med følgende kode:

Denne koden sier at teksten med prosentandel ikke skal vises før brukeren har zoomet inn til et nivå tettere enn 10 – altså ganske tett inn på gatenivå.

Samme teknikk kan brukes for å gjøre symbolene større når du er tettere på (gjør det enklere å klikke). Her er markørene 10 px i diameter, og vokser til 15 pixler når brukeren zoomer inn.

4. Pimp my popup

Skjermbilde 2015-12-14 kl. 15.24.58Om du først skal legge info i en popup så legg litt arbeid i den. En redigert tekst fungerer ofte bedre enn en liste i CartoDBs standardoppsett.

  • Velg først å slå på alle feltene du skal bruke i popup-velgeren ( i bildet er andel_avrundet) slått på.
  • Klikk på kode-symbolet (rød sirkel på bildet)
  • Du får da opp et kodevindu der du kan redigere enkel html. Der du vil at verdiene dine skal stå setter du inn {{kretsnavn}}  – der navnet inne i klammene er navnet på feltet ditt. Da kan du lage en setning som ser f.eks. slik ut (markert i gult):

Teskten i din popup-boks kan da bli noe slikt som “Ap fikk 25 prosent av stemmene i Hellen valgkrets ved sist valg”

På den måten kan du også vise bilder i popup-boksen din. Dersom du har lagret bilde-urlene dine i feltet image_url i tabellen, kan du gjøre slik i koden til popup-boksen for å vise bildet.

<img src="{{image_url}}" width="100%" />

Pass på at bildet ikke er for stort til å vises på mobil. Maks 300px bredde er en god regel.

5. Slik takler du “flere punkter på et sted”-problemet (avansert)

Ofte har du datasett som har flere punkter på nøyaktig samme sted, for eksempel på samme gateadresse. Da blir det trøbbel om du skal la brukeren klikke på punktene. CartoDB lar deg bare klikke på det som ligger øverst. Og det er ikke lett å vite hvilket det er.

Bruk heatmap-funksjonen for å finne punkter som ligger oppå hverandre

Bruk heatmap-funksjonen for å finne punkter som ligger oppå hverandre

I dette kartet over kafeer i Bergen er det f.eks. flere kafeer skjult under samme punktet (Cafe Opus). Det ser vi ved å kikke på datatabellen der adressen er lik på to rader. Du kan også oppdage slike punkter ved å bruke heatmap-funksjonen. Da vil punkter som ligger oppå hverandre gi sterke farger.

En måte å løse det på er ved å manipulere koden som CartoDB bruker for å hente data fra tabellen din. Det du skal gjøre er å gruppere alle punktene på samme posisjon og så hente ut en tekst som lister ut alle kafeene på det stedet.

Skjermbilde 2015-12-14 kl. 16.00.35Nøkkelen her er funksjonen string_agg som tar alle kafénavnene og setter dem sammen til en infotekst med en tag for ny linje (<br>) mellom hvert navn. Hvis du nå velger at feltet infotekst skal vises i popup-boksen så vil den se slik ut når du klikker på stedet med flere kafeer: