For at bruge Septima Widget skal du blot have en licens og indsætte følgende to linjer på din hjemmeside:
<div data-widget-url="https://septima.dk/widget/config/layer.json"></div>
<script src="https://widget.cdn.septima.dk/latest/widgetconfig.js"></script>
Elementet "map" definerer en widgets overordnede kortegenskaber
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
css | string/array | Angiv en sti til en css-fil, der skal loades efter komponenten. Herved vil det være muligt at lave en brugertilpasset style af elementerne. Ved at angive et array af stier eller en liste adskilt af et komma er det muligt at loade flere filer. | |
title | string | Gør elementet mere tilgængeligt | |
crs | string | EPSG:25832 | Kortets koordinatreferencesystem defineret i EPSG, eksempelvis: EPSG:25832 |
maxZoomLevel | number | 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 | number | 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 | object |
Elementet "view": { "zoomLevel": 6, "x": 724406, "y": 6175994 } Alternativt er det muligt at angive "view": { "extent": [445058, 6066492, 890702, 6400726] } Det er også muligt at angive et "view": { "zoomLevel": 0, "x": 724406, "y": 6175994, "maxExtent": [445058, 6066492, 890702, 6400726] } |
|
layer | array | En liste af lag, der skal vises i kortet | |
height | number/string |
Angiv, hvor højt kortet skal være. Værdien kunne for eksempel være Denne egenskab kan ligeledes angives direkte på den <div data-widget="mapwidget" data-widget-height="100%"></div> |
|
useHash | boolean | 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 | object |
Med "useStore": { "expire": 600000 } Herved udløber den først efter 600.000 millisekunder, svarende til ti minutter. Sæt "useStore": { "expire": "never" } For at altivere at lag også huskes, tilføjes Tilsvarende vil "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: "useStore": { "expire": "never", "ignoreURLParams": [ "husnummerid" ] } |
|
mapcontrols | object |
Med "mapcontrols": { "mouseWheelZoom": false } Følgende navigationsfunktioner der kan deaktiveres: Derudover kan Det er ligeledes muligt at styre hvor meget der zoomes ind ved dobbeltklik ved at angive et tal for Følgende funktioner kan aktiveres: "mapcontrols": { "zoom": true "scaleline": true } For "mapcontrols": { "scaleline": { "target": "elementID" } } |
|
epsgDefs | 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. Kontakt os for nærmere oplysinger. |
I layer-elementet angives de lag, kortet skal bestå af. Hvert lag er et objekt, men man også angiver en URL til en fil, der indeholder laget. Herved kan man anvende konfigurationen af et lag i flere widgets.
Hvert layer har følgende elementer:
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal laget deaktiveres. Herved fungerer det, som om laget ikke var tilføjet. Kan bruges til midlertidig fjerne et lag. |
id | string | ID, der kan bruges til f.eks. at skabe relationer mellem lag eller funktioner. | |
className | string | Kan f.eks. bruges til at tvinge lag til at blive renderet i forskellige canvas ved at angive to forskellige className. Det kan også bruges til at styre indholdet i det canvas, som laget tegnes i. | |
background | string | Angiv en farve. Kan bruges til at sætte baggrundsfarven på et lag. Dette er specielt velegnet til vektortiles baggrundskort. | |
name | string |
Indeholder en læsbar tekst, der bruges af funktioner som f.eks. lagvælger m.fl., hvor der skal vises en tekst for hvert lag. |
|
namedlayer | string |
Angiver navnet på et default baggrundskort. På nuværende tidspunkt findes følgende navngivne lag, der kan benyttes: Der er muligt at overstyre enkelte parametre ved blot også at tilføje de parametre, der ønskes overstyret. For |
|
visible | boolean | true | Angiver, om laget skal vises fra start |
ignore | boolean | false | Laget bliver tilføjet, men det fremgår ikke af lagvælgeren og laget vil ikke være synligt i kortet. Dette er f.eks. relevant når laget benyttes som fallback til et andet lag. |
fallback | string | Hvis er lag er kritisk for anvendelsen af løsningen, er det muligt at angive et ID på et altarnativt lag, der skal vises hvis dette lag fejler. Brugeren vil som udgangspunkt ikke opdage at et andet lag benytte. Lagvælger og andre funktioner vil fungere som før, men laget hentes fra en anden service. Bemærk at denne mulighed kun kan benytte på rasterlag som f.eks. WMS, WMTS og lignende. | |
copyright | string | Tilføj en copyright-tekst i kortet. Hvis der skal være et link, kan det tilføjes ved at benytte HTML. | |
extent | array | Angiver, om laget kun skal vises inden for et bestemt extent. Alt uden for dette extent vises (og hentes) ikke. | |
type | string | Elementet type angiver typen af laget. Gyldige værdier: "geojson", "esrijson", "shp", "json", "djangojson", "datasourcejson", "gml", "gpx", "sheet", "OSM", "TileJSON", "GeoTIFF", "ArcGISRest", "XYZ", "VectorTiles", "Stamen", "WMS" eller "WMTS" Ved typen geojson er følgende øvrige elementer tilgængelige: features, features_host, features_dataType, features_type, features_style, template, template_[funktionsnavn], features_callbackparam, features_template Ved typen flatgeobuf er følgende øvrige elementer tilgængelige: features, features_host, features_type, features_style, template, template_[funktionsnavn], features_template Ved typen esrijson er følgende øvrige elementer tilgængelige: features, features_host, features_dataType, features_type, features_style, template, template_[funktionsnavn], features_callbackparam, features_template Ved typen shp er følgende øvrige elementer tilgængelige: features, features_host, features_type, features_style, template, template_[funktionsnavn], features_template Ved typen json er følgende øvrige elementer tilgængelige: features, features_host, features_dataType, features_type, features_style, template, template_[funktionsnavn], features_callbackparam, features_geometrycolumn, features_geometryFormat, features_template Ved typen djangojson er følgende øvrige elementer tilgængelige: features, features_host, features_dataType, features_type, features_style, template, template_[funktionsnavn], features_callbackparam, features_geometrycolumn, features_template Ved typen datasourcejson er følgende øvrige elementer tilgængelige: features, features_host, features_dataType, features_type, features_style, template, template_[funktionsnavn], features_template Ved typen gml er følgende øvrige elementer tilgængelige: features, features_host, features_dataType, features_type, features_style, template, template_[funktionsnavn], features_template Ved typen gpx er følgende øvrige elementer tilgængelige: features, features_host, features_dataType, features_type, features_style, template, template_[funktionsnavn], features_template. Bemærk: Sæt Ved typen sheet er følgende øvrige elementer tilgængelige: features, features_host, features_style, template_[funktionsnavn] samt sourceOptions Ved typen wms er følgende øvrige elementer påkrævet: host, format, layername Ved typen wmts er følgende øvrige elementer påkrævet: host, format, layername, resolutions, matrixIds, matrixSet Ved typen OSM skal ingen andre elementer angives Ved typen Stamen skal ingen andre elementer angives, men det er muligt at angive layername (default er "watercolor") Ved typen TileJSON er følgende element påkrævet: host Ved typen VectorTiles er følgende element påkrævet: host Ved typen ArcGISRest er følgende øvrige elementer påkrævet: host, extent. For at vælge et specifikt lag, tilføj da layername ("show:0" hvis det er det første lag). Ved typen XYZ er følgende element påkrævet: host |
|
sourceOptions | object |
Her er det muligt at styre den præcise konfiguration af laget. Dette relevant for typerne "OSM", "TileJSON", "GeoTIFF", "ArcGISRest", "XYZ", "VectorTiles", "Stamen", "WMS" eller "WMTS", men primært "GeoTIFF", der kan indeholde specielle attributter. Ved typen sheet angives hvilket "ark" der skal læses (defautl er "sourceOptions": { "sheet": "Ark1", "header": "A", "skipFirstRows": 2, "geometryTemplate": "POINT(<%= D %> <%= E %>)" } |
|
crs | string | EPSG:25832 | Kortets koordinatreferencesystem defineret i EPSG, eksempelvis: EPSG:25832 |
features | boolean | false | Angiver, om laget anvender vektordata for dynamisk visning og interaktion. Vektordata skal være i formatet GeoJSON. Ved at angive denne parameter er det muligt både at hente data som WMS, WMTS eller andet rasterlag, samtidig med at man henter vektordata til bedre interaktion for brugeren. |
data | object | Indsæt data (GeoJSON) direkte i konfigurationen. Dette kan bruges som et alternativ til at hente vektordata fra en service med "feature_host". Det er også velegenet til at vise enkelte objekter i kortet, såsom adresse eller mødested. Indholdet skal overholde fra GeoJSON-specifikationen - læs mere her | |
selectable | boolean | false | Kun relevant for lag med vektordata i klienten. Hvis selectable er sat til true , vil cursoren skifte til en hånd når brugeren fører musen over et objekt i kortet. Derudover aktiveres "click" eventet på laget. Dette benyttes i f.eks. Widget-API'et. |
features_host | string | Internetadressen, hvor vektordata hentes fra, angiver, hvor kortet skal hente vektordata. Det kan eksempelvist være en statisk GeoJSON fil på samme domæne eller fra en ekstern webservice. Hvis data hentes fra en webservice eller en statisk fil på et andet domæne, skal data leveres med JSONP. Elementet "features_dataType" skal i dette tilfælde angives til værdien "jsonp". Bemærk at ved typen "shp" blot skal angives URL'en til filen uden ".shp". | |
features_template | string |
Her angives en skabelon for, hvorledes JSON fra service skal transformeres til GeoJSON. Attributter fra data kan angives i skabelonen med følgende notation <%= attributnavn %> - læs mere om templates her. |
|
features_infohost | string/object |
Hvis "features_infohost" er en streng, er det en URL til den service, hvor vektordata kan hentes fra, når der klikkes i kortet Når "features_infohost" er en streng, skal servicen returnere GeoJSON. Det kan eksemplevis være en WFS-service eller en anden service, der kan returnere en række ud fra et punkt (x, y), en wkt eller en bbox. I denne internetadresse vil Hvis servicen returnerer noget andet end GeoJSON (f.eks. ESRIJSON), skal "features_infohost" være et objekt, der indeholder "host" samt "type" i stil med dette: { "host": "//myservice.dk/gis/rest/.../query?...&where=wkt=POINT(%20)", "type": "esrijson" } Bemærk at "eventtype" skal sættes til "mapclick" (eller ["click", "mapclick"]) for at "features_infohost" kaldes. |
|
features_dataType | string | Gyldige værdier: "json" eller "jsonp". Hvis data hentes fra en webservice eller en statisk fil på et andet domæne, skal data leveres med JSONP. Se også features_host. | |
features_dataPath | string | Kan benyttes til at udvælge dele af de returnerede JSON data. Det kan f.eks. bruges hvis dele af data indeholder den egentlige GeoJSON. | |
features_callbackparam | string | callback | Hvis servicen leveres med JSONP, men parameteren med navnet på funktionen ikke hedder "callback", angives denne parameter. |
features_type | string | Typen af geometrier. Gyldige værdier: "Point", "Polygon" eller "Line". Hvis data er multigeometri, bliver det automatisk detekteret. Bemærk at GeometryCollection IKKE er understøttet. | |
features_geometrycolumn | string | Hvis servicen leveres med djangojson eller json , ligger geometrien i en navngiven kolonne, der skal angives her for at kunne vise det i kortet. |
|
features_geometryFormat | string | geojson | Hvis servicen leveres med typen json , ligger geometrien i en navngiven kolonne, der skal angives i features_geometrycolumn for at kunne vise det i kortet. Det forventes at kolonnen indeholder en GeoJSON geometri. Hvis kolonnen indeholder WKT, skal features_geometryFormat sættes til WKT . |
features_style | object |
Hvordan skal objekterne styles i kortet. Det er muligt både at angive sti til ikoner, farver og gennemsigtighed, samt hvordan et objekt skal se ud, når det er valgt i kortet Angiv et array af features_style og gør det muligt at lave avancerede styles, ved at kombibere to styles. Det kan f.eks. beuges til at lave linjer med flere farver eller til at have forskellig markering afhængigt af om objektet er valgt eller ej. |
|
styleType | string | dynamic |
En features_style kan både styre stylen afhængig af zoom samt af data. Det betyder at hver gang, der sker noget i kortet, så skal stylen gentegnes. Hvis der er mange features i kortet, kan dette tage lidt tid og reducere performance. Men hvis ens style ikke kræver denne dynamik,
kan det gøre performance bedre ved at håndtere stylen mere statisk. Dette kan ikke detekteres automatisk og derfor skal man selv fortælle laget hvilken Ved at vælge Ved at vælge |
features_method | string | GET | Hvordan skal servicen kaldes. Gyldige værdier: "GET" eller "POST". |
template eller template_[funktionsnavn] | string | "" |
Her angives en html-skabelon for, hvorledes infoboksen skal præsenteres, når brugeren enten klikker eller holder musen over et objekt i kortet. Attributter fra data kan angives i html-skabelonen med følgende notation <%= attributnavn %> - læs mere om templates her. For at benytte templates til specifikke funktioner, som eksempelvis "Find nærmeste" angives "route" som en del af template-navnet ("template_route"). Tilsvarende for template_table |
userfilter | object | Hvilke objekter skal vises i kortet. Kan benyttes alene eller sammen med filter. | |
reloadOnFilterChange | boolean | false | Hent data igen når filteret ændres. Herved kan filtreringen ske "server side" i stedet for i klienten. Kan benyttes sammen med filter. |
cluster | object | Vis punkter i kortet som en samling af punkter. Herved er det nemmere at overskue mange punkter for brugeren. Bemærk, at cluster ikke er understøttet i IE8 eller ældre browsere. | |
declutter | boolean | false | Sørger for at objekter ikke ligger oven i hinanden. Det er primært til punkter, hvis denne funktion sørger for at ikonerne ikke ligger oven på hinanden ved kun at vise et af punkterne, hvis der er overlap. Denne funktion kan også bruges til at sørge for at labels ikke er overlappende. |
host | string | Ved "WMS" eller "WMTS". URL til service | |
crossOrigin | string | undefined | Hvis der er brug for at få fat i billeder som data, er det nødvendigt at servicen, der levere billederne har CORS header på. Derudover skal crossOrigin sættes til: "crossOrigin": "anonymous" . Det er f.eks. i forbindelse med "print" i klienten eller "WEBGL". |
layername | string | Ved "WMS" eller "WMTS". Navnet på laget fra servicen | |
format | string | image/png | Ved "WMS" eller "WMTS". Formatet af det billede, som servicen skal levere |
params | object | En liste med parametre, der tilføjes til URL'en. Kan kun benyttes til VectorTiles og kan f.eks. bruges til at angive access_token , samt WMS til f.eks. SLD_BODY |
|
opacity | number | 1 | Sæt lagets opacity . Kan antage værdier mellem 0.001 og 1. Kan benyttes til billedlag (såsom WMS og WMTS). På vektorlag benyttes features_style |
minResolution | number | Herved kan man styre, hvornår laget skal vises i kortet. Resolution er antallet af meter pr. pixel | |
maxResolution | number | Herved kan man styre, hvornår laget skal vises i kortet. Resolution er antallet af meter pr. pixel | |
zIndex | number | 0 | Angiver den rækkefølge lagene bliver renderet i kortet. Laget med det højeste zIndex kommer øverst. Hvis to lag har det samme zIndex kommer det sidste lag øverst |
singleTile | boolean | false | Ved "WMS". Hent ét billedet i stedet for tiles. Er specielt anvendeligt ved WMS-lag, der indeholder labels eller ikoner |
preload | number | 0 | Ved lag, der hentes som tiles som f.eks. "WMTS", "WMS" med "single": flase og "VectorTiles". Angiv et antal zoom niveauer, der skal hentes lavtopløselige tiles for på forhånd. 0 betyder at ingen tiles indlæses på forhånd |
resolutions | array | Ved "WMTS". Resolutions denne WMTS service leverer i | |
matrixIds | array | Ved "WMTS". MatrixIds denne WMTS service leverer | |
matrixSet | array | Ved "WMTS". MatrixSet denne WMTS service leverer | |
relation | string/object | Det er muligt at angive en relation mellem laget og en eller flere andre lag. Hvis der angives en streng, så refereres der til et andet lag layername , der har strengens værdi. Hvis man i stedet angiver et objekt, så er det muligt at angive et match på egenskaber. Herved kan relationen for eksempel være mellem dette lag og alle lag med type="WMS". Dette gøres med "relation": {"type": "WMS"} |
|
delay | number | 0 | Features tilføjes til kortet med en forsinkelse angivet i millisekunder |
featureDelay | number/string | 0 | De enkelte features tilføjes til kortet med en individuel forsinkelse i millisekunder. Herved bliver de synlige én ad gangen. Værdien kan angives som millisekunder eller som en template. Læs mere om templates generelt her |
animate | object | Tilføj features til kortet med en animation. Det kunne være, at linjer tegnes som en rute i kortet | |
loadingstrategy | string | all |
Kontroller den måde vektordata hentes på. Som default er værdien "params": { "bbox": "<%= bbox[0] %>,<%= bbox[1] %>,<%= bbox[2] %>,<%= bbox[3] %>" }, eller via "https://geoserver.plandata.dk/geoserver/wfs?... |
lazyload | boolean | false | Hent først vektordata når laget vises i kortet. Kræver at visible er sat til false, så laget ikke er vist fra start. |
cache | boolean | true | Ved vektorlag. Sørger for at browseren cache'er resultatet af et request, så transport af data minimeres. |
reloadInterval | number | Genindlæs data med et fast interval. Intervallet angives i millisekunder og kan f.eks. bruges til at vise "live" data på kortet. Dette kan bruges til vektorlag samt WMS lag. | |
reloadIntervalCache | boolean | false | Kun relevant når "reloadInterval" er sat. Som default vil man ikke cache data, hvis de skal reloades med et fast interval. Dette gøres ved at tilføje en tilfældig parameter til URL'en, når data hentes. Herved betragter browseren og serveren det som et nyt kald. I specielle tilfælde er denne parameter ikke hensigtsmæssig. Ved at sætte "reloadIntervalCache" til true , tilføjes denne tilfældige parameter ikke til URL'en når data hentes. I det tilfælde er det serverens opgave at sørge for at data ikke er cached. |
transition | boolean | Fade et lag ind og ud når de hhv. vises og skjules. Dette giver en glidende effekt, men er langt fra relevant i alle situationer. | |
paramNames | object |
Det er muligt at angive en eller flere nøgler, der skal bruges til at kalde den service, man bruger, med. Det kan bruges til kun at vise bestemte features i kortet eller bestemte lag: "paramNames": { "key": "planid" } Herved kigges der først på om URL-parameteren Værdien benyttes til at estatte teksten |
|
join | object |
Berig data fra en supplerende datakilde. "join": { "type": "json", "host": "https://septima.dk/widget/data/kom_kategori.json", "dataType":"json", "on": { "komnr": "kommunekode" } } Data kan også angives direkte i konfigurationen: "join": { "data": { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "kommunekode": 730, "kategori": 1, "info": "Gælder alene for Fælledparken" } }] }, "on": { "komnr": "kommunekode" } } I |
|
computedProperties | array |
Tilføj supplerende beregnede kolonne til data, der kan benyttes til f.eks. at skabe en nemmere kategorisering. Det er muligt at angive en listen med nye kolonnenavne angivet i Herunder ses forskellige eksempeler,der konverterer eksisterende kolonner til noget andet: "computedProperties": [ { "column": "adresse", "template: "<%= vejnavn %> <%= husnummer %>, <%= postnummer %> <%= postdistrikt %>" "type": "string" }, { "column": "pris", "template: "<%= grundpris %>", "type": "number" }, { "column": "overtagelse", "template: "<%= dato %>", "type": "date" }, { "column": "interval", "template: "{from: <%= start %>, to: <%= end %>}", "type": "object" } ] |
|
orderBy | array |
Sortering af data når de f.eks. vises i listevisningen. Det er muligt at angive en listen med kolonnenavne angivet i Herunder ses et eksempel hvor der først sorteres på "status" og derefter på "grundpris": "orderBy": [ { "column": "status", "desc": true }, { "column": "grundpris", "desc": false, "type": "number" } ] |
|
groupBy | array |
Gruppering af data. Angiv en liste med kolonnenavne, der skal grupperes på. Hvis data indeholder geometri, forudsættes det er geometrien er ens på tværs af rækkerne, der grupperes. Derfor benyttes geometrien fra den første forekomst. informationen for alle rækker, der er grupperet, er gemt i attributten Herunder ses et eksempel hvor data er grupperet efter kolonnen "groupBy": ["pladsid"] |
|
fillpattern | boolean | false | Denne parameter er kun nødvendig at benytte hvis stylen med fillpattern hentes fra en separat fil. Ellers detekteres det automatisk. |
updateWhileAnimating | boolean | false | Stylen opdateres i kortet mens der foregår en animation ved f.eks. zoom til. Dette kan være lidt tungt hvis laget indeholder mange features. |
Styling af objekter i kortet.
Det er muligt at anvende værdien fra en kolonne i data til at styre de enkelte style-egenskaber. Det gøres ved at indsætte <%= KOLONNENAVN %>
i stedet for en style. Det kunne eksempelvis gøres på denne måde:
"icon": "https://septima.dk/widget/img/icon_<%=type%>.png"
eller
"strokecolor": "<%= farvekolonne %>"
Når man angiver sin style, har man ud over værdierne fra kolonnerne også adgang til geometritypen via <%= _geometryType %>
samt oplysninger om det aktuelle kort. Kortets oplysninger findes f.eks. med <%= _currentMap.resolution %>
, men der er også adgang _currentMap.center
, der er et array, og _currentMap.zoom
. Det kan f.eks. bruges til:
"strokewidth": "<% if(_currentMap.resolution > 10) { print(1) } else { print(4) } %>"
Hver af de nedenstående style-egenskaber har en tilsvarende egenskab med suffix "_selected". Disse angiver, hvordan style skal være for et valgt objekt i kortet. Det valgte objektikon bestemmes således af egenskaben "icon_selected".
Indholdet af features_style
kan også være en URL til en fil, der indeholder denne style. Det gøres simpelt ved at angive "features_style": "https://septima.dk/widget/data/styles/test.json"
. Herved kan en style benyttes på tværs af lag og konfigurationer.
Name | type | default | description |
---|---|---|---|
namedstyle | string |
Der findes en række forskellige foruddefinerede styles, der kan benyttes. Lige nu findes der Der er muligt at overstyre enkelte parametre ved blot også at tilføje de parametre, der ønskes overstyret |
|
hidden | boolean | false | Det er muligt at styre om en style skal være synlig. Dette kan med fordel bruges sammen med template. |
zIndex | number | Hvis flere objekter ligger oven på hinanden, der et muligt at bestemme hvilket objekter, der skal ligge øverst. Dette kan med fordel bruges sammen med template. Bemærk at zIndex kun gælder inden for et lag, og kan derfor ikke bruges til at styre visningen på tvæs af lag. | |
minResolution | number | Gør det nemt at styre om en style skal vises i et givent zoom. Dette er specielt anvendeligt hvis man benytter flere styles på et lag. Resolution er antallet af meter pr. pixel | |
maxResolution | number | Gør det nemt at styre om en style skal vises i et givent zoom. Dette er specielt anvendeligt hvis man benytter flere styles på et lag. Resolution er antallet af meter pr. pixel | |
icon | string | Sti til ikon (gælder for punktdata). Stien kan være relativ i forholde til den side, hvor kortet er, eller absolut | |
scale | number | 1 | Skalér ikoner i kortet. Værdien 0.5 betyder at ikonet vises i halv størrelse, mens 2 betyder at ikonet vises i dobbelt størrelse. Virker på billed- samt SVG-ikoner. |
imgSize | array | Benyttes KUN i forbindelse med SVG-ikoner. Angiv den originale størrelsen på SVG-ikoner med f.eks. [65,73] hvis ikonet er 65 pixel bredt og 73 pixel højt. Det virker fint uden i alle browsere, med undtagelse af IE. Kan også angives som tekst på samme form: "[65,73]" . |
|
symbol | string | none | Brug et symbol i stedet for et ikon. Lige nu findes der følgende symboler: circle , square , triangle , star , cross og x . |
svg | string | none |
Det er muligt at angive SVG inline i konfigurationen. Dette kan f.eks. bruges til at styre SVG'en individuelt pr. feature ved at benytte værdier fra data, som beskrevet i ovenstående. Værdien af alle Værdien af alle Værdien af alle Værdien af alle |
crossOrigin | string | undefined | Hvis der er brug for at få fat i billeder som data, er det nødvendigt at serveren, der leverer billederne har CORS header på. Derudover skal crossOrigin sættes til: "crossOrigin": "anonymous" . Det er f.eks. i forbindelse med "print" i klienten eller "WEBGL". |
fillcolor | string | #FFFFFF | Udfyldningsfarve for flader |
fillopacity | number | 0 | Udfyldningsgraden for flader. 0 betyder gennemsigtig, 1 betyder helt udfyldt. Med fillopacity = 0 kan man benytte WMS eller WMTS til styling, mens vektordata benyttes til at give brugeren en oplevelse af interaktion |
strokecolor | string | #FFFFFF | Udfyldningsfarve for linjer og outline på flader |
strokeopacity | number | 0 | Udfyldningsgraden for linjer og outline på flader. 0 betyder gennemsigtig, 1 betyder helt udfyldt. Med strokeopacity = 0 kan man benytte WMS eller WMTS til styling, mens vektordata benyttes til at give brugeren en oplevelse af interaktion |
strokewidth | number | 1 | Bredden på linjer og outline på flader. |
lineDash | array | Angiv hvis linjer skal være stiplede. Angiv f.eks. [10, 10] hvor første og andet tal angiver hvor mange pixels hhv. mellemrum og linje skal vøre i den stiplede linje. |
|
rotation | number | 0 | Rotér symbol eller ikon. |
xOffset | number | 0.5 | Forskyd et ikon i x-retningen. Kan 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 er i midten af ikonet. |
yOffset | number | 0 | Forskyd et ikon i y-retningen. Angivet i et antal pixels ikonet skal forskydes i y-retningen, hvor 0 er ved ikonets nederste kant. Kan antage både positive og negative værdier. |
radius | number | 10 | Størrelsen på et symbol. Anvendes kun, når symbol er angives. |
radius2 | number | 5 | Anvendes kun, når symbol er star eller cross . |
text | string | Vis en label på hvert objekt i kortet. Brug for eksempel <%= navn %> til at vise teksten for feltet "navn". Læs mere om templates her. |
|
textAlign | string | center | Placeringen af label. Brug værdierne "center", "end", "left", "right" eller "start" |
textBaseline | string | middle | Placeringen af label. Brug værdierne "alphabetic", "bottom", "hanging", "ideographic", "middle" eller "top" |
textFont | string | normal 10px Verdana | Angiv "normal" eller "bold", teksten størrelse samt fonttype. |
textFillcolor | string | #333333 | Tekstens farve. |
textOutlinecolor | string | #fff | Tekstens baggrundsfarve/outlinefarve |
textOutlinewidth | number | 3 | Tekstens outline bredde. |
textXOffset | number | 0 | Forskydning af teksten i X-retningen. |
textYOffset | number | 0 | Forskydning af teksten i Y-retningen. |
textMaxWidth | number | Antal tegn en tekst maksimalt må være fær den brydes efter næste mellemrum. | |
textRotation | number | 0 | Tekstens rotation angivet i radianer (0.785398164 = 45 grader). |
textMinResolution | number | Herved kan man styre, hvornår labelen skal vises i kortet. Resolution er antallet af meter pr. pixel | |
textMaxResolution | number | Herved kan man styre, hvornår labelen skal vises i kortet. Resolution er antallet af meter pr. pixel | |
textOverflow | boolean | false | Skal teksten fylde mere end den underliggende geometri (gælder kun for polygoner)? |
jsonUrl | string | En URL til en JSON-fil, der indeholder style til laget. Kan kun benyttes til VectorTiles og kan f.eks. bruges til at få stylen fra en JSON konfiguration |
|
source | string | composite | Navnet på den "source" fra JSON-filen, der definerer stylen. Kan kun benyttes sammen med jsonUrl i forbindelse med VectorTiles |
geometryOptions | objekt |
Det er muligt at få tegnet en alternativ geometri i kortet. Det kan være startpunkt, slutpunktet eller alle knudepunkter for en linje/polygon, centroide eller interior point for en polygon, geometriens convex hull eller envelope eller tilføje en buffer til geometrien. På "geometryOptions": { "type": "interiorPoint" } Ved "geometryOptions": { "type": "buffer", "buffer": 27 } Ved "geometryOptions": { "type": "offset", "delta": [10, 10], "pixels": [2, -2] } Ved "geometryOptions": { "type": "wkt", "wkt": "POINT(550800 6293000)" } Bemærk: Hvis der er mange data, kan disse operationer med fordel gøres på den server, der levere data, ellers er der risiko for at det kan gå langsomt at tegne kortet. |
|
fillpattern | objekt |
Få udfyldt flader i kortet med en skravering. På "fillpattern": { "pattern": "hatch", "fillcolor": "rgba(200,200,200,0)", "strokecolor": "rgba(200,200,200,1)", "offset": 0, "size": 1, "spacing": 5, "angle": 60, "scale": 2 } Vælg mellem følgende typer skravering: Se eksempel på de forskellige typer her. |
Styring af hvilke objekter, der vises i kortet.
Herunder er et eksempel på inholdet af userfilter
. Man angiver navnet på kolonnen samt hvilke egenskaber, der skal knyttes til dette filter. Der findes følgende typer: range
, daterange
, boolean
, text
, selectlist
og multiselect
. I eksemplet er der angivet to kolonner; "antal" og "belægning".
For kolonnen "antal" vises kun objekter, der har værdier mellem 0 og 50 (begge inklusive). For kolonnen "belægning" vises kun de objekter, der har værdier under 100. Begge ranges skal opfyldes for at objektet vises.
{
"antal": {
"type": "range",
"min": 0,
"max": 50,
"limit": [0,110],
"template": "Antal børn: <%= min %>-<%= max %> børn"
"label": "Antal børn:",
"unit": " børn"
},
"belægning": {
"max": 100,
}
}
Herunder findes en beskrivelse af de enkelte egenskaber, et enkelt userfilter kan have.
Name | type | default | description |
---|---|---|---|
type | string | range | Hvilken type filter er det. Angiv "range", "boolean", "selectlist", "text", "daterange" eller "multiselect" |
label | string | Benyttes blandt andet af filter funktionen til at vise en overskrift eller teksten på en boolean knap | |
template | string/object |
Ved type:"range": Benyttes af filter funktionen til at vise det valgte interval. Herved er det muligt at lave et beregnet felt afhændigt af det valgte. Det kunne være at man gerne vil vise navnet på måneden i stedet for tallet. Læs mere om templates generelt her Bemærk at hvis template angives, benyttes label og unit ikke. |
|
min | number/string |
Ved type:"range" og type:"daterange": Den værdi som kolonnen mindst skal have. Ved type:"daterange" er det en dato i samme format som angivet i "format". Alternativt kan syntaksen |
|
max | number/string |
Ved type:"range" og type:"daterange": Den værdi som kolonnen højst skal have. Ved type:"daterange" er det en dato i samme format som angivet i "format". Alternativt kan syntaksen |
|
fixedMin | boolean | false | Ved type:"range": Benyttes i forbindelse med filter funktionen til at fryse sliderens startpunkt. |
fixedMax | boolean | false | Ved type:"range": Benyttes i forbindelse med filter funktionen til at fryse sliderens slutpunkt. |
startDate | string |
Ved type:"daterange": Den dato, der tidligst kan vælges. En dato i samme format som angivet i "format". Alternativt kan syntaksen |
|
endDate | string |
Ved og type:"daterange": Den dato, der senest kan vælges. En dato i samme format som angivet i "format". Alternativt kan syntaksen |
|
limit | array | Ved type:"range": Benyttes blandt andet af filter funktionen til at angive, hvad udfaldsrummet maksimalt kan have | |
unit | string | Ved type:"range": Benyttes blandt andet af filter funktionen til at vise det aktuelle valg med en enhed | |
sliderType | string | double | Ved type:"range": Brug single hvis man ønsker at have en slider med kun én værdi. Bemærk at min og max skal sættes til samme værdi for at få kortet til at vise det, der er valgt i slideren. |
values | array | Ved type:"multiselect" og type:"selectlist": Hvilken værdier fra denne kolonne skal en feature have for at blive vist i kortet. Ved type:"text": En liste af værdier, der skal filtreres på fra starten | |
allDefaultSelected | boolean | false | Ved type:"multiselect" og type:"selectlist": Alle værdier valgt fra starten. Et alternativ til at angive alle eksplicit |
sort | boolean | Ved type:"multiselect" og type:"selectlist": Skal filteret sorteres efter værdien | |
splitString | string | Ved type:"range", type:"multiselect" og type:"selectlist": Hvis data indeholder flere værdier i samme tekstfelt, vil det være muligt at splitte teksten. Det betyder at hvis en kolonne i data f.eks. indholder værdien Have,Hus for én feature mens en anden indeholder Hus , så kan du lave et filter, der indeholder Have og Hus som hvert sit valg. Når brugeren vælger Hus , så vises begge features selvom den ene indeholdt teksten Have,Hus |
|
buttontype | check | Ved type:"selectlist": Skal listen fungere som checkbuttons eller radiobuttons. Ved "buttontype":"check" kan flere værdier fra listen være valgt på én gang. Ved "buttontype":"radio" kan kun én af værdierne i listen være valgt. | |
value | boolean | Ved type:"boolean": Skal de features, der overholder de booleske udtryk, vises | |
eq | boolean, number, string | Ved type:"boolean": Værdien som en feature skal have for, at den er true |
|
regexp | string | Ved type:"boolean": Et regulært udtryk som en feature skal matche for, at den er true |
|
regexpTrue | string | .* | Ved type:"boolean": Et regulært udtryk som en feature skal matche for, at den er true . Herved er det muligt, at "true" og "false" ikke er komplementære. Benyttes sammen med "regexpFalse". |
regexpFalse | string | .* | Ved type:"boolean": Et regulært udtryk som en feature skal matche for, at den er false . Herved er det muligt, at "true" og "false" ikke er komplementære. Benyttes sammen med "regexpTrue". |
format | string | "DD.MM.YYYY" | Ved type:"daterange": Den måde hvorpå datoen vises, når den er valgt. |
maxDateColumn | string | Ved type:"daterange": Hvis data er et range, der er defineret af to datoer i hver sin kolonne, angives her den kolonne, der definere slutdatoen | |
shortcuts | object |
Ved type:"daterange": Vis genveje til f.eks. "næste uge", "næste måned" og "næste år" "shortcuts": { "prev": ["week", "month", "year"], "next": ["week", "month", "year"] } |
|
expand | string | up | Ved type:"daterange": Skal datovælgeren folde ud over (up ) eller under (down ) knappen. |
overlapMethod | string | some |
Ved type:"daterange": Kan have værdierne Ved Ved Ved |
format | string | "DD.MM.YYYY" | Ved type:"daterange": Den måde hvorpå datoen vises, når den er valgt. |
urlParamNames | object | Ved type:"daterange": URL-parametre, der indeholder startværdier for henholdsvis min- og max-værdierne. Angiv eksempelvis {"min": "startdato","max": "slutdato"} . Herved er det muligt at kalde siden med &startdato=16.12.2015&slutdato=18.12.2015 hvor de to værdier bliver indsat som min og max. Bemærk, at formatet på datoen er det format, der er angivet under format . |
Styring af hvordan objekter, der tilføjes i kortet.
{
"type": "route",
"duration": 2000
}
Herunder findes en beskrivelse af de enkelte egenskaber, en enkelt animation kan have.
Name | type | default | description |
---|---|---|---|
type | string | Hvilken type animation er det. Angiv "route" | |
duration | number/string | Hvor lang tid skal det tage, før featuren er tegnet i kortet. Værdien kan angives som millisekunder eller som en template. Læs mere om templates generelt her |
Samling af punkter i kortet. Herunder findes en beskrivelse af de enkelte egenskaber, der kan sættes på et cluster. Hvis ingen egenskaber er angivet, vil default-værdier blive brugt. Det er altså ikke nødvendigt at gøre noget. Bemærk, at cluster ikke er understøttet i IE8 eller ældre browsere.
Name | type | default | description |
---|---|---|---|
distance | number | 40 | Afstanden mellem punkter, der skal samles |
spiral | object |
Når der klikkes på et cluster, vil de underliggende punkter blive spredt ud som en spiral fra centrum af clusteret. Det er muligt at angive sølgende parametre til spiralen: "spiral": { "pxArc": 35, "pxSep": 35, "pxDist": 30 } hvor
|
|
features_style | object |
Hvordan skal cluster punkterne markeres i kortet. Specielt for cluster er det også muligt at angive en Her er et eksempel: "features_style": { "strokecolor": "rgba(230, 0, 126, 0.4)", "strokewidth": 14, "fillcolor": "rgba(230, 0, 126, 1)", "textFont": "bold 16px Roboto", "radius": 18 } I stylen er det muligt at bruge teplates til at styre indholdet stylen. Templaten kan bruge parametrene |
|
minResolution | number | 0 | Hvor langt skal der zoomes ind, før et cluster vises som punkter i stedet for cluster. Dette tal angives som antallet af meter, hver pixel er i dette zoomniveau. |
Elementet "data" definerer et kommunikationslag som erstatning for f.eks. et map. Herved er det muligt at få adgang til data uden at få vist et kort. Indholdet er defineret som lag på samme måde som på map. Bemærk, at kun vektorlag bliver anvendt
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig fjerne en kontrol. |
css | string/array | Angiv en sti til en css-fil, der skal loades efter komponenten. Herved vil det være muligt at lave en brugertilpasset style af elementerne. Ved at angive et array af stier eller en liste adskilt af et komma, er det muligt at loade flere filer. | |
layer | array | En liste af lag, hvor data skal hentes fra. Læs mere under Lag. |
Angiver en liste af "controls" på kortet. En "control" kan være en adressesøgeboks eller en find nærmeste boks. Navnet på den enkelte "control" er angivet i parentes ud for hver overskrift.
"controls": {
"fullscreen": {
"disable": false
},
"info": {
"disable": false,
"type": "cloud"
}
}
Hvordan anvender brugerne Septima Widget? Med Analytics funktionen, er det muligt at følge med i, om brugeren klikker på en feature i kortet, vælger noget i listevisningen, tænder og slukker lag eller filtrerer data.
For at benytte denne kontrol kræver det, at man har et trackID fra Google Analytics eller Siteimprove. Dette kan man få ved at gå ind på https://analytics.google.com eller på https://siteimprove.com/.
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
type | string | googleanalytics | Det er muligt at angive goggleanalytics eller siteimprove . |
trackID | string | Angiv trackID fra Google Analytics eller Siteimprove. | |
wait | string | Det er muligt at angive værdien CookieInformation , hvis der skal ventes til brugeren har givet samtykke gennem CookieInformation. Dette kræver at man allerede benytter CookieInformation på sin side. |
Vis grafer ud fra data.
Det er muligt at få vist flere former for grafer, herunder cirkeldiagrammer m.m. vha. ChartJS. Konfigurationen består af tre dele; "type", "options" og "datasets". "type og "options" angives på funktionen mens "datasets" angives på laget. Alle parameter til både "options" og "datasets" fra dokumentationen kan benyttes. Bemærk at vi pt. benytter version 2.9.4 som default og at der er forskel på den og den seneste version. Det anbefales at benytte seneste version ved at angive ChartJSVersion
i konfigurationen.
I tillæg til den normale ChartJS, er det muligt at benytte plugin'et chartjs-plugin-datalabels. Det eneste du skal gøre er at tilføje det til konfigurationen under "options". Derudover er det muligt at have en speciel konfiguration til hvert dataset.
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
type | string | Angiv hvilken type graf, der skal vises. Se hvilke typer, der er at vælge imellem her. | |
ChartJSVersion | number | 2 | Angiv hvilken version af ChartJS, der skal bruges. Som default benyttes versoin 2. Dette er for at være baggudkompatibel. Det anbefales at benytte versoin 4, der er den seneste version i skrivende stund. |
options | ocject | Options er afhængig af hvilken type, der er valgt. Se dokumentationen for detaljer. | |
css | 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 | string | Tilføj en speciel CSS class til elementet. Dette kan bruges til at styre hvordan elementet ser ud eller placeres på siden. |
Foretag en konfliktsøgning på f.eks. en adresse, et klik i kortet eller brugerens aktuelle position.
Konfliktsøgnigen sker ved, at der kaldes en service, der returnerer resultatet. Resultatet vises i en liste.
Name | type | default | description | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. | ||||||||||||||||
css | 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 | string | Tilføj en speciel CSS class til elementet. Dette kan bruges til at styre hvordan elementet ser ud eller placeres på siden. | |||||||||||||||||
title | string | Gør elementet mere tilgængeligt | |||||||||||||||||
detach | 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. |
|||||||||||||||||
template | string | Angiver den html-template, der anvendes til at præsentere 'find nærmeste' resultater. Hvis ikke angivet, så vises listen uden overskrift og formatering. Med template kan man styre det, der ligger uden om listen. Det kunne være en overskrift samt en forklarende tekst. Læs mere om templates generelt her. For denne template er der to tilgængelige attributter; <%= title %> og <%= content %> , hvor <%= title %> benyttes til at skrive, hvor ruten starter, mens <%= content %> er dér, hvor listen indsættes. De enkelte rækker i listen styres af template_route på laget. |
|||||||||||||||||
target | array | Angiver en liste af services, der skal kaldes. | |||||||||||||||||
highlight | boolean | false | Skal det fundne markeres i kortet? Dette er specielt hensigtsmæssigt, når eventtype er "mapclick", men kan også bruges i andre situationer. Denne mulighed er ikke optimal, når der bruges flere targets. | ||||||||||||||||
zoomOptions | object | Bruges kun, når "highlight" er sat til true. Hvis angivet, så zoomes der til objektet med den angivede metode. sæt evt. "preventZoom" på "search" for at undgå at de begge zoomer. | |||||||||||||||||
inMap | boolean | false | Skal resultatet vises oven på kortet som en normal infoboks. | ||||||||||||||||
closeButton | boolean | false | Vis en lukknap i infoboksen. Når brugeren klikker på knappen, lukkes boksen og markeringen fjernes. Dette er specielt anvendeligt i kombination med features_style |
object |
| Bruges kun, når "highlight" er sat til true. Her er det muligt at angive, hvordan markeringen skal styles i kortet. |
eventtype |
string/array |
featureadded |
Typen af interaktionen. Gyldige værdier: "featureadded", "featureselected" (tidligere "click") eller "mapclick". Ved "featureselected" aktiveres konfliktsøgningen, når der klikkes på en vektorfeature i kortet. Ved "featureadded" aktiveres konfliktsøgningen, når andre funktioner tilføjer noget til kortet. Det kan for eksempel være søgefunktionen. Dog aktiveres konfliktsøgningen ved søgning på lokale data ved "featureselected", da det, der sker er at featuren vælges i kortet. Ved "mapclick" aktiveres konfliktsøgningen, når brugeren klikker et sted i kortet. |
simplifyInputToPoint |
boolean |
false |
Når der søges, bruges en geometri som input. Nogle services har en begrænsning på, hvordan de kan kaldes. Det kan for eksempel være, at URL'en kan blive for lang, hvis den geometri, der søges med, er stor. Derfor er det muligt at angive "simplifyInputToPoint", der gør, at inputgeometrien konverteres til et punkt, inden det sendes afsted til servicen. |
queryFilter |
boolean/string |
true |
Filtre når et inputobjekt skal aktivere en konfliktsøgning. Det vil typisk være en template, der angives. Læs mere om templates generelt her |
|
Opsætningen til hver enkelt target.
Name | type | default | description |
---|---|---|---|
host | string |
En URL til den service, der skal kaldes. I URL'en vil
Mulige parametre er:
Derudover er det muligt at tjekke på hvilken eventtype der har aktiveret konfliktsøgningen. Det gøres ved at bruge
Hvis konfliktsøgningen aktiveres via søgefeltet, er der også muligt at benytte oplysinger herfra til at danne URL'en med. Herved kan konfliktsøgningen ske ved en kombination af geometri og/eller attributværdier. Det kan f.eks. være at man vil bruge ejerlavskoden fra "dawa" til at lave konfliktsøgningen med. Dette gøres ved at benytte |
|
type | string | Elementet 'type' angiver typen af servicen. Gyldige værdier: |
|
dataType | string | jsonp | Hvordan returneres data. Kan antage en af følgende værdier: "jsonp" og "json". Brug "json", hvis servicen ligger på samme domæne eller leveres med CORS-header. |
paramNames | object |
Det er muligt at angive en række parametre til den URL, der er angivet i "paramNames": { "key": "planid" } |
|
template | string/object | "" |
Her angives en html-skabelon for, hvorledes en eventuel tilhørende tekst skal præsenteres. Attributter fra data kan angives i html-skabelonen med følgende notation <%= attributnavn %> - Læs mere om templates her. |
className | string | Tilføj en speciel CSS class til elementet. Dette kan bruges til at styre hvordan elementet ser ud eller placeres på siden. | |
layers | array | En liste med lag, der skal tændes når konfliktsøningen får et hit. Derudover bruges det til at "mapclick" kun udfører konfliktsøgningen, hvis et eller flere af de angivede lag, er tændte. | |
template_nohit | string/object | "" |
Her angives en html-skabelon for, hvorledes en eventuel tekst skal præsenteres når der ikke er nogen hits. Dette kan bruges til at få fuld kontrol pver hvad der skal vises når konfliktsøgningen ikke finder noget. Hvis angivet, så ignoreres |
nohitmessage | string | Den tekst, der vises, hvis servicen returnerer en tom liste | |
errormessage | string | Den tekst, der vises, hvis servicen fejler | |
nolayermessage | string | Den tekst, der vises, hvis et relateret lag (layers ) ikke er vist
|
Klik på et objekt i kortet, åbner med det samme en side, der er relateret til dette objekt.
Det gør det nemt for brugeren at komme videre til en side, der viser det rigtige indhold. Det er muligt at styre, om linket åbnes i samme vindue eller i et nyt. Hvis 'template_directlink' angives på laget, skal denne template returnere en gyldig URL. Hvis URL'en ikke indeholder http, så bliver det ikke betragtet som en gyldig URL.
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
css | 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. | |
eventtype | string/array | Typen af interaktionen. Gyldige værdier: "click" og/eller "mapclick". Ved "mapclick", søges der også via en service, hvis der er angivet en "features_infohost" på laget. | |
matchRegExp | string | ^http.* | Som stadnard er det kun links, der starter med http, der åbnes. Dette er for at håmndtere fejl i data. Men hvis der er brug for at have f.eks. relative links eller links til en anden protokol, er det muligt at angive et andet udtryk, det styre om det er et link. Hvis man blot vil have at alle matches er et link, angives værdien .* . Dette skal dog kun bruges npr også template_directlink er angivet på laget. |
type | string | Hvordan skal siden åbnes. Gyldige værdier: "" eller "popup". Ved "popup" åbnes siden i et nyt windue (tab), ellers åbnes siden i stedet for den aktuelle side. | |
readProperties | boolean | false | Angiv om denne funktion skal bruge attributterne selvom laget indeholder en template der hedder template_directlink . |
templatesOnly | boolean | false | Angiv om denne funktion kun skal aktiveres på lag, der har en template der hedder template_directlink . |
Giver brugeren mulighed for at tegne i kortet. Dette kan f.eks. bruges i forbindelse med konfliktsøgning og formular, men det kan også være relevant i forbindelse med integration til andre systemer.
Det er muligt at styre hvilken geometritype brugeren skal tegne med samt om man kan skifte mellem f.eks. punkt og linje. Det er muligt at benytte "escape" til at afbryde, "enter" til at afslutte (svarer til at dobbeltklikker i kortet) eller "ctrl+z" til at fortryde sidste klik i kortet.
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
layer | string |
Angiv Laget skal være et helt almindeligt vektorlag. Hvis man blot vil have et tomt lag, kan man med fordel bruge noget i stil med: { "id": "tegnelag", "edit": true, "features": true, "type": "geojson", "data": { "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::25832" } }, "features": [] }, "features_dataType": "json", "features_style": { "namedstyle": "#004" } } Bemærk at laget har | |
clearOnDraw | boolean | false | Skal laget tømmes for objekter hver gang der tegnes et nyt objekt. |
modify | boolean | true | Mulighed for at deaktivere redigering af geometri. Dette kan specielt være hensigtsmæssig når der tegnes enkeltpunkt. |
type | string | Hvilke geometritype skal der tegnes med. Mulige værdier er: Point , LineString og Polygon . |
|
buttons | array |
Hvis brugeren skal kunne skifte mellem hvilken geometritype, der skal tegnes med, er det muligt at angive en liste med knapper, der skal være tilgængelige Til hver knap angives hvilken geometritype knappen skal vises. Derudover er det muligt at angive en tekst, der vises som tooltip på knappen. Hvis der er behov for at skifte ikoner, så kan det gøres med CSS, ved at angive et Det er også muligt at angive en knap af typen "buttons": [ { "text": "Tegn punkt", "type": "Point", "className": "mdi mdi-map-marker-plus" }, { "text": "Tegn linje", "type": "LineString", "className": "mdi mdi-vector-line" }, { "text": "Tegn polygon", "type": "Polygon", "className": "mdi mdi-vector-square" }, { "text": "Afslut", "type": "Complete", "className": "mdi mdi-check" } ] |
Filtrer hvilke objkekter der skal vises i kortet, lister m.m.
Vis f.eks. en eller flere slidere, der kan filtrere hvilke data, der vises i kortet. Filter funktionen benyttes sammen med userfilter
på et vektorlag.
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
css | 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 | string | Tilføj en speciel CSS class til elementet. Dette kan bruges til at styre hvordan elementet ser ud eller placeres på siden. | |
title | string | Gør elementet mere tilgængeligt | |
detach | 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. |
|
combine | boolean | false | Hvis to datasæt filtreres på samme kolonnenavn, så vil det første lag styre præsentationen af slideren, men brugerens ændring på slideren vil medføre filter på alle lag, der har et userfilter med samme navn. |
hideOnLayerChange | boolean | false | Skjul filteret hvis laget slukkes. |
Brug Septimas højdeservice, til at se hvilken vej en væske flyder. Det kan f.eks. bruges til at se hvor, der skal sættes ind, hvis en gylletank lækker eller en tankvogn forulykker. Anvendelsen af denne funktion kræver at man har tilkøbt adgang til Septimas højdeservice..
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
apikey | string | En API-nøgle, som er gyldig til Septimas højdeservice. Denne service kan bruges til mange andre ting, end blot Septima Wiget. Skriv til kontakt@septima.dk for mere information om hvad servicen kan og hvad den koster. | |
raster | string | Navnet på den raster, der skal bruges i servicen. Kontakt Septima for yderligere information | |
layer | string |
Angiv Laget skal være et helt almindeligt vektorlag. Hvis man blot vil have et tomt lag, kan man med fordel bruge noget i stil med: { "id": "tegnelag", "edit": true, "features": true, "type": "geojson", "data": { "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::25832" } }, "features": [] }, "features_dataType": "json", "features_style": { "namedstyle": "#004" } } |
Tilføjer en knap, så det er nemt for brugeren at komme tilbage til det sted hvor kortet startede.
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
title | string | Angiv titlen på knappen. Dette er specielt anvendeligt hvis funktionen bruges på en side hvor sproget er andet end dansk. |
Få kortet vist, så det fylder hele skrærmen.
Kun elementer, der er inden for kortet, vil blive vist. Det vil sige, at infoboksen, søgefelt og lignende vises som normalt, mens for eksempel listevisning ikke bliver vist
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
title | string | Angiv titlen på knappen. Dette er specielt anvendeligt hvis funktionen bruges på en side hvor sproget er andet end dansk. | |
selector | string | Det er muligt at angive en selector , der bestemmer hvilket element, der skal fylde hele skærmen. Bemærk at det kun må være ét element. Hvis selectoren vælger flere elementer, benyttes det første. |
Vis Google Street View for et givent punkt i kortet.
For at benytte denne kontrol kræver det, at man har en API-key fra Google. Dette kan man få ved at gå ind på denne side.
Name | type | default | description | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. | ||||||||||||||||||||||||
css | 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 | string | Tilføj en speciel CSS class til elementet. Dette kan bruges til at styre hvordan elementet ser ud eller placeres på siden. | |||||||||||||||||||||||||
detach | 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. |
|||||||||||||||||||||||||
keepInFullscreen | boolean | false | Benyttes når funktionen er "detached" og funktionen "fullscreen" er inkluderet i konfigurationen. Hvis "keepInFullscreen" sættes til true |
Få vist en simple infoboks når musen føres over objekter i kortet.
Tilføj template_hover
til laget for at bestemme hvad der bliver vist i den simple infoboks.
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
css | 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 | string | Tilføj en speciel CSS class til elementet. Dette kan bruges til at styre hvordan elementet ser ud eller placeres på siden. |
Tilføj indhold til din hjemmeside ud fra data. Det kan bruges til at vise forklaringer, billeder m.m. på siden ud fra indlæste data.
For at benytte denne kontrol kan der på div-elementet tilføjes en attribut, der fortæller hvilken nøgle, der skal benyttes for at hente de ønskede objekter, der ønskes vist i kortet. Angiv div-elementet på denne måde: <div data-widget="..." data-widget-key="2277350"></div>
, hvor data-widget-key
indeholder nøglen. Dette foregår på samme måde som for kommuneplan funktionen.
Det er ligeledes muligt at angive URL-parameteren widget-key
med nøglen (for eksempel widget-key=2277350
).
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
html | string | Angiver den URL, der skal benyttes til at finde et eller flere objekter. I URL'en er det muligt at angive <%= key %> eller <%= filter %> substitueres de af værdier fra parameteren key eller keyfilter. |
|
host | string | Angiver den URL, der skal benyttes til at finde et eller flere objekter. I URL'en er det muligt at angive en template, hvor man eksempelvis skriver <%= key %> , der substitueres de af værdier fra parameteren key. |
|
type | string | geojson | Hvilket format kommer data i. Kan antage en af følgende værdier: "geojson", "esrijson", "json", "djangojson", "datasourcejson" samt "local". Ved "local" søges der i de features, der allerede er tilføjet til kortet. |
dataType | string | jsonp | Hvordan returneres data. Kan antage en af følgende værdier: "jsonp" og "json". Brug "json", hvis servicen ligger på samme domæne eller leveres med CORS-header. |
paramNames | object |
Det er muligt at angive en række parametre til den URL, der er angivet i "paramNames": { "key": "planid" } |
|
template | string/object | "" |
Her angives en html-skabelon for, hvorledes en eventuel tilhørende tekst skal præsenteres. Attributter fra data kan angives i html-skabelonen med følgende notation <%= attributnavn %> - læs mere om templates her. |
template_feature | string | "" |
Her angives en html-skabelon for, hvorledes hver feature, som |
activateButton | object |
Aktivér HTML'en 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": "" } |
|
reloadInterval | number | Genindlæs data med et fast interval. Intervallet angives i millisekunder og kan f.eks. bruges til at vise "live" data. |
Vis et billede på din hjemmeside. Det kan f.eks. bruges til at vise en generel signaturforklaring.
Samme funktionalitet kan opnås gennem funktionen HTML, hvor der er flere muligheder
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
detach | 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. |
|
url | string | URL til billedet. | |
altText | string | Alternativ tekst, der vises hvis billedet ikke hentes korrekt. Bruges også i forbindelse med tilgængelighed, så en skærmlæser kan fortælle brugeren hvad billedet viser. | |
activateButton | object |
Aktivér billedet 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": "" } |
Få vist en infoboks når brugeren klikker på et objekt i kortet.
Kontrol, der styrer, om der skal være info på data, og om det skal vises, når musen føres over data eller ved at klikke på data. Tilføj blot template_info
til laget for at bestemme indholdet af infoboksen.
I sin template er det muligt at tilføje forskellige funktioner ved at angive en attribut på et HTML-element. Det kan f.eks. være data-widget-toggle="udvid"
der gør at klasses på infoboksen skifter til "udvid" når der klikkes på elementet. Hvis man angiver data-widget-close="true"
, så lukkes infoboksen, når der klikkes på dette element. Hvis data-widget-carousel="true"
tilføjes, kan der oprettes en karrusel, der f.eks. kan bruges til at vise billeder. Dette kan dog kræve lidt CSS kendskab.
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig fjerne en kontrol. |
css | 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 | string | Tilføj en speciel CSS class til elementet. Dette kan bruges til at styre hvordan elementet ser ud eller placeres på siden. | |
detach | 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. |
|
eventtype | string/array | Typen af interaktionen. Gyldige værdier: "hover", "click", "featureselected" eller "mapclick". Ved "mapclick", søges der også via en service, hvis der er angivet en "features_infohost" på laget. Ved "featureselected" kommer infoboksen frem hvis et objekt vælges via f.eks. listevisningen | |
type | string | cloud | Hvordan skal info vises. Gyldige værdier: "popup" og "cloud". |
closeButton | boolean | false | Vis en lukknap i infoboksen. Når brugeren klikker på knappen, lukkes boksen og markeringen fjernes. Bemærk at denne funktion pt. ikke er hensigtsmæssig hvis man samtidig har sat multifeature til mere end 1 . |
autoPan | boolean | true | Kan benyttes ved "type": "cloud" . Skal kortet automatisk panorere så infoboksen er inden for kortets udsnit? |
scrollTo | boolean | true | Kan benyttes ved "type": "popup" samt hvor infoboksen er detached . Skal browseren scrolle til infoboksen uden for kortet, når et objekt vælges i kortet? |
multifeature | integer | 1 | Hvis der ligger flere vektorfeatures i samme punkt, er det som default kun den øverste features, der rammes. Ved at angive "multifeature", er det muligt at bestemme hvor mange features, der skal vises info på. Hvis der er flere features, listes de over hinanden i infoboksen. Det er en god idé at begrænse antallet ved at sætte denne parameter til eksempelvis 5. Herved er det kun de 5 øverste features, der vises information for. |
offset | array | [0,0] | Kan benyttes ved "type": "cloud" . Hvordan skal infoboksen placeres i forhold til den feature, man har klikket på. Default [0,0] er lidt over featuren. Det første tal er i x-aksens retning, mens det andet tal er i y-aksens retning. Det er også muligt at angive template_info_offset på et lag, hvis dette offset skal være forskelligt fra lag ti lag. |
service | object/array | Et objekt, der indeholder "url" og "type" med henholdsvis url'en, der skal kaldes ved "mapclick", og hvilken type servicen er. Typen kan pt være "spatialsuite", men på sigt kunne det være andet såsom "WFS". | |
zoomOptions | object | Hvis angivet, så zoomes der til objektet når det er valgt. Det er muligt at angive, hvordan der skal zoomes til objektet i kortet. |
Hent oplysninger direkte fra Plandata.dk og få oplysingerne vist så de er til at forstå for brugeren.
For at benytte denne kontrol skal der på div-elementet tilføjes en attribut, der fortæller hvilket planid, der ønskes vist. Angiv div-elementet på denne måde: <div data-widget="..." data-widget-key="2277350"></div>
, hvor data-widget-key
indeholder planid.
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
css | 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. | |
detach | 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. |
|
filter | string | Angiv et alternativt CQL filter, der benyttes til at hente den enkelte kommuneplanramme. Default filter er: planid=<%= key %> , hvor <%= key %> bliver erstattet af det valgte planid |
|
layer | string | Navnet på laget, der indeholder kommuneplanrammen. Default er theme_pdk_kommuneplanramme_vedtaget_v |
|
key | string | Alternativ måde at angive hvilken kommuneplanramme, der skal vises. Angiv et planid her, og det vil blive benyttet, hvis der ikke er angivet data-widget-key på på div-elementet |
|
features_style | object | Hvordan skal objekterne styles i kortet, når de er fundet | |
mode | string | readable | Teksten for planen kan vises på flere måder. Som standard vises en prosatekst, der er dannet ud fra attributter på planen. Her er mode angivet med værdien readable . Hvis man gerne vil have oplysingerne vist som en læsbar liste, angives værdien readablelist . |
urlParamNames | object |
Det er altid muligt at angive hvilken kommuneplanramme, der skal vises, ved at kalde med URL-parameteren "urlParamNames": { "mode": "mode", "key": "planid", "layer": "kommuneplanlag" } Hvis parameteren ikke findes, benyttes værdien fra På samme måde er det muligt at angive hvilket lag fra Plansystem, der skal hentes data fra. Dette gøres tilsvarende med Hvis parameteren ikke findes, benyttes værdien fra Tilsvarende er det muligt at angive hvilket "mode", data skal vises i. Dette gøres med parameteren Hvis parameteren ikke findes, benyttes værdien fra |
Almindelig lagvælger med mulighed for at tilføje grupper m.m.
Kontrol, der gør at brugeren kan tænde og slukke for de enkelte lag. Derudover vises signaturen for vektorlagene
Hvis man gerne vil bruge et specielt ikon for et lag i lagvælgeren, er det muligt at angive legendConfig
på laget. Herved kommer ikonet ud for lagets navn i lagvælgeren:
"legendConfig": {
"icon": "https://septima.dk/widget/img/ortofoto.png"
}
"legendConfig": {
"svgIcon": "<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 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"
}
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 bruger Spatial Suite, så er der nogle lidt mere avancerede muligheder med signaturforklaringen. Det betyder bl.a. at signaturforklaringen er dynamisk afhængig af zoomneveau m.m. For at bruge signaturen fra Spatial Suite, tilføjes følgende til konfigurationen til laget. Derudover skal "id" på laget være navnet på temaet, der skal vises signatur for. Det er dog en forudsætning af man har Widget modulet til Spatial Suite.
"legendConfig": {
"type": "sps",
"host": "https://sps-demo.septima.dk",
"profile": "septima"
}
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>"
}
Herunder findes en beskrivelse af de enkelte egenskaber, der kan sættes på lagvælgeren.
Name | type | default | description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
css | 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 | string | Tilføj en speciel CSS class til elementet. Dette kan bruges til at styre hvordan elementet ser ud eller placeres på siden. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
title | string | Gør elementet mere tilgængeligt | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
detach | 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. |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
keepInFullscreen | boolean | false | Benyttes når funktionen er "detached" og funktionen "fullscreen" er inkluderet i konfigurationen. Hvis "keepInFullscreen" sættes til true |
features_type
. Se hvilke typer det kan være under layerSkift baggrundskort i stil med Google Maps.
Knap, der gør, at brugeren kan skifte (toggle) mellem forskellige baggrundskort, der er angivet i konfigurationen. For at et lag kommer med i denne knap, skal der på laget angives legendConfig
hvor icon
er angivet:
"legendConfig": {
"icon": "https://septima.dk/widget/img/ortofoto.png"
}
Derudover er det vigtigt at sætte visible
til true
på det lag, der skal vises fra start og false
for det lag, der skal være skjult fra start.
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
css | 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 | string | Tilføj en speciel CSS class til elementet. Dette kan bruges til at styre hvordan elementet ser ud eller placeres på siden. | |
layers | array | all | Vælg hvilke lag, der skal vises i lagvælgeren. Det muligt at angive et array af id'er på udvalgte lag, der skal vises. Dette kræver, at der er angivet et id på lagene. For at vælge to specifikke lag angives det på denne måde: ["lag1","lag2"] . Som default vises alle lag, der har et id samt legendConfig . |
excludeLayers | 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"] . Som default vises alle lag, der har legendConfig . |
Zoom til data. Det kan f.eks. bruges til at vise et kort, der er zoomet ind på en bestemt børnehave. Men det kan også bruges til at zoome ind til et bestemt område i kortet ud fra et ID.
Få kortet til automatisk at vise et bestemt objekt i kortet. Det kan for eksempel bruges i forbindelse med visning af et kort for et bestemt område på en hjemmeside.
For at benytte denne kontrol kan der på div-elementet tilføjes en attribut, der fortæller hvilken nøgle, der skal benyttes for at hente de ønskede objekter, der ønskes vist i kortet.
Angiv div-elementet på denne måde: <div data-widget="..." data-widget-key="2277350"></div>
hvor data-widget-key
indeholder nøglen.
Dette foregår på samme måde som for kommuneplan funktionen.
Det er ligeledes muligt at angive URL-parameteren widget-key
med nøglen (for eksempel widget-key=2277350
)
Hvis URL-parametrene x
og y
eller wkt
er angivet, benyttes det som geometri til funktionen. Derudover kan minResolution
angives. Herved er det nemt at få vist en widget ud fra en koordinat. Brug parameteren srs
hvis geometrien er i en anden projektion.
Tilsvarende kan div-elementet indeholde attributterne som f.eks. <div data-widget="..." data-widget-x="12.5705286" data-widget-y="55.6770083" data-widget-srs="EPSG:4326"></div>
og få samme funktionalitet.
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
host | string | Angiver den URL, der skal benyttes til at finde et eller flere objekter. I URL'en er det muligt at angive en template, hvor man for eksempel skriver <%= key %> , der substitueres de af værdier fra parameteren key. |
|
type | string | geojson | Hvilket format kommer data i. Kan antage en af følgende værdier: "geojson", "esrijson", "json", "djangojson", "datasourcejson" samt "local". Ved "local" søges der i de features, der allerede er tilføjet til kortet. |
dataType | string | jsonp | Hvordan returneres data. Kan antage en af følgende værdier: "jsonp" og "json". Brug "json", hvis servicen ligger på samme domæne eller leveres med CORS-header. |
paramNames | object |
Det er muligt at angive en række parametre til den URL, der er angivet i "paramNames": { "key": "planid" } |
|
requiredParams | array |
Ved at angive en liste med påkrævede parametre, der skal være angivet for at servicen kaldes, kan man begrænse hvad der bliver kaldt med. Dette er et eksempel, der kræver at "planid" skal være angivet som parameter: "requiredParams": ["planid"] |
|
template | string | "" |
Her angives en html-skabelon for, hvorledes en eventuel tilhørende tekst skal præsenteres. Attributter fra data kan angives i html-skabelonen med følgende notation <%= attributnavn %> - Læs mere om templates her. |
eventtype | string | For at aktivere locate når der klikkes på en features i kortet, sættes eventtype til click . Samtidig skal der på laget, der klikkes på, være angivet template_locate . Denne template bruges til at hente værdien fra det objekt der er klikket på. Værdien bruges så til at udføre en helt almindelig locate. |
|
pageTitle | string |
Her angives en skabelon for, hvad titlen på siden skal skiftes til. Attributter fra data kan angives i skabelonen med følgende notation <%= attributnavn %> - Læs mere om templates her. |
|
zoomOptions | object | Hvis angivet, så zoomes der til objektet når det er valgt. Det er muligt at angive, hvordan der skal zoomes til objektet i kortet. | |
features_style | object | Hvordan skal objekterne styles i kortet, når de er fundet | |
input | object | Giv brugeren mulighed for at indtaste en vilkårlig geometri og få den vist i kortet. Det kan være WKT, GeoJSON, en koordinat eller en BBOX. |
Zoom til brugerens aktuelle GPS position. Kan bruges til blot at flytte kortet til et relevant sted, men positionen kan også bruges til at foretage en konfliktsøgning.
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
zoomOptions | object | Hvis angivet, så zoomes der til objektet når det er valgt. Det er muligt at angive, hvordan der skal zoomes til objektet i kortet. | |
features_style | object | Hvordan skal objekterne styles i kortet, når de er fundet. Objektet indeholder oplysninger om nøjagtighed, hastighed, højde of retning. Det kan bruges til at style markeringen efter. Parametrene er: accuracy , speed , alltitude og heading |
|
onStart | boolean | true | Skal der zoomes ind til aktuelle position ved opstart af kort. |
onClick | boolean | false | Skal der tilføjes en knap, der giver brugeren mulighed for at zoomes ind til aktuelle position, når det passer ham. |
silent | boolean | false | Skal positionen bruges til at aktivere andre funktioner. I nogle tilfælde kan aktuelle position forstyre andre funktioner, og det kan derfor være nødvendigt at deaktivere handlingen, men stadig vise positionen i kortet. |
className | string | Bruges sammen med "onClick" til at styre hvilket ikon, der skal vises på knappen. | |
title | string | Bruges sammen med "onClick" til at titlen på knappen. Dette er specielt anvendeligt hvis funktionen bruges på en side hvor sproget er andet end dansk. | |
distance | number | 0 | Hvor meget skal man bevæge sig før prikken i kortet skal flytte sig. Dette er spcielt anvendeligt når aktuelle position benyttes i forbindelse med f.eks. konfliktsøgning eller find nærmeste. |
follow | boolean | false | Skal kortet følge med når brugeren bevæger sig. Hvis brugeren bevælger sig uden for det viste kortudsnit, centreres kortet om brugerens position. Herved flytter kortet sig ikke hele tiden, men først når man kommer for langt væk. |
paramNames | object |
Det er muligt at angive en række parametre, der styre hvordan funktionen konfigureres. Pt. er det muligt at angive værdien for "paramNames": { "onClick": "location.onClick", "onStart": "location.onStart" } |
Tilføj et måleværktøj til kortet, så det er muligt at måle afstande og arealer.
Med dette værktøj giver du brugeren mulighed for at måle afstande og arealer ved at tegne linjer eller flader i kortet. Du kan selv styre hvordan resultatet skal vises via en template. Det er muligt at benytte "escape" til at afbryde, "enter" til at afslutte (svarer til at dobbeltklikker i kortet) eller "ctrl+z" til at fortryde sidste klik i kortet.
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
template | string | "" |
Her angives en html-skabelon for, hvorledes målene skal præsenteres for brugere. Målene kan ses ved at tilføje Fælgende parametre kan benyttes i templaten: { "vertices": 4, "area": 108178.75732421875, "last": 1231.1360836260728, "length": 2966.6013881474846, "formatted": { "distance": "2,97", "distanceUnit": "km", "area": "108179", "areaUnit": "m2", "html": "Areal: 108179 m2" } } |
modify | boolean | false | debug kan bruges i forbindelse med opsætningen og gør det muligt at se hvad man har adgang til i sin template . Når debug er sat til true, så kommer alle tilgængelige informationer ud i konsollen i browseren. |
debug | boolean | false | debug kan bruges i forbindelse med opsætningen og gør det muligt at se hvad man har adgang til i sin template . Når debug er sat til true, så kommer alle tilgængelige informationer ud i konsollen i browseren. |
features_style | object | Kan angives hvis man gerne vil have at det tegnede i kortet skal se anderledes ud. | |
buttons | array |
Angiv én eller to knapper, der aktivere måleværktøjet. Den ene knap er til at måle afstande med mens den anden er til at måle arealer med. Til hver knap angives hvilken geometritype knappen skal aktivere. Brug "buttons": [ { "text": "Mål afstand", "type": "LineString", "className": "mdi mdi-vector-line" }, { "text": "Mål areal", "type": "Polygon", "className": "mdi mdi-vector-square" } ] |
Skal brugeren aktivere kortet inden brug? Dette er specielt hensigtsmæssigt i forbindelse med scroll på mobile enhender, men også når brugeren scroller med musehjulet. Her vil denne funktion forhindre, at der hovedløst zoomes eller panoreres i kortet.
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
css | 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 | string | Tilføj en speciel CSS class til elementet. Dette kan bruges til at styre hvordan elementet ser ud eller placeres på siden. | |
activateTitle | string | Aktiver kort | Med activateTitle er det muligt at styre hvilken title, der bliver vist på knappen når kortet er inaktivt. |
deactivateTitle | string | Deaktiver kort | Med deactivateTitle er det muligt at styre hvilken title, der bliver vist på knappen når kortet er aktivt. |
activateText | string | Aktiver kortet | Med activateText er det muligt at styre hvilken tekst, der bliver vist på knappen når kortet er inaktivt. |
onlyOnce | boolean | false | Skal knappen forsvinde når brugeren først har aktiveret kortet. Herved kan kortet ikke deaktiveres igen. |
Vis et oversigtskort for det aktuelle kortudsnit.
Name | type | default | description | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. | ||||||||||||||||
css | 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 | string | Tilføj en speciel CSS class til elementet. Dette kan bruges til at styre hvordan elementet ser ud eller placeres på siden. | |||||||||||||||||
detach | 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. |
|||||||||||||||||
keepInFullscreen | boolean | false | Benyttes når funktionen er "detached" og funktionen "fullscreen" er inkluderet i konfigurationen. Hvis "keepInFullscreen" sættes til true |
Udskriv kortet som PDF.
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
title | string | Tooltip på knappen. | |
templates | array | [] |
Her angives hvilke formater, der skal kunne udskrives i. P.t. er det kun muligt at angive ét format. Som default oprettes der et PDF-dokument med kortet. I "templates": [{ "name":"Udskriv i A4 liggende", "orientation": "landscape", "format": "a4", "ppi": 150, "map_height": 210, "map_width": 297 }] Hvis man har en service, der kan generere en udskrift af kortet, er dette også muligt. Det kan f.eks. være QGIS Server, Geoserver eller Spatial Suite. Det kræver dog, at servicen indeholder alle lag, der skal udskrives: "templates": [{ "name": "Udskriv i A4 liggende", "map_height": 187, "map_width": 277, "url": "https://kort.haderslev.dk/spatialmap?page=print.pdf.new&mapheight=&mapwidth=&map_size= &mapext=&layers=&opacities=1&scalebarname=pdf&pageformat=a4&orientation=landscape&map_resolution=200&printscale=8&pdfprintlegend=true&printformats=a4_landscape&map_angle=360&ppi=200&titleblock=true©righttext=&date=&profile=widget_kp17" }] |
Find de nærmeste objekter i kortet ud fra f.eks. en adresse, brugerens aktuelle position eller et klik i kortet.
For at styre hvad der bliver vist i listem med nærmeste, tilføjes template_route
på laget. Her har man adgang til alle atributter på data. Det kan bruges til f.eks. at vise navnet på børnehaven m.m.
Ud over navnet vises afstanden og tiden. Hvis man gerne vil styre hvordan afstand/tid vises, er det muligt ved at tilføje template_route_time
. Her har man adgang til dist
samt time
, så man kan vise præcist hvad man har brug for.
Name | type | default | description | ||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. | ||||||||||||||||||||||||||||||||||||
css | 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 | string | Tilføj en speciel CSS class til elementet. Dette kan bruges til at styre hvordan elementet ser ud eller placeres på siden. | |||||||||||||||||||||||||||||||||||||
detach | 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. |
|||||||||||||||||||||||||||||||||||||
keepInFullscreen | boolean | false | Benyttes når funktionen er "detached" og funktionen "fullscreen" er inkluderet i konfigurationen. Hvis "keepInFullscreen" sættes til true |
Beregn ruter mellem to punkter i kortet. Det er muligt at klikke i kortet eller søge et punkt via søgefeltet.
Name | type | default | description | ||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. | ||||||||||||||||||||||||||||
css | 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 | string | Tilføj en speciel CSS class til elementet. Dette kan bruges til at styre hvordan elementet ser ud eller placeres på siden. | |||||||||||||||||||||||||||||
detach | 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. |
|||||||||||||||||||||||||||||
keepInFullscreen | boolean | false | Benyttes når funktionen er "detached" og funktionen "fullscreen" er inkluderet i konfigurationen. Hvis "keepInFullscreen" sættes til true |
Søgning på flere ting, herunder adresser, stednavne, lokale data m.m. Funktionen bruger Septima Search, og alt hvad der kan søges i via Septima Search, kan der søges i her.
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
css | 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 | string | Tilføj en speciel CSS class til elementet. Dette kan bruges til at styre hvordan elementet ser ud eller placeres på siden. | |
detach | 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. |
|
displaytext | string | Angiver "placeholder/ledetekst"-teksten i søgefeltet. | |
noResults | string | Ingen resultater | Angiver den tekst, der skal vises når der ikke er fundet noget. |
showSearchText | boolean | false | Skal det valgte vises i inputfeltet? Dette gør det nemmere at forstår hvad der er valgt, men samtidigt er det sværere at søge videre efter der er valgt noget. |
selectInfo | boolean | false | Skal den valgte adresse vises under søgeboksen med ikon. Herved er det muligt at se, hvad det er, der er fundet i kortet. |
features_style | object | Hvordan skal objekterne styles i kortet, når de er fundet | |
minResolution | number | 3.2 | Hvor langt skal der maksimalt zoomes ind til. Dette tal angives som antallet af meter, hver pixel er i dette zoomniveau. |
preventZoom | boolean | false | Skal zoom deaktiveres. |
blankBehavior | string | none | Skal der søges allerede, når brugeren stiller sig i søgefeltet? Default er none , hvorved der ikke søges, før brugeren skriver noget i søgefeltet. Hvis man angiver search , så søges der med det samme. |
charLimit | number | 1 | Angiv antallet at tegn, der skal indtastes i søgefeltet før der søges. Dette kan f.eks. bruges til at forhindre at søgningen går i gang så snart der er angivet et enkelt tegn. |
silent | boolean | false | Skal valget bruges til at aktivere andre funktioner som f.eks. Konfliktsøgning eller Find nærmeste. |
driver | array | Angiver en liste af drivere, der skal søges i. | |
autofocus | boolean | false | Skal søgefeltet være aktivt når siden loades. Dette kan være en fordel, men også en ulempe for brugeren. Derfor skal det nøje overvejes om denne parametre skal sættes. |
clearOnMapclick | boolean | false | Skal markeringen fra en søgning fjernes når der klikker i kortet. |
paramNames | object |
Det er muligt at angive en række parametre, der styre hvordan søgefeltet opfører sig. Pt. er det muligt at angive hvilken hjælpetekst "paramNames": { "autofocus": "autofocus", "displaytext": "displaytext" } |
Opsætningen til hver enkelt søgning.
Name | type | default | description |
---|---|---|---|
type | string | Søg i adresser (address), CVR (cvr), Plandata.dk (plan), Septima Search Service (s3), S4 index (s4), GeoSearch fra Kortforsyningen (geosearch) eller i objekter i kortet (local) | |
minResolution | number | 3.2 | Hvor langt skal der maksimalt zoomes ind til. Dette tal angives som antallet af meter, hver pixel er i dette zoomniveau. |
options | object |
Afhængig af hvad der søges i, skal der angives en række parametre: Til alle typer er det muligt at angive parameteren Til "type":"dawa" eller "type":"address" kan angives med parameteren "kommunekode": "101"Kommunekoden kan være en liste med kommunekoder, f.eks.: "kommunekode": "101,161,163" Til "type":"geosearch" er det muligt at angive "kommunekode" på samme måde som ved "type":"dawa". Derudover kan der angives "targets", der er et array af, hvad der skal søges i: "targets": ["postdistrikter","matrikelnumre"]Den fulde liste af targets kan ses på Kortforsyningens hjemmeside. Dog er det ikke muligt at anvende "adresser", "stednavne" og "stednavne_v2", da der er specelle drivere til det. Til "type":"stednavn" kan der angives parameteren "kommunekode" på samme måde som ved "type":"dawa". Med denne type søges der i de officielle danske stednavne. Til "type":"local" angives parametrene "singular", "plural", "displaynameProperty" samt "descriptionProperty". Til "type":"s3" angives parametrene "host", samt "service". Til "type":"s4" angives parametrene "host", samt "datasources". Til "type":"cvr" er det muligt at angive "kommunekode" på samme måde som ved "type":"dawa". Til "type":"plan" er det muligt at angive "kommunekode" på samme måde som ved "type":"dawa". Til "type":"arcgis" angives parametrene "catalogUrl", "serviceName" samt "layers". |
|
crs | string | EPSG:25832 | Servicens koordinatreferencesystem defineret i EPSG, eksempelvis: EPSG:25832 |
geometryProxy | object |
Brug det fundet objekt (adresse) til at finde den geometri, der rent faktisk skal benyttes til f.eks. at markere i kortet. Både geometrien fra det fundet objekt samt oplysnignerne fra objektet, kan bruges i forbindelse med "host". "geometryProxy" skal være et objekt, der indeholder "host" samt "type" i stil med dette: "geometryProxy": { "host": "//myservice.dk/gis/rest/.../query?...&where=wkt=POINT(%20)", "type": "esrijson" } Det er muligt at angive |
|
silent | boolean | false | Skal valget af denne driver bruges til at aktivere andre funktioner som f.eks. Konfliktsøgning eller Find nærmeste. |
layer | string/object | "" |
Her angives id'et på det lag, der skal tændes når et objekt af denne type vælges i søgefeltet. Hvis flere lag skal tændes, angives en kommasepareret liste med id'er. Det er også muligt at angive en skabelon, der bruger det valgte objekts attributter til at danne lagnavnet med. Attributter fra data kan angives i skabelonen med følgende notation <%= attributes.kategori %> - læs mere om templates her. |
iconURI | string | Bestem selv hvilket ikon, der skal vises i søgefeltet. Vædrien skal være en URI. Det betyder at billedet skal skrevet som tekst i stil med "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PS..." . |
|
popup | object |
Vis en popup for det markerede objekt. "popup" skal være et objekt, der kan indeholder "delay", "template" samt "geometryOptions" (som beskrevet under features_style) i stil med dette: "popup": { "delay": 1500, "className": "widget-map-popup" "template": " |
template_search_title
og template_search_description
til laget samt fjern "displaynameProperty" fra konfigurationen til funktionen.Få et simpelt kort med markering af en adresse eller en koordinat.
For at benytte denne kontrol, kan der på div-elementet tilføjes en attribut, der fortæller hvilken adresse eller koordinat, der skal vises i kortet.
Angiv div-elementet på denne måde: <div data-widget="..." data-widget-address="frederiksberggade 19, 1459"></div>
hvor data-widget-address
indeholder en adresse.
Der er også muligt at angive en koordinat med data-widget-point="724472,6175908"
. Hvis der tilføjes data-widget-text="Septima"
vil punktet få tilføjet en attribut, der hedder "text" og den vil indeholde værdien. Herved kan man bruge det sammen med sin template til at få vist f.eks. en infoboks. Hvis det er en adresse, der er angivet, vil alle attributter fra DAWA være tilgængelig. Det er f.eks. vejnavn, husnr m.fl.
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
css | 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. | |
zoom | number | 10 | Hvor langt skal der zoomes ind i kortet |
zoomStyle | string | slow | Angiver, hvordan der skal zoomes hen til objektet. Ved none vises kortet blot. Ved slow zoomes der langsomt hen til objektet (ca. 2 sekunder), fast zoomer hurtigt (ca. 1 sekund), mens faster zoomer meget hurtigt (ca 0,5 sekunder). |
features_style | object | Hvordan skal punktet styles i kortet. Det er for eksempel muligt at angive sti til ikon | |
layer | string | Vedat angive et ID på et lag, bliver punktet tilføjet til laget i stedet for et midlertidigt lag. Herved er der flere muligheder for at kombinere det med andre funktioner |
Fortæl en historie med dine data. I stedet for blot at vise en masse prikker på et kort, kan man med denne funktion guide brugeren gennem oplysingerne.
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
css | 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 | string | Tilføj en speciel CSS class til elementet. Dette kan bruges til at styre hvordan elementet ser ud eller placeres på siden. | |
detach | 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. |
|
text | string | Den tekst, der bliver vist til at starte med. | |
zoomOptions | object | Hvis angivet, så zoomes der til objektet når det er valgt. Det er muligt at angive, hvordan der skal zoomes til objektet i kortet. |
Sammenlign to lag i kortet vha. "Swipe" funktionen..
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
css | 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. | |
layers | array | Angiv en liste med id'er på udvalgte lag, der skal sammenlignes. Dette kræver, at der er angivet et id på lagene. Der skal angives to specifikke lag på denne måde: ["lag1","lag2"] . |
Vis data som en liste. Det er specielt anvendeligt hvis man gerne vil gøre sine data tilgængelig for synsbesværede og andre handicappede. Hvis listen vises sammen med et kort, er der interaktion mellem listen og kortet. Det betyder at når brugeren klikker på et objekt i kortet, scolles der til objektet i listen og der kommer en markering i listen. Hvis man klikker i listen, zoomes der til objektet i kortet.
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
css | 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. | |
title | string | Gør elementet mere tilgængeligt | |
detach | 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. |
|
showlist | boolean | true | Kan sættes til false hvis funktionalitet omkring listevisningen vil bibeholdes, men selve listen skal være skjult. Det er f.eks. til download af CSV fil. |
showheader | boolean | false |
Skal der vises en overskrift for listen. Hvis der er flere lister, kommer der en overskrift for hver liste. Hvis listen er tom, skjules overskriften. Som default vises lagets "navn" (der der er angivet i "name"). Hvis man ønsker en alternativ overskrift, kan det styres ved at tilføje Hvis man ønsker at få vist antallet af rækker i listen i overskriften, skal man blot tilføje et HTML-element med |
showheaderTemplate | string |
Hvis |
|
showheaderCollapsed | boolean |
Kan bruges når |
|
showheaderCollapsedAccordion | boolean | false |
Kan bruges når |
updateHeaderOnFilterChange | boolean | false |
Kan bruges når |
downloadCSV | boolean/string | false | Kan bruges når showheader er true . Vis en download-knap i overskriften for en liste. Når brugeren trykker på knappen, så hentes data som en CSV-fil. Hvis downloadCSV er en tekst, så vil teksten blive vist på knappen i stedet for det ikon, der default vises. |
download | object |
Download funktionen gør det muligt at hente data som CSV eller PDF (tabelform) og konfigureres som et objekt med forskelige parametre. Hvis man blot vil have en knap, der downloader data som CSV, så tilføjes: "download": { "type": "csv", "button": true } Kanppen tilføjes i overskriften over listen og kræver derfor at Men det er også muligt at angive:
"download": { "button": true, "filename": "liste", "format": "csv", "seperator": ",", "onLoad": false } |
|
zoomOnClick | boolean | true | Skal der zoomes i kortet, når man klikker i listen (kun aktuel, når kortet er vist). |
zoomOnMapClick | boolean | false | Skal der zoomes i kortet, når man klikker på en feature i kortet. |
mapFilter | boolean | false | Skal listen kun vise de features, der er synlige i kortet (kun aktuel, når kortet er vist). |
emptyText | string | Den tekst, der vises hvis listen er helt tom. Som default vises der ikke noget og listen er ofte også altid synlig. Men hvis man bruger filter eller mapFilter så kan der opstå situationer hvor listen ikke viser noget. |
|
clickToggle | boolean | false | Når man klikke på et element, der allerede er valgt i listen, så fravælges elementet i listen og i kortet. |
scrollToMap | boolean | false | Når man klikke på et element i listen, så scrolles der til kortet, så man kan se, hvad der er klikket på. Dette er specielt anvendeligt, når listen ligger under eller over kortet. |
tabindex | boolean | false | Sæt til true hvis man skal kunne tabulere sig frem og tilbage i listen. Dette gør at der kommer en "outline" på listeelementet når det kommer i fokus. Dette kan gøre listen mere tilgængelig. |
zoomOptions | object | Hvis angivet, så zoomes der til objektet når det er valgt. Det er muligt at angive, hvordan der skal zoomes til objektet i kortet. | |
countSelector | string | Angiv en selector, der vælger det element, hvor det samlede antal viste rækker i tabellen, skal sættes ind i. Det kan f.eks. være "countSelector": "#count-placeholder" . |
Giver brugeren mulighed for at indlæse egne data i kortet. Dette kan f.eks. bruges hvis man vil se hvordan egne data ser ud..
Det er muligt at styre hvilken om data skal slettes i kortet hver gang der tilføjes data som om der skal zoomes til data efter indlæsningen. Det er muligt at uploade Flatgeobuf (.fgb), GeoJSON (.geojson) og Shapefiler (.zip). Bemærk at shapefiler skal være en zip-fil, der indeholder en .shp, .dbf osv.
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
layer | string |
Angiv Laget skal være et helt almindeligt vektorlag. Hvis man blot vil have et tomt lag, kan man med fordel bruge noget i stil med: { "id": "tegnelag", "features": true, "type": "geojson", "data": { "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::25832" } }, "features": [] }, "features_dataType": "json", "features_style": { "namedstyle": "#004" } } |
|
clear | boolean | false | Skal laget tømmes for objekter hver gang der indlæses et nyt datasæt. |
zoomOptions | object | Hvis angivet, så zoomes der til data når de er indlæst. Det er muligt at angive, hvordan der skal zoomes til objektet i kortet. |
Zoom til data i kortet. Det er f.eks. hvis data ændrer sig, så vil denne funktion sikre, at startudsnittet altid er det rigtige, når kortet vises.
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidigt at fjerne en kontrol. |
zoomStyle | string | slow | Angiver, hvordan der skal zoomes ind. Ved none vises kortet blot. Ved slow zoomes der langsomt hen til objektet (ca. 2 sekunder), fast zoomer hurtigt (ca. 1 sekund), mens faster zoomer meget hurtigt (ca. 0,5 sekunder). |
buffer | number | 1.2 | Angiver, hvor meget luft der mindst skal være omkring de features, der zoomes til. Buffer angives som et forhold; det vil sige, at 1.2 lægger 20 % til, mens 1.5 lægger 50 % til. |
minResolution | number | 3.2 | Hvor langt skal der maksimalt zoomes ind til. Dette tal angives som antallet af meter, som hver pixel er i dette zoomniveau. |
zoom | number | 1 | Zoom ind til et specifikt zoomniveau, hvor 0 er helt ude, mens 16 er meget langt inde. Hvis den ikke er angivet, vil en af ovenstående vinde, og zoomniveauer vil ikke automatisk blive 1. |
layers | array | Angiv en liste med vektorlag, der skal zoomes til. De specifikke lag angives på denne måde: ["lag1","lag2"] . Hvis ikke angivet, zoomes der til et tilfældigt vektorlag, hvis der er flere. |
|
persist | boolean | false | Skal zoomet gemmes som default zoom, så det kan bruges i f.eks. "Zoom til startudsnit". |
Det er muligt tilføje sin egen "control", der kan være udviklet til noget helt specielt. Herved er det muligt at referere til denne "control" i konfigurationen som enhver anden "control". Dog er det et krav at konfigurationen indeholder en egenskab, der hedder path
med stien til det sted, hvor der ligger en js-fil, der har det samme navn som kontrollen (med stort begyndelsesbogstav). Ellers kan man benytte de normale egenskaber, som de fleste andre "controls" har samt de egenskaber, som den selv bestemmer.
Name | type | default | description |
---|---|---|---|
disable | boolean | false | Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol. |
css | 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. | |
detach | 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. |
|
path | string | Ved at sætte "path": "http://host/controls/" indlæses kontrollen som enhver anden kontrol. Det er vigtigt, at der under denne sti ligger en js-fil med samme navn som kontrollen (dog med stort begyndelsesbogstav). På denne måde kan man have koden til en kontrol liggende et helt andet sted. |
|
??? | ??? | Det er muligt for at have egne egenskaber, der kan bruges på lige fod med de andre. |
På mange funktioner er det muligt at angive zoomOptions
, der bruges til at styre hvordan funktionen zoomer i kortet. Herunder er beskrevet, hvilke parametre der kan angives i zoomOptions
:
"zoomOptions": {
"zoomStyle": "slow",
"minResolution": 3.2,
"preventZoom": false,
"buffer": 1.2,
"panOnly": false
}
Name | type | default | description |
---|---|---|---|
zoomStyle | string | slow |
Ved |
minResolution | number | 3.2 | Hvilken opløsning der skal zoomes til. Tallet er antallet af meter pr. pixel. |
activateZoom | boolean | true | Skal zoom aktiveres. |
preventZoom | boolean | false | Skal zoom deaktiveres. |
buffer | number | 1.2 | Hvor meget luft skal der være omkring et objekt, der zoomes til. Hvis 1.2 angives, betyder det at der lægges 20% til omkring objektet. |
panOnly | boolean | false | Skal der kun panoreres i kortet og ikke ændres zoomniveau. |
persist | boolean | false | Skal zoomet gemmes som default zoom, så det kan bruges i f.eks. "Zoom til startudsnit". |