Septima Widget API

Brug Septima Widget som API når du har brug for et kort i din applikation

Kodeeksempel

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",
            }
        ]
    }
});

Du har også brug for en index.html fil, der bruger din kode. Her er et simpelt eksempel:

<!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>

I ovenstående eksempel benyttes seneste version af API'et altid. Det betyder, at koden altid er opdateret. For at benytte en specifik version tilføjes i stedet:

<script src="https://widget.cdn.septima.dk/2.8.1/widgetapi.js"></script>

API

Herunder kan du se de enkelte metoder samt tilhørende parametre.

new WidgetAPI (target [, config])

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 #myElement eller .map. Det er også muligt at angive et DOM element eller et jQuery element.

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.

Eksempler

setConfig (config)

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.

addData (geojson, options)

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
    }
}

layerID referere til et bestemt lag i konfigurationen.

clear angives hvis indholdet af laget skal slettes når de nye data indsættes.

zoomOptions tilføjes hvis der skal zoomes ind til de nye data og hvordan det skal gøres.

Eksempler

removeData (layerID)

Fjerner alle data fra et specifikt lag.

parameter type beskrivelse
layerID String ID på det lag, som man gerne vil fjerne data fra

setView (options)

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'
}

x og y Centerpunktet for det kortudsnit, som man gerne vil zoome til.

zoom Hvilket zoom-niveau, kortudsnittet skal vise.

zoomStyle angives hvis man gerne vil have at der kommer en glidende overgang til det valgte kortudsnit.

showLayer (layerID)

Vis et specifikt lag i kortet.

parameter type beskrivelse
layerID String ID på det lag, som skal vises

hideLayer (layerID)

Skjul et specifikt lag i kortet.

parameter type beskrivelse
layerID String ID på det lag, som skal skjules

selectFeatureInLayer (layerID, [filterFunction, zoomOptions, silent])

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 true hvis objektet skal markeres og false, hvis det ikke skal. Funktionen kaldes med objektets egenskaber, så man i funktionen kan bestemme om objektet skal markeres eller ej. Hvis funktionen ikke angives eller er null, så markeres alle objekter i det pågældende lag.

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'
}

minResolution Hvor langt skal det højst zoomes ind. Angives i meter pr pixel.

buffer 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.

zoomStyle angives hvis man gerne vil have at der kommer en glidende overgang til det valgte kortudsnit.

silent Boolean Skal tilføjelsen af data ske uden at aktivere events?

deselectFeature ([silent])

Fjern alle markeringer fra kortet.

parameter type beskrivelse
silent Boolean Skal det ske uden at aktivere events?

showPopup (geojson, html)

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.

hidePopup ()

Skjul popup, der er vist med showPopup.

on (event, callback)

Events, der findes på Widget API'et.

parameter type beskrivelse
event String

Navnet på det event, der skal lyttes på. Det kan være:

mapmove når brugeren zoomer eller panorerer i kortet. Oplysninger om kortet sendes til callback funktionen.

mapclick når brugeren klikker i kortet. Koordinaten hvor der er klikket, blive sendt til callback funktionen.

maphover når brugeren flytter musen i kortet. Koordinaten hvor der musen er, blive sendt til callback funktionen.

click når brugeren klikker på et objekt i kortet. Hvis selectable er sat til true på et lag, vil et array af objekter, der findes hvor der er klikket samt koordinaten, blive sendt til callback funktionen.

hover når brugeren fører musen over et objekt kortet. Hvis selectable er sat til true på et lag, vil et array af objekter, der findes hvor der musen er samt koordinaten, blive sendt til callback funktionen.

featureselected når brugeren vælger et objekt. GeoJSON for det valgte objekt sendes til callback funktionen.

featureunselected når et objekt fravælges.

featureadded når et objekt tilføjes til kortet. Det er f.eks. via søgefeltet. GeoJSON for det tilføjede objekt sendes til callback-funktionen.

featureDraw når brugeren tegner et nyt objekt via tegnefunktionerne. GeoJSON for det tegnede objekt sendes til callback-funktionen.

featureModified når brugeren redigere et objekt via tegnefunktionerne. GeoJSON for det ændrede objekt sendes til callback-funktionen.

layershow når et lag vises i kortet, f.eks. via lagvælgeren. Konfigurationen for laget sendes til callback-funktionen.

layerhide når et lag skjules i kortet, f.eks. via lagvælgeren. Konfigurationen for laget sendes til callback-funktionen.

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.