Brug Septima Widget som API når du har brug for et kort i din applikation
Installer npm pakke med:
npm install septima-widgetapi
Importer WidgetAPI
i din applikation:
import WidgetAPI from 'septima-widgetapi'; const widget = new WidgetAPI('#map', { "map": { "view": { "zoomLevel": 10, "x": 724413, "y": 6175985 }, "layer": [ { "namedlayer": "#dk_standard", } ] } });
Alternativt kan du tilføj scriptet
fra vores CDN direkte i din HTML side:
<script src="https://widget.cdn.septima.dk/latest/widgetapi.js"></script>
Eller brug en specifik version med:
<script src="https://widget.cdn.septima.dk/2.39.5/widgetapi.js"></script>
Din HTML
fil, der bruger din kode kan se ud på denne måde:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Septima Widget</title> </head> <body> <div id="map"></div> <script src="https://widget.cdn.septima.dk/latest/widgetapi.js"></script> <script src="index.js"></script> </body> </html>
Tilføj din kode til filen index.js
. Her er et simpelt eksempel, der giver et kort:
var widget = new WidgetAPI('#map', { "map": { "view": { "zoomLevel": 10, "x": 724413, "y": 6175985 }, "layer": [ { "namedlayer": "#dk_standard", } ] } });
Herunder kan du se de enkelte metoder samt tilhørende parametre.
Herved returneres et objekt. Nedenfor er objektets metoder beskrevet.
parameter | type | beskrivelse |
---|---|---|
target | String |
En seletor for de element, som denne Widget skal indsættes i. Det kan f.eks. være |
config | Object/string |
Optionel. Konfigurationen til Septima Widget. Kan være et objekt med en konfiguration eller en URL til en konfiguration. Se hvilke muligheder der er i konfigurations dokumentationen her eller se de mange eksempler på her. |
options | Object |
Optionel. Indeholder diverse parametre herunder "params". Flere funktioner i Septima Widget benytter sig af parametre, der kommer udefra, enten som URL-parametre eller parametre sat på elementet. Ved at angive de tilsvarende parametre under "params", er det muligt at få adgang til præcist værdien gennem API'et. |
Sæt konfigurationen på en widget. Det kan bruges til at opdatere hele konfigurationen eller blot til at sætte den på et senere tidspunkt.
parameter | type | beskrivelse |
---|---|---|
config | Object/String |
Konfigurationen til Septima Widget. Kan være et objekt med en konfiguration eller en URL til en konfiguration. Se hvilke muligheder der er i konfigurations dokumentationen her eller se de mange eksempler på her. |
Tilføj data til et specifikt lag. Det er muligt at angive om andre data på laget, skal fjernes inden de nye data tilføjes, samt om der skal zoomes ind på de data, der er tilføjet.
parameter | type | beskrivelse |
---|---|---|
geojson | Object | Data, der skal tilføjes til Widget. GeoJSON kan indeholde én eller flere features. |
options | Object |
Indeholder hvordan data skal vises. Det kunne f.eks. være: { layerID: 'septima', clear: false, zoomOptions: { zoomStyle: 'slow', minResolution: 0.8 } }
|
Fjerner alle data fra et specifikt lag.
parameter | type | beskrivelse |
---|---|---|
layerID | String | ID på det lag, som man gerne vil fjerne data fra |
Sæt visning for det aktulle kortudsnit.
parameter | type | beskrivelse |
---|---|---|
options | Object |
Indeholder hvordan data skal vises. Det kunne f.eks. være: { x: 724413, y: 6175985, zoom: 7, zoomStyle: 'slow', srs: 'EPSG:25832' }
|
Vis et specifikt lag i kortet.
parameter | type | beskrivelse |
---|---|---|
layerID | String | ID på det lag, som skal vises |
Skjul et specifikt lag i kortet.
parameter | type | beskrivelse |
---|---|---|
layerID | String | ID på det lag, som skal skjules |
Skift opacity på et specifikt lag i kortet.
parameter | type | beskrivelse |
---|---|---|
layerID | String | ID på det lag, som skal skjules |
opacity | Number | Værdi mellem 0 og 1, hvor 0 gør laget fuldstændig gennemsigtigt mens 1 gør det modsatte. |
Tving en genindlæsning af et specifikt lag i kortet. Dette kan benyttes mod WMS lag samt vektorlag, der hentes fra en service.
parameter | type | beskrivelse |
---|---|---|
layerID | String | ID på det lag, som skal genindlæses |
Skift parameter til et rasterlag lag (kun WMS
og VectorTile
). Dette kan f.eks. bruges til at skifte lagnavnet eller andre servicespecifikke URL-parametre. Kaldet til denne funktion medfører at laget genindlæses (hvis der er sket ændringer).
parameter | type | beskrivelse |
---|---|---|
layerID | String | ID på det lag, som skal genindlæses |
params | Object |
Angiv hvilke parametre, der skal ændres. Det kunne f.eks. være: { LAYERS: 'nytlag', TIME: '2020-06-12T09:00:00+02:00/2020-06-13T00:00:00+02:00' } |
Markér et eksisterende objekt i kortet.
parameter | type | beskrivelse |
---|---|---|
layerID | String | ID på det lag, der indeholder det objekt, der skal markeres. |
filterFunction | Function |
En funktion, der kaldes for hver feature i det angivet lag. Funktionen skal returnere Det kunne f.eks. være et objekt med et bestemt id: function (properties) { return properties.id === 3; } |
zoomOptions | Object |
Skal der zoomes til data når de tilføjes. Det kunne f.eks. være: { minResolution: 0.1, buffer: 1.5, zoomStyle: 'slow' }
|
silent | Boolean | Skal tilføjelsen af data ske uden at aktivere events? |
Fjern alle markeringer fra kortet.
parameter | type | beskrivelse |
---|---|---|
silent | Boolean | Skal det ske uden at aktivere events? |
Vis en popup i kortet.
parameter | type | beskrivelse |
---|---|---|
geojson | Object |
Data, der indeholder den geometri, hvor popup'en skal vises. Geometrien bliver ikke vist i kortet. F.eks. { "type": "Feature", "geometry": { "type": "Point", "coordinates": [1399383, 7494393] } } |
html | String | HTML, der skal vises inde i popup'en. |
Skjul popup, der er vist med showPopup.
Aktiverer tegnefunktionen i kortet. Brug eventet "featureDraw" og "featureModified" for at få den tegnede/redigerede geometri.
parameter | type | beskrivelse |
---|---|---|
options | Object |
Data, der indeholder den geometri, hvor popup'en skal vises. Geometrien bliver ikke vist i kortet. F.eks. { layer: 'drawLayer', type: 'Polygon', clearOnDraw: true, modify: true }
|
Deaktiverer tegnefunktionen i kortet.
Gem det aktuelle kort som et billede. Funktionen kører asynkront og billedet returneres som argument til callback funktionen.
parameter | type | beskrivelse |
---|---|---|
options | Object |
{ type: 'clipboard', width: 1000, height: 1000 }
|
callback | Function |
Den funktion, der kaldes når billedet er klar. |
Transformér geojson fra en projektion til en anden. Funktionen modificere den geojson
, der kaldes med og det foregår asynkront. callback
funktionen kaldes når geometrien er transformeret.
parameter | type | beskrivelse |
---|---|---|
geojson | Object |
Data, der indeholder den geometri, der skal transformeres. Det kan være en komplet GeoJSON med flere features, en enkelt GeoJSON feature eller blot en GeoJSON geometri. F.eks. { "type": "Feature", "geometry": { "type": "Point", "coordinates": [1399383, 7494393] } } |
options | Object |
Angiv hvilken projektion, der skal transformeres fra og til. { from: 'EPSG:25832', to: 'EPSG:4326' }
|
callback | Function |
Den funktion, der kaldes når transformationen er udført. Bemærk at input |
Events, der findes på Widget API'et.
parameter | type | beskrivelse |
---|---|---|
event | String |
Navnet på det event, der skal lyttes på. Det kan være:
|
callback | Function |
Den funktion, der kaldes når dette event fyres af. Typisk kaldes funktionen med to eller tre argumenter som f.eks. dette: function (eventname, scope, mapstate) { console.log(mapstate); } Det tredje argument er afhængigt af eventet. Nogle events har ikke noget tredje argument. |