Markers & popups

Add stable marker IDs, text popups and persistent dragging.

1 min readVue 3 / Nuxt 4Live example included

On this page

Interactive exampleMapLibre

Vue 3 · TypeScript

<script setup lang="ts">
import { ref, shallowRef } from 'vue'
import { NeshanMapLibre, MAPLIBRE_STYLES, type Coordinates, type MapLibreMarker } 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 markers = shallowRef<MapLibreMarker[]>([
  {
    "id": "azadi",
    "position": [
      35.6997,
      51.338
    ],
    "popup": "Azadi Square",
    "tooltip": "Drag this marker",
    "options": {
      "draggable": true
    }
  },
  {
    "id": "milad",
    "position": [
      35.7448,
      51.3753
    ],
    "popup": "Milad Tower",
    "options": {
      "draggable": true
    }
  }
])
function saveMarker(marker: MapLibreMarker, position: Coordinates) {
  markers.value = markers.value.map(item => item.id === marker.id ? { ...item, position } : item)
}
</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"
    :markers="markers" @marker-dragend="saveMarker"
  />
</template>

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

Markers#

Give every marker a unique, stable id. Replace or update its position to move it; remove it from the array to remove it from the map. popup is plain text, and MapLibre tooltip becomes a DOM title. Clicking a marker emits marker-click; dragging emits marker-dragend(marker, coordinates).

The complete example's saveMarker persists drag results in application state. Without that update, a subsequent render can put the marker back at its old controlled position. Use MapLibreMarker for MapLibre and MapMarker for Leaflet: their native options are different.

markers.value = [...markers.value, {
  id: 'new-place', position: [...center.value], popup: 'New place',
}]
markers.value = markers.value.filter(marker => marker.id !== 'new-place')

MapLibre accepts an HTMLElement through element for a custom marker. Create and sanitize that DOM yourself; do not pass untrusted HTML. Default markers need no custom DOM. openPopup(id) opens the popup of an existing MapLibre marker.

Found something unclear?View the source Report an issue

Markers & popups

Run on a real Neshan map

Markers#