Kort (map)

Elementet "map" definerer en widgets overordnede kortegenskaber.

Options

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

title

• Type: string Gør elementet mere tilgængeligt.

crs

• Type: string
• Default: EPSG:25832

Kortets koordinatreferencesystem defineret i EPSG, eksempelvis: EPSG:25832.

maxZoomLevel

• Type: number
• Default: 0

Angiver, hvor langt brugeren må zoome ud i kortet. Jo lavere tal, der angives, jo længere ud kan brugeren zoome. Den lavest mulige værdi er 0.

minZoomLevel

• Type: number
• Default: 11

Angiver, hvor langt brugeren må zoome ind i kortet. Jo højere tal, der angives, jo længere ind kan brugeren zoome. Den højeste værdi, der kan angives, bestemmes af det anvendte kort.

view

• Type: object

Elementet view definerer et korts opstartstilstand. Det vil sige, centerpunkt defineret ved x og y koordinater i kortet samt zoomlevel:

"view": {
    "zoomLevel": 6,
    "x": 724406,
    "y": 6175994
}

Alternativt er det muligt at angive extent som en bbox med det udsnit, der skal vises.

"view": {
    "extent": [445058, 6066492, 890702, 6400726]
}

Det er også muligt at angive et maxExtent, der gør, at brugeren ikke kan panorere væk for et givent extent.

"view": {
    "zoomLevel": 0,
    "x": 724406,
    "y": 6175994,
    "maxExtent": [445058, 6066492, 890702, 6400726]
}

Kortet kan være roteret fra start ved at tilføje rotation til view. Bemærk at rotation angives i radianer.

layer

• Type: Layer[]

En liste af lag, der skal vises i kortet. Læs mere her.

height

• Type: number | string
• Default: 550px

Angiv, hvor højt kortet skal være. Værdien kunne for eksempel være 300 eller 300px, der begge sætter højden på kortet til 300 pixels. Højden kan også angives i procent. For eksempel 100%, der kan benyttes til fuldskærmskort.

Denne egenskab kan ligeledes angives direkte på den div, der definerer widget'en. Det gøres ved at tilføje en attribut, der hedder data-widget-height:

<div data-widget="mapwidget" data-widget-height="100%"></div>

useHash

• Type: boolean
• Default: false

Skal den aktuelle position gemmes i URL'en, så man kan sende URL'en til en anden og se præcis det samme udsnit, så sæt useHash til true.

useStore

• Type: object

Med useStore er det muligt at gemme flere ting omkring kortets aktuelle visning, herunder centerpunkt og zoomniveau til det rette sted, næste gang brugeren ser denne widget, samt hvilke lag, der er vist. Det er for eksempel relevant, når brugeren forlader siden og vender tilbage hurtigt efter. Som udgangspunkt bliver det gemte sted husket i 30 sekunder (30.000 millisekunder). Denne værdi kan ændres ved at sætte expire til et andet antal i millisekunder:

"useStore": {
    "expire": 600000
}

Herved udløber den først efter 600.000 millisekunder, svarende til ti minutter. Sæt expire til never for aldrig at udløbe:

"useStore": {
    "expire": "never"
}

For at altivere at lag også huskes, tilføjes "layer": true. Herved vil de sidst viste lag være aktive næste gang brugeren kommer ind på siden. Default er "layer": false Tilsvarende vil "map": false gøre at kortets centerpunkt og zoomniveau ikke gemmes. Default er "map": true

"useStore": {
    "expire": "never",
    "map": true,
    "layer": true
}

For at sikre at det, der gemmes bliver brugt af den samme Widget, benyttes URL'en som identifikation. Men dele af URL'en kan være dynamiske selvom det er den samme Widget, der vises. Derfor er det muligt at angive en liste med URL parametre, der ikke skal tages med som identifikatin. Det gøres ved at angive en liste med en eller flere parametrenavne på denne måde: "ignoreURLParams": ["husnummerid"]

"useStore": {
    "expire": "never",
    "ignoreURLParams": [
        "husnummerid"
    ]
}

mapcontrols

• Type: object

Med mapcontrols er det muligt at styre, hvordan interaktionen i kortet skal være. Det er for eksempel muligt at disable zoom med musehjulet. Det gøres ved at sætte mouseWheelZoom til false:

"mapcontrols": {
    "mouseWheelZoom": false
}

Følgende navigationsfunktioner der kan deaktiveres: mouseWheelZoom, dragRotate, shiftDragZoom, doubleClickZoom, dragPan, pinchZoom, pinchRotate, keyboard og scaleline. Derudover kan onFocusOnly sættes til true, hvis brugeren skal have kortet i fokus før der kan navigeres i det. Default er . Det er ligeledes muligt at styre hvor meget der zoomes ind ved dobbeltklik ved at angive et tal for zoomDelta. Følgende funktioner kan aktiveres: scaleline og zoom. Eksempelvis:

"mapcontrols": {
    "zoom": true
    "scaleline": true
}

For scaleline er det muligt at angive forskellige parametre i stedet for true. Det kan bruges til at styre hvilket element (angiv ID på elementet) scaleline skal vises i som her:

"mapcontrols": {
    "scaleline": {
        "target": "elementID"
    }
}

epsgDefs

• Type: object

Her er det muligt at definere projektioner, der bruges i kortet. Hvis ikke angivet, så kaldes https://epsg.io for at hente ukente projektioner. Fordelene ved at angive projektionsdefinitionen på forhånd er, at der ikke skal ventes på at en ekstern service skal kaldes. Det kan også være at det er en speciel projektion eller at man ikke ønsker at kalde nogen eksterne kilder.

Her ses et eksempel på at definere EPSG:3007. Definitionen kan findes på f.eks. https://epsg.io/3007 (kig efter PRoJ.4):

"epsgDefs": {
    "EPSG:3007": "+proj=tmerc +lat_0=0 +lon_0=12 +k=1 +x_0=150000 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs"
}

Det er muligt at angive definitionen på flere projektioner.

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.

mapButtonsPosition

• Type: `string
• Default: top-left

Placeringen af knapperne i kortet. Som defajlt placeres knapperne i øverste venstre hjørne i kortet. Men det er også muligt at angive top-right, bottom-left samt bottom-right.