Lines, polygons & circles

<script setup lang="ts">
import { ref } from 'vue'
import { NeshanMapLibre, MAPLIBRE_STYLES, type Coordinates, type MapCircle, type MapPolyline, type MapPolygon } from 'vue-neshan-maps'
import 'vue-neshan-maps/style.css'

const webKey = import.meta.env.VITE_NESHAN_WEB_KEY
const center = ref<Coordinates>([35.72, 51.36])
const zoom = ref(12.2)
const circles: MapCircle[] = [
  {
    "id": "area",
    "center": [
      35.6997,
      51.338
    ],
    "radius": 900,
    "options": {
      "color": "#238d86",
      "fillOpacity": 0.15
    }
  }
]
const polylines: MapPolyline[] = [
  {
    "id": "connection",
    "positions": [
      [
        35.6997,
        51.338
      ],
      [
        35.7448,
        51.3753
      ]
    ],
    "options": {
      "color": "#315cf4",
      "weight": 4
    }
  }
]
const polygons: MapPolygon[] = [
  {
    "id": "zone",
    "positions": [
      [
        35.71,
        51.35
      ],
      [
        35.73,
        51.35
      ],
      [
        35.73,
        51.37
      ],
      [
        35.71,
        51.37
      ]
    ],
    "options": {
      "color": "#7860d4",
      "fillOpacity": 0.15
    }
  }
]
</script>

<template>
  <NeshanMapLibre
    v-model="center" v-model:zoom="zoom"
    :api-key="webKey"
    :styles="{ height: '420px' }"
    :center-marker="false"
    :map-style="MAPLIBRE_STYLES.light"
    :traffic="false" :poi="false"
    :circles="circles" :polylines="polylines" :polygons="polygons"
  />
</template>

Set VITE_NESHAN_WEB_KEY in your ignored .env.local. This code reflects the controls above; your actual key is never included.