Søg i Septima Widget K

Mål afstand og areal ​

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.

Options ​

Herunder findes en beskrivelse af de enkelte egenskaber, der kan angiver til denne funktion.

disable ​

  • Type: boolean
  • Default: false

Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol.

detach ​

  • Type: 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.

css ​

  • Type: string | 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 ​

  • Type: string

Tilføj en speciel CSS class til elementet. Dette kan bruges til at styre hvordan elementet ser ud eller placeres på siden.

template ​

  • Type: string | object

Her angives en html-skabelon for, hvorledes målene skal præsenteres for brugere. Målene kan ses ved at tilføje "debug": true i konfigurationen og kan angives i html-skabelonen med følgende notation <%= formatted.html %>. Læs mere om templates generelt her.

Fælgende parametre kan benyttes i templaten:

json
{
  "vertices": 4,
  "area": 108178.75732421875,
  "last": 1231.1360836260728,
  "length": 2966.6013881474846,
  "formatted": {
    "distance": "2,97",
    "distanceUnit": "km",
    "area": "108179",
    "areaUnit": "m<sup>2</sup>",
    "html": "Areal: 108179 m<sup>2</sup>"
  }
}

modify ​

  • Type: boolean
  • Default: 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 ​

  • Type: boolean
  • Default: 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 ​

  • Type: object

Kan angives hvis man gerne vil have at det tegnede i kortet skal se anderledes ud. Læs mere om features_style her.

Hvis man gerne vil have mål vist i kortet, kan dette gøres vha. measurements.

buttons ​

  • Type: 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 LineString for at måle afstande eller polygon for at måle arealer. 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 className. Hvis className ikke angives benyttes der et default ikon:

json
"buttons": [
  {
    "text": "Mål afstand",
    "type": "LineString",
    "className": "mdi mdi-vector-line",
    "buttonIndex": 1
  },
  {
    "text": "Mål areal",
    "type": "Polygon",
    "className": "mdi mdi-vector-square",
    "buttonIndex": 0
  }
]

Eksempler ​

Eksempler, der bruger denne komponent: