Vue komponent

Brug Septima Widget direkte i din Vue 3-applikation med den officielle SeptimaWidget-komponent. Komponenten wrapper WidgetAPI og eksponerer instansen, så du har fuld adgang til alle metoder.

Installation

npm install septima-widget-vue

Live demo

Knapperne kalder setView() via den eksponerede widget-instans. "Registrér næste klik" viser, hvordan man lytter på events med on().

Kom i gang

<script setup>
import { ref } from 'vue'
import SeptimaWidget from 'septima-widget-vue'

const mapRef = ref(null)
</script>

<template>
  <div style="height: 500px">
    <SeptimaWidget
      ref="mapRef"
      :config="{
        map: {
          view: { zoomLevel: 10, x: 724413, y: 6175985 },
          layer: [{ namedlayer: '#septima_standard' }],
          controls: [
            { search: { driver: [{ type: 'address', options: {} }] } }
          ]
        }
      }"
    />
  </div>
</template>

Config kan også angives som en URL til en JSON-fil:

<SeptimaWidget config="https://example.com/config.json" />

Props

config

• Type: Object | String
• Påkrævet: Ja

Konfigurationen til Septima Widget. Kan enten være et JavaScript-objekt eller en URL til en JSON-konfigurationsfil.

Når config ændres, kalder komponenten automatisk setConfig på den eksisterende instans.

Expose

Komponenten eksponerer widget-egenskaben, som er instansen af WidgetAPI.

widget

• Type: WidgetAPI | null

WidgetAPI-instansen. Er null indtil komponenten er mounted. Brug ref til at få adgang til instansen:

<script setup>
import { useTemplateRef } from 'vue'
import SeptimaWidget from 'septima-widget-vue'

const mapRef = useTemplateRef('mapRef')

function flyTo() {
  mapRef.value?.widget?.setView({
    x: 724413,
    y: 6175985,
    zoom: 14,
    zoomStyle: 'slow'
  })
}

function listenToClicks() {
  mapRef.value?.widget?.on('mapclick', (event, scope, coordinate) => {
    console.log('Klik ved', coordinate)
  })
}
</script>

<template>
  <div style="height: 500px">
    <SeptimaWidget ref="mapRef" :config="config" />
  </div>
  <button @click="flyTo">Zoom til position</button>
</template>

Se WidgetAPI-dokumentationen for en komplet oversigt over tilgængelige metoder og events.

TypeScript

Komponenten er skrevet i TypeScript og leveres med typedefinitioner. widget-egenskaben kan types via SeptimaWidgetExpose.

import { ref } from 'vue'
import SeptimaWidget, { type SeptimaWidgetExpose } from 'septima-widget-vue'

const mapRef = ref<InstanceType<typeof SeptimaWidget> | null>(null)

// widget er WidgetAPI | null
const w: SeptimaWidgetExpose['widget'] = mapRef.value?.widget ?? null