Anvender du Septima Widget, er der mange muligheder for at style de objekter, som kortet viser. I dette blogindlæg vil jeg komme med et par tips og tricks til, hvad du kan gøre for at opnå det rigtige visuelle udtryk i kortet - som passer præcis til din løsning og dine brugere.

Opsæt hvordan dine vektorobjekterne skal tegnes

Som du kan læse i dokumentationen af Septima Widget (som findes her), findes der mange indstillingsmuligheder for, hvordan et vektor-objekt skal tegnes - f.eks. opsætning af “fillcolor”, “strokecolor” osv. De enkelte style-parametre angives i konfigurationen under “features_style” på det lag, der indeholder de pågældende vektordata.

For at angive farver, kan du benytte formen “#FF0000”, “rgb(255,0,0)” eller “rgba(255,0,0,1)”. Jeg anbefaler at bruge “rgba”, da denne form giver mulighed for at styre gennemsigtigheden for hver farve med mindst muligt konfiguration.

For hver style-parameter kan du desuden angive en modsvarende style, der fremhæver objektet, når det er valgt. Det bruges f.eks. ved funktionen “info”, hvor du gerne vil have, at det valgte objekt fremhæves i kortet. For eksempel bruges “strokecolor_selected” til at angive en anden farve på linjen når objektet er valgt. For alle style-parametre kan du sætte en sådan tilsvarende “…_selected” parameter.

For flader benyttes “fillcolor” til udfyldningsfarven, “strokecolor” til linjefarven og “strokewidth” til linjetykkelsen. For linjer benyttes “strokecolor” og “strokewidth”, mens der for punkter oftest bruges “icon” til at angive hvilket ikon, der skal vises.

Ud over disse basale style-parametre, findes der en lang række andre muligheder, som jeg vil beskrive de vigtigste af i det følgende.

Brug foruddefinerede styles til dine objekter

For at gøre det nemmere at få en style på vektordata i Septima Widget, findes der en række foruddefinerede styles (herefter kaldet “namedstyles”), der kan bruges.

I skrivende stund findes disse namedstyles: “#000”, “#001”, “#002”, …, “#011” samt “#100, som kan bruges på både punkter, linjer og flader. Hver named style indeholder forskellige farver og ikoner, som herefter kan tilpasses ved at angive de style-parametre, som du ønsker at ændre, f.eks.:

"features_style": {
  "namedstyle": "#004",
  "strokecolor": "rgba(255,0,0,1)"
}

Hvis du ikke angiver nogen style, bruger Widget en default style, f.eks. et standard ikon. Denne løsning er valgt for at gøre det nemt hurtigt at få vist noget i kortet.

Tilsvarende er den namedstyle, der hedder “#100”, speciel når det gælder punkter. Mens alle andre namedstyles benytter PNG ikoner, så benytter “#100” sig af et SVG ikon. Det betyder at ikonet nemt kan skaleres uden at miste detaljerne og at farven kan ændres med “fillcolor”. Læs mere om SVG ikoner senere.

De namedstyles, der findes, indeholder også alle en alternativ farve som bruges når objektet er valgt ved f.eks. “Info”.

Brug stilart fra filer - dette gør det let at genbruge en stilart

Hvis den samme style bliver brugt i flere widgets, eller flere gange i samme widget, er det en fordel at have stylen liggende i sin egen fil. Herved skal du ikke vedligeholde de samme ting flere steder. For at bruge en fil, angives blot stien til filen, hvor stylen ligger. Det kunne f.eks. være:

"features_style": "https://septima.dk/widget/data/styles/test.json"

Filen indeholder kun det, der normalt skal angives i “features_style”. Filen skal ligge et sted, som alle kan se. Ligger filen på et andet domæne end den Widget, der vil benytte stylen, skal domænet tillade at data må hentes på tværs af domæner (kaldes CORS).

Brug de indbyggede symboler til at vise punktdata

Den simple måde at få vist en prik i kortet er ved at bruge et af de indbyggede symboler, som findes i Septima Widget. Vælg et af disse: “circle”, “square”, “triangle”, “star”, “cross” eller “x”. Symbolet kan farvelægges med “strokecolor” og “fillcolor”. Derudover kan størrelsen på symbolet tilpasses med “radius” som vist her:

"features_style": {
  "symbol": "circle",
  "radius": 12,
  "fillcolor": "rgba(255,255,255,1)",
  "strokecolor": "rgba(255,0,0,1)",
  "strokewidth": 3
}

Brug ikoner, hvis du vil have flere muligheder for at style punktdata

Hvis du vil mere end blot at bruge de simple symboler, kan “icon” benyttes. Et “icon” kan enten være et billede (typisk PNG) eller SVG. Det giver flere muligheder for at styre ikonets udseende.

For at benytte et PNG-ikon, skal ikonet være tilgængeligt via en URL. Det kan f.eks. være “https://widget.cdn.septima.dk/2.24.1/img/icons/map_marker_icons_29.png”. Det vigtige er, at ikonet er tilgængeligt via en URL som brugeren kan se i en browser.

Et ikon kan være udformet på mange måder. Ikonet i eksemplet ovenfor har form som en omvendt dråbe eller knappenål. Det betyder, at ikonet skal placeres sådan, at det er ikonets nederste spids, der angiver det valgte punkt i kortet. Det kalder vi for ikonets ankerpunkt. Ankerpunktet kan forskydes i x- og i y-retningen. Hvis du i stedet har et ikon, hvor ankerpunktet er placeret i ikonets øverste venstre hjørne, så skal ankerpunktet forskydes hertil. Dette gøres med “xOffset” og “yOffset” på denne måde:

"features_style": {
  "icon": "url/til/ikon.png",
  "xOffset": 0,
  "yOffset": 45
}

For ankerpunktet kan “xOffset” antage værdier mellem 0 og 1, hvor 0 er ved ikonets venstre kant, mens 1 er ved ikonets højre kant. Det betyder, at 0.5 angiver midten af ikonet.

For “yOffset” er det lidt anderledes: Her er værdien et antal pixels, som ikonet skal forskydes i y-retningen, hvor 0 angiver ikonets nederste kant og positive værdier angiver, hvor mange pixels ankerpunktet skal flyttes opad - her skal du altså kende ikonets størrelse i pixel. Du kan også anvende negative værdier, så ankerpunktet flyttes under ikonets nederste kant.

For PNG-ikoner, vises ikonet i den størrelse som PNG’en har. Er størrelsen 48x48 pixels, vises ikonet altså i denne størrelse i kortet. Det er muligt at skalere et ikon vha. “scale” parameteren, men hvis “scale” sættes til større end 1, vil du opleve, at ikonet bliver “grynet”.

Hvis du gerne vil have skarpe ikoner, selvom de er skaleret, så skal du bruge SVG i stedet for PNG. Forskellen er, at SVG-ikoner er defineret som vektorgrafik, dvs. at de kan skaleres frit uden at ændre form eller skarphed.

SVG-ikoner fungerer på mange måder ligesom PNG-ikoner, det vil sige, at de kan forskydes og skaleres på samme måde. Bemærk dog, at et SVG indeholder en default størrelse, som er angivet med width=”…“ og height=”…“. Det er denne størrelse ikonet vises med, hvis “scale” ikke er angivet.

Ved både PNG og SVG hentes ikonet fra en fil, som skal ligge offentligt på en webserver. Det er også muligt at have “inline” SVG: Det betyder, at ikonet er angivet direkt i konfigurationen. Se et eksempel på hvordan det kan gøres her.

Brug labels til at få vist tekst i kortet

Labels i kortet kan f.eks. bruges til at vise vejnavne langs en vej, stednavne i kortet og meget mere. Fælles for alle labels er, at informationen kommer fra de data, der findes i det pågældende objekt.

For at få labels på kortet, benyttes parameteren “text”. Her er det muligt at angive en “template” for hvad der skal vises. Læs mere om “templates” i dokumentationen. Det betyder, at en label kan indeholde værdier fra flere felter i data, og at den kan indeholde beregnede eller betingede informationer. For at vise værdien fra ét bestemt felt i data, kan “text” f.eks. se ud som her:

"features_style": {
  "namedstyle": "#000",
  "text": "<%= husnummer %>"
}

Det er selvfølgelig muligt at tilpasse tekststørrelse, font og meget mere på en label. For at få en label til at fremstå tydeligt, kan man f.eks. angive en outline på teksten med “textOutlinewidth” og “textOutlinecolor”. Herved kan en tekst fremstå tydelig på både på en lys - og en mørk baggrund, fx et almindeligt baggrundskort og et luftfoto.

En anden mulighed er, at placere et symbol eller ikon under teksten, så teksten skrives ovenpå ikonet, og dermed kommer til fremstå endnu tydeligere. Løsningen kan, i sagens natur, kun benyttes for ganske korte tekster, f.eks. husnumre eller andre korte tekst-betegnelser:

Brug datadrevet styling til at gøre dit kort dynamisk

Ud over labels, kan du i Widget også anvende de bagvedliggende data til at styre style for den enkelte feature. Det betyder, at du kan designe et dynamisk kort, der er afhængig af specifikke værdier i data.

En byggegrund kan f.eks. vises med en style, som er afhængig af om grunden er ledig, reserveret eller solgt, og en lokalplan kan vises med en farve og skravering, som angiver områdets anvendelse og planens status som forslag eller vedtaget.

I eksemplet herunder, angiver størrelsen af et symbol antallet af ansatte eller en anden numerisk værdi. Hvis mindre end 30, så skal radius være 5, ellers 12:

"radius": "<% if (antal_ansatte < 30) { print (5) } else { print (12) } %>"

En værdi i data, fx. antal afgange i timen, kan bruges direkte til at styre en linjetykkelse:

"strokewidth": "<%= afgange_i_timen %>"

Eller data kan indeholde en kolonne med den farve-værdi, som skal anvendes når objektet skal vises:

"fillcolor": "<% if (farve_kolonne) { print (farve_kolonne) } else { print ('rgba(255,255,255,1)') } %>"

Du kan også anvende det aktuelle zoom-niveau til at angive hvordan objekterne skal vises (zoom = 0 når brugeren er zoomet helt ud og ser hele landet):

"strokewidth": "<% if(_currentMap.zoom < 6) { print(1) } else { print(4) } %>"

Brug skravering til polygonlag

Flader kan udfyldes med farver, der kan være mere eller mindre gennemsigtige. Men Septima Widget har også mulighed for at tilføje forskellige former for skraveringer. Den “normale skravering” opnås ved at tilføje følgende:

"features_style": {
 "fillpattern": {
   "pattern": "hatch"
 }
}

Her angives et “fillpattern”, der indeholder forskellige parametre, der styrer udfyldningen.

Hvis “fillpattern” er angivet på “features_style”, ignoreres “fillcolor”. I stedet er det muligt at angive “fillcolor”, “strokecolor”, mv. på “fillpattern” og herved styre, hvordan udfyldningen skal være. Det kan f.eks. være sådan:

"features_style": {
 "namedstyle": "#011",
 "fillpattern": {
   "pattern": "hatch",
   "fillcolor": "rgba(237,76,76,0.2)",
   "strokecolor": "rgba(237,76,76,0.9)",
   "offset": 0,
   "size": 1,
   "spacing": 5,
   "angle": 60,
   "scale": 2
 }
}

Som du kan se, er det både muligt at angive vinkel, afstand, farve og udfyldningsfarve.

Den “skravering”, der hedder “hatch” er default og nok den, som de fleste vil bruge; der findes dog en række andre typer af skraveringer som illustreret herunder:

Anvend flere styles på samme lag

Alle eksemplerne ovenfor tager udgangspunkt i, at der er én style pr. lag. I Septima Widget er det dog også muligt at angive flere styles for hvert lag. Det betyder, at du kan f.eks. kan kombinere to forskellige skraveringer oven på hinanden. Det kunne være at der både skulle være “hatch” og “dot” skraveringer på de samme flader.

Det at have flere styles på samme lag, åbner en stor vifte af muligheder. Det kan benyttes til at have to symboler oven på hinanden som her:

"features_style": [{
 "namedstyle": "#000",
 "symbol": "circle",
 "radius": 18,
 "fillcolor": "rgba(0,0,0,0.3)"
},{
 "namedstyle": "#000",
 "symbol": "triangle",
 "radius": 13,
 "fillcolor": "rgba(255,255,255,1)"
}]

Brug alternativ geometri til at gøre det lettere for brugeren at forstå data

Widget kan tegne en alternativ geometri i kortet, dvs. en geometri, som tilføjer information, og gør det lettere for brugeren at forstå data. For en rute kan det f.eks. være et startpunkt og et slutpunktet. Andre eksempler er alle knudepunkter for en linje/polygon, en centroide eller interior point for en polygon, geometriens convex hull/envelope, eller en buffer om geometrien.

Måden det gøres på er ved at tilføje “geometryOptions” til din “features_style” som vist her:

"features_style": {
 "namedstyle": "#004",
 "geometryOptions": {
   "type": "buffer",
   "buffer": 250
 }
}

I eksemplet tillægges der en buffer på 250 meter til linjegeometrien fra data.

Se et andet eksempel her samt i dokumentationen

Afrunding

Dette var mit forsøg på at gennemgå nogle af de mange muligheder for styling af objekter, der er i Septima Widget.

Jeg håber, at mine tips kan være til nytte og inspiration for alle Jer, der bruger Widget i en kortløsning, hvor I ønsker at give brugeren en god oplevelse og forståelse af Jeres data.

Er der noget du savner - eller har du en god idé til nye muligheder i Widget, så kom meget gerne med forslag til os på Widgets’ GitHub side eller skriv direkte til mig.