Map styles & live layers

Switch styles and control real traffic and POI visibility.

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="false"
    :map-style="MAPLIBRE_STYLES.light"
    :traffic="true" :poi="true"
  />
</template>

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

Live layers#

Bind traffic and poi to booleans, as in the complete example. Both default to false. The standard Neshan styles contain the required sources. MAPLIBRE_STYLES provides light, dark, monochrome_light, monochrome_dark and pastel.

Changing mapStyle preserves the map instance, DOM markers and popups; managed overlays and live visibility are restored after style loading. A custom version-8 style or URL must contain compatible Neshan traffic and points_source sources/layers to display live data. Listen to warning for missing groups and live-layers for matched layer IDs.

Traffic tiles are requested again every 60 seconds while enabled. Data freshness, HTTP caches, availability and quotas are controlled by Neshan. POI may not appear at low zoom. getDiagnostics() counts rendered features in the current view; a checked switch alone does not prove that data loaded.

Found something unclear?View the source Report an issue

Map styles & live layers

Run on a real Neshan map

Live layers#