Models & coordinates

Synchronize center and zoom, and build a location picker.

1 min readVue 3 / Nuxt 4Live example included

On this page

Interactive exampleMapLibre

Vue 3 · TypeScript

<script setup lang="ts">
import { ref } from 'vue'
import { NeshanMapLibre, MAPLIBRE_STYLES, type Coordinates } 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)
</script>

<template>
  <NeshanMapLibre
    v-model="center" v-model:zoom="zoom"
    :api-key="webKey"
    :styles="{ height: '420px' }"
    :center-marker="true"
    :map-style="MAPLIBRE_STYLES.light"
    :traffic="false" :poi="false"
    :pick-on-click="true"
  />
  <p>{{ center[0] }}, {{ center[1] }} · {{ zoom }}</p>
</template>

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

Picking#

v-model is the map center, in [latitude, longitude] order. Panning updates it even when picking is off. pickOnClick moves that center to the clicked position; centerMarker displays a fixed pin. These props do not save an address or add a marker to your array.

For a checkout picker, keep a separate confirmed value. A confirm button can copy center.value into your form. Use the click event's coordinates if you only want the clicked point rather than the current center. Both engines expose latitude-first click coordinates.

const confirmedLocation = ref<Coordinates>()
function confirmLocation() { confirmedLocation.value = [...center.value] }

Reverse geocoding is a separate server-side service integration. This library displays maps and coordinates; it does not turn a point into an address.

Found something unclear?View the source Report an issue

Models & coordinates

Run on a real Neshan map

Picking#