Lagvælger

Almindelig lagvælger med mulighed for at tilføje grupper m.m. Dette gør at brugeren kan tænde og slukke for de enkelte lag.

Signaturforklaring

For vektorlag vises der automatisk en signaturforklaring for hvert lag i lagvælgeren. Men hvis man gerne vil bruge et specielt ikon for et lag i lagvælgeren eller vil have signaturforklaring på f.eks. et WMS lag, så er det muligt at angive legendConfig på laget. Herved er det muligt at styre hvordan signaturforklaringen skal være. Det kan gøres på flere måder.

Ved at angive icon, som vist herunder, er det muligt at få vist et ikon sammen med lagets navn, der er angivet i name:

"legendConfig": {
  "icon": "https://septima.dk/widget/img/ortofoto.png"
}

Tilsvarende er det muligt at angive en inline SVG på denne måde:

"legendConfig": {
  "svg": "<svg width='32px' height='43px' viewBox='0 0 32 43' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>...</g></svg>"
}

Hvis man vil have fuld kontrol over hvad der skal være i lagvælgeren for dette lag, kan man tilføje html på denne måde:

"legendConfig": {
  "html": "<div class='my-layer-class'><div class='widget-layerswitch-text'>Lokalplaner</div></div>"
}

Hvis man i stedet vil have en egenlig signatur under teksten for laget, tilføjes følgende til konfigurationen til laget:

"legendConfig": {
  "img": "https://geoserver.plandata.dk/geoserver/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=theme_pdk_lokalplan_vedtaget_v"
}

En alternativ måde at få en mere komplekt signaturforklaringen på, er at angive legends som herunder:

"legendConfig": {
  "legends": [
    {
      "title": "< 1500",
      "svg": "<svg width='20px' height='20px' viewBox='0 0 28 28'><circle fill='rgba(248,252,246,0.9)' stroke='rgba(206,233,197,0.7)' stroke-width='0' cx='14' cy='14' r='7'></circle></svg>"
    },
    {
      "title": "1500 – 8500",
      "svg": "<svg width='20px' height='20px' viewBox='0 0 28 28'><circle fill='rgba(206,233,197,0.7)' stroke='rgba(139,197,130,0.7)' stroke-width='0' cx='14' cy='14' r='7'></circle></svg>"
    },
    {
      "title": "> 8500",
      "svg": "<svg width='20px' height='20px' viewBox='0 0 28 28'><circle fill='rgba(74,144,81,0.7)' stroke='rgba(25,67,23,0.7)' stroke-width='0' cx='14' cy='14' r='7'></circle></svg>"
    }
  ]
}

På hver legend er det muligt at angive title samt img, icon eller svg som i ovenstående. Det er også muligt blot at angive html, hvorved der er fuld kontrol over den enkelte legend.

Bemærk

For at få vist signaturen for vektorlag, skal laget indeholder features_type. Se hvilke typer det kan være under layer

Options

Herunder findes en beskrivelse af de enkelte egenskaber, der kan sættes på lagvælgeren.

disable

• Type: boolean
• Default: false

Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol.

detach

• Type: string

Angiv en reference til et alternativ html-element, som denne kontrol skal vises i. Det kan benyttes til at placere indholdet af en kontrol et andet sted på sin side. Hvis detach har værdien "abc", så skal der tlføjes et element til HTML'en på denne form: <div data-widget-detach="abc"/>. Hvis elementet ikke findes, så fungerer kontrollen, som hvis detach ikke var angivet.

css

• Type: string | string[]

Angiv en sti til en css-fil, der skal loades efter denne kontrol. Herved vil det være muligt at lave en brugertilpasset style af kontrollen.

className

• Type: string

Tilføj en speciel CSS class til elementet. Dette kan bruges til at styre hvordan elementet ser ud eller placeres på siden.

keepInFullscreen

• Type: boolean
• Default: false

Benyttes når funktionen er "detached" og funktionen "fullscreen" er inkluderet i konfigurationen. Hvis "keepInFullscreen" sættes til true, så er funktionen tilgængelig når kortet vises i fullscreen.

title

• Type: string

Gør elementet mere tilgængeligt

layers

• Type: string | string[]

Angiv, hvad der skal vises i lagvælgeren. Ved at angive "all" vises alle lag. Ved at angive "vectors" vises kun vektorlagene. Ved at angive "images" vises billedlagene (WMS og WMTS). Derudover er det muligt at angive et array af id'er på udvalgte lag. Dette kræver, at der er angivet et id på lagene. For at få vist to specifikke lag angives det på denne måde: ["lag1","lag2"].

excludeLayers

• Type: array

Fravælg hvilke lag, der ikke skal vises i lagvælgeren. Det muligt at angive et array af id'er på udvalgte lag, der ikke skal vises. Dette kræver, at der er angivet et id på lagene. For at ekskludere to specifikke lag angives det på denne måde: ["lag1","lag2"]. Dette er specielt hensigtmæssigt, hvis layers er sat til all.

showbuttons

• Type: boolean
• Default: true

Ved at sætte "showbuttons": false deaktiveres muligheden for at tænde og slukke for lagene.

showlegend

• Type: boolean
• Default: true

Ved at sætte "showlegend": false vises signaturen ikke for lagene.

showheader

• Type: boolean
• Default: false

Ved at sætte "showheader": true vises der en overskrift for lagvælgeren og det er muligt for brugeren at vise/skjule lagvælgeren ved at klikke på overskriften.

showheaderCollapsed

• Type: boolean
• Default: false

Kun når showheader er sat. Ved at sætte "showheaderCollapsed": true vises der en overskrift for lagvælgeren, som brugeren kan klikke på for at vise selve lagvælgeren.

showheaderCollapsedAccordion

• Type: boolean
• Default: false

Kun når showheader er sat. Ved at sætte "showheaderCollapsedAccordion": true fungerer en overskrift i lagvælgeren som en accordion. Det betyder at når brugeren klikke på overskriften, så foldes den ud og de andre overskrifter foldes sammen.

selectAll

• Type: boolean | string
• Default: false

Ved at sætte "selectAll": true vises der en knap, der gør det muligt at tænde/slukke for alle lag i lagkontrollen på en gang. Hvis man angiver en tekst, er det muligt at styre hvilken tekst, der skal vises. F.eks. "selectAll": "Vis/skjul alle lag"

type

• Type: string
• Default: list

Angiver, hvordan lagvælgeren skal vises. Gyldige værdier: "list" eller "dropdown". Ved list bliver lagvælgeren vist som en liste, hvor man kan klikke på de enkelte rækker i listen og herved vise/skjule det pågældende lag. Ved dropdown er listen skjult, og brugeren kan trykke på en "knap" for at få vist listen.

expand

• Type: string
• Default: up

Ved "type": "dropdown". Skal dropdown folde op eller ned. Gyldige værdier: "up" eller "down".

dropdownlimit

• Type: number
• Default: 3

Ved "type": "dropdown". Hvor mange lag må der højst blive vist, før der kun vises, hvor mange der er.

dropdowntext

• Type: string

Ved "type": "dropdown". Angiv en statisk tekst i dropdown menuen. Hvis "dropdowntext" ikke er angivet, vises der en tekst, der er afhængig af hvor mange lag, der er valgt.

activateButton

• Type: object

Skjul lagvælgeren fra start men gør det muligt for brugeren vise lagvælgeren vha. en knap i kortet. "activateButton" kan indeholde "title", "className" og "html", der alle er optionelle. De har alle en brugbar default værdi. "title" bruges til at angive en tekst, der vises når musen holdes over knappen. "className" tilføjer en CSS-klasse til selve knappen. "html" erstatter indholdet af kanppen med det, der er angivet her. På denne måde er det muligt f.eks. at skifte ikon på knappen. Her er et eksempel på, hvordan "activateButton" kan angives:

"activateButton": {
  "title": "Vis signaturforklaring",
  "className": "my-style",
  "html": "<i class='mdi mdi-format-list-bulleted-type'></i>"
}

buttonIndex

• Type: number
• Default: 0

Hvis der er flere kompoenter med knapper i kortet, så bliver de tilføjet i en tilfældig rækkefølge. Ved at angive buttonIdex er det muligt at bestemme rækkefølgen. Laveste index kommer først. Hvis to knapper har samme index vil det være tilfældigt hvilken der kommer færst.

tabindex

• Type: boolean
• Default: false

Sæt til true hvis man skal kunne tabulere sig frem og tilbage i listen med lag. Dette gør at der kommer en "outline" på elementet i lagvælgeren når det kommer i fokus og gør derved listen mere tilgængelig.

layerOrder

• Type: boolean
• Default: false

Brug rækkefølgen i layers i lagvælgeren og ikke den rækkefølge, som lagene i kortet har.

groups

• Type: object[]

Opret grupper i lagvælgeren. Konfigurationen er en liste (array) af objekter, der hver definerer title, id, type, expanded, layers og showCount. Der er dermed muligt at udvælge hvilke lag, der skal være i hver gruppe. Her er et eksempel på, hvordan groups kan angives:

"groups": [
  {
    "title": "Baggrundskort",
    "type": "radio",
    "expanded": false,
    "layers": ["lag1","ortofoto"],
    "showCount": false
  },
  {
    "title": "Børn og unge",
    "type": "check",
    "expanded": true,
    "layers": ["kommunegraense","skoledistrikter","boernehaver","skoler"],
    "showCount": true
  }
]

Med denne opsætning lagene med id "lag1" og "ortofoto" blive vist i den første gruppe mens de fire andre lag vil blive vist i den anden gruppe. Den første gruppe vil være klappet sammen fra start, mens den anden gruppe vil være foldet ud. Den første gruppe har typen "radio", hvilket betyder at et klik på et lag i denne gruppe, medfører at de andre lag slukkes.

title er overskriften i gruppen.

type bestemmer om der kan vælges en eller flere lag i gruppen.

expanded angiver om gruppen skal være foldet ud fra start.

layers relaterer sig til hvilke lag, gruppen skal indeholde. Dette er en liste med id'er på lagene.

showCount sat til true betyder at antallet af lag samt antallet af tændte lag i en gruppe vises. Herved er det muligt at se lidt mere om hvad den pågældende gruppe indeholder. Som default bliver antallet ikke vist.

paramNames

• Type: object

Det er muligt at angive en række parametre, der styre hvordan lagvælgeren opfører sig.

Pt. er det muligt at angive en liste med ID'er på lag (adskilt af komma), der skal vises. Det er kun lag, der er med i lagvælgeren, det er muligt at styre. I dette eksempel kan man enten kalde siden med denne widget med URL-parameteren =?visiblelayers=lag1,lag4 for at de to lag. Alternativt kan man på DIV elementet angivet attributten data-widget-visiblelayers="lag1,lag4":

Tilsvarende er det muligt at angive hvilke grupper, der skal være foldet ud (expanded). Det gøres som ved "layers" blot med "groups". Hvis parameteren er angivet, vil den styre grupperne, ellers vil værdien angivet i expanded styre det.

"paramNames": {
  "layers": "visiblelayers",
  "groups": "expandedgroups"
}

Eksempler

Eksempler, der bruger denne komponent:

• Alle typer pins (namedstyles) style

  Se hvordan de forskellige pins ser ud

• Alle typer skraveringer style

  Se hvordan de forskellige skraveringer ser ud.

• Alternativ rendering style

  Vis en alternativ geometri i kortet. Det kan f.eks. bruges til at vise centroiden for en polygon eller tilføje en buffer

• Fallback layer

  Hvis et lag er kritisk for løsningen, er det muligt at angive et fallback-lag, der benyttes hvis det valgte lag fejler.

• Find nærmeste med lagvælger søgfind nærmestelagvælger

  Brug Find Nærmeste sammen med lagvælgeren, så ruten kun vises for de data, der er vist i kortet.

• Fuld kontrol over lagvælgeren lagvælgersignatur

  Bestem selv hvad der skal stå i lagvælgeren ved at indsætte din egen HTML.

• GetLegendGraphic i lagvælgeren lagvælgerwmtssignatur

  Hent signaturen direkte fra kilden via GetLegendGraphic eller ved blot at indsætte et billede

• Info hentet fra flere services infolagvælger

  I de tilfælde, at det ikke er muligt at hente alle features ud i browseren, er det muligt at få info fra en eller flere services i stedet.

• Info med statisk boks info

  Infoboksen kan vises på flere måder. Her er et eksempel, hvor infoboksen er fast i øverste venstre hjørne. Den kan også placeres som en flydende boks i kortet eller helt afkoblet fra kortet.

• Inline SVG ikoner stylelagvælger

  Det er muligt at angive SVG ikoner direkte i konfigurationen. Derudover indeholder Septima Widget en namedstyle, der kan anvendes (se nedenstående konfiguration). Herved er det muligt at styre fillcolor samt scale på ikonet

• Jordstykker info

  Info på jordstykker hentet fra Dawa

• Kommuneplan kommuneplan

  Få vist oplysninger om en given kommuneplanramme hentet direkte fra Plandata.dk med både tekst og kort. Angiv blot planID på din widget, og alt andet sker automatisk. Brug den samme widget til at vise en hvilken som helst kommunplanramme.

• Konfliktsøgning på lag i kortet konfliktsøgningsøg

  Foretag en konfliktsøgning på et vektorlag, der er vist i kortet

• Lagenes rækkefølge laglagvælger

  Angiv hvilke lag, der skal tegnes øverst i kortet uafhængigt af lagvælgeren. I dette eksempel tegnes det Grå Skærmkort oven på Ortofoto fordi Ortofoto har et mindre zIndex

• Lagvælger lagvælgergeojson

  Med lagkontrollen er det muligt for brugeren at tænde/slukke for de enkelte lag i kortet samt at se signaturen for de enkelte lag.

• Lagvælger filter lagvælgerfilter

  Brug lagvælger filter til at skifte indholdet i lagvælger og tilhørende kort på baggrund af brugerens valg

• Lagvælger med grupper lagvælger

  Hvis der er mange lag, er det rart, hvis der er en form for gruppering af lagene i lagvælgeren. De enkelte grupper kan foldes sammen. Derudover er det muligt at få vist antallet af lag samt antallet af tændte lag i gruppen. Dette kan styres pr. gruppe.

• Lagvælger med overskrift lagvælger

  Vis en overskrift over lagvælgeren og giv brugeren mulighed for at folde den sammen

• Lagvælger som knap lagvælger

  Vis lagvælgeren ved at aktivere den via en knap. Herved kan en lagvælger, der fylder meget, skjules fra start og kun hentes frem hvis der er behov for det.

• Lagvælgeren som dropdown lagvælgerdropdown

  Vis lagvælgeren som en dropdown, så den ikke fylder så meget. Teksten på knappen kan enten være en fast tekst, som angives i konfigurationen, eller en dynamisk tekst, der er afhængig af antallet af valgte lag

• Prædefinerede lag lagvælger

  Septima Widget indeholder en række prædefinerede lag (namedlayers), som gør det nemt at få et kort frem. Lagene i dette eksempel kommer alle fra services, der findes frit tilgængelige i Danmark.

• Signaturforklaring lagvælgersignatur

  Definer en signaturforklaring med mange signature.

• Signaturliste lagvælgergeojson

  Med lagkontrollen er det muligt at vise signaturen for de enkelte lag uden at give mulighed for at tænde og slukke de enkelte lag.

• Skraveringer style

  Brug skravering til at udfylde flader i kortet. Der findes en række forskellige skraveringer, hvor det er muligt at styre farve, linjetykkelse, vinkel mv. Se mere under fillpattern i dokumentationen.

• Stiplet linje style

  Brug flere styles på samme objekt til f.eks. at få stiplede linjer. Det kan også bruges til at danne komplekse ikoner og meget andet

• Style fra fil styleinfo

  Hent style fra en ekstern kilde. Herved kan den samme style genbruges i flere lag eller konfigurationer

• Transition lagvælgertransition

  Fade baggrundskort ind og ud når de hhv. vises og skjules. Dette giver en glidende effekt, men er langt fra relevant i alle situationer

• Tænd lag ved konfliktsøgning konfliktsøgningsøg

  Et relateret lag tændes (hvis det er slukket) når konfliktsøgningen finder noget på et target. Derudover aktiveres konfliktsøgningen med 'mapclick' kun når det relaterede lag er tændt

• Tænd relateret lag søg

  Når man vælger et objekt fra søgefeltet, er det muligt at tænde et specifikt lag. Dette sikre at man får vist relevante data i kortet når der zoomes til et sted.

• Udskriv med en service printlagvælger

  Brug en service til at generere et PDF-dokument med.

• Valgsteder wfsinfo

  Solrød Kommune har lavet dette eksempel, der benytter Datafordeleren og Dataforsyningen til at vise valgdestrikter og valgsteder i kommunen

• Vis symboler i lagvælger lagvælgersymboler

  Det er i Septima Widget muligt at benytte symboler i stedet for ikoner i kortet. Det er muligt at bruge 'circle', 'star' mv. Når signaturen vises i lagvælgeren, vises de tilsvarende symboler også i lagvælgeren.
  Det er muligt at ændre symbolernes kantfarve og udfyldningsfarve. Derudover er det muligt at angive størrelsen samt rotere symbolet.

• Vis udvalgte lag i lagvælgeren lagvælgerekskluder

  Det er muligt at vise udvalgte lag i lagvælgeren. De kan både vælges til eller fra i konfigurationen