Sources, layers & 3D

Compose native layers with scoped IDs, expressions and extrusion.

2 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, type MapLibreAdvancedLayer } 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 district: GeoJSON.FeatureCollection = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"height":500},"geometry":{"type":"Polygon","coordinates":[[[51.35,35.71],[51.37,35.71],[51.37,35.73],[51.35,35.73],[51.35,35.71]]]}}]}
const sources = { district: { type: 'geojson' as const, data: district } }
const layers: MapLibreAdvancedLayer[] = [
  {
    "id": "district-3d",
    "type": "fill-extrusion",
    "source": "district",
    "paint": {
      "fill-extrusion-color": "#7860d4",
      "fill-extrusion-height": [
        "get",
        "height"
      ],
      "fill-extrusion-opacity": 0.72
    }
  }
]
function ready({ map }: import('vue-neshan-maps').MapLibreReady) { map.setPitch(48) }
</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"
    :sources="sources" :layers="layers" @ready="ready"
  />
</template>

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

Advanced sources and layers#

sources accepts native SourceSpecification values: GeoJSON, vector, raster, raster-dem, image, video and canvas. layers accepts native serializable LayerSpecification values plus beforeId. Native features still require valid data, URLs, zoom ranges, glyphs, sprites and server CORS. Adding a terrain source alone does not enable terrain; call map.setTerrain() through ready when needed. Custom WebGL layer objects with render callbacks use the native map API.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { NeshanMapLibre, type MapLibreAdvancedLayer } from 'vue-neshan-maps'
import 'vue-neshan-maps/style.css'
const webKey = import.meta.env.VITE_NESHAN_WEB_KEY
const districts = ref<GeoJSON.FeatureCollection>({
  type: 'FeatureCollection', features: [{ type: 'Feature', properties: { height: 450 },
    geometry: { type: 'Polygon', coordinates: [[[51.365,35.735],[51.38,35.735],[51.38,35.745],[51.365,35.745],[51.365,35.735]]] } }],
})
const layers: MapLibreAdvancedLayer[] = [
  { id: 'district-volume', type: 'fill-extrusion', source: 'districts',
    paint: { 'fill-extrusion-color': '#7c3aed', 'fill-extrusion-height': ['get', 'height'], 'fill-extrusion-opacity': 0.65 } },
  { id: 'district-outline', type: 'line', source: 'districts', beforeId: 'district-volume',
    paint: { 'line-color': '#4c1d95', 'line-width': 2 } },
]
const selected = ref('')
</script>
<template>
  <NeshanMapLibre :api-key="webKey" :model-value="[35.74,51.37]" :zoom="14"
    :options="{ pitch: 45 }" :sources="{ districts: { type: 'geojson', data: districts } }"
    :layers="layers" :styles="{ height: '550px' }" :center-marker="false"
    @layer-click="selected = $event.layerId" />
  <p>Selected layer: {{ selected }}</p>
</template>

Source and layer IDs are automatically scoped per component. Layer source references resolve to your sources keys; other names refer to the base style's native sources. beforeId resolves to your own layer IDs first, then native base-style IDs. Forward references are supported. Without beforeId, array order is bottom to top. A missing target falls back to normal insertion. Never use duplicate or empty IDs. Removing a source also requires removing or changing its dependent layer definitions. Removing it while retaining an old source reference is an invalid native style operation.

layer-click reports { layerId, features, coordinates } for each matching managed advanced layer. layerId is your original ID, coordinates are latitude first, features retain native/GeoJSON data. The feature's native layer ID is scoped. Layers added directly through the native map are application-owned and need their own restoration after style.load.

Found something unclear?View the source Report an issue

Sources, layers & 3D

Run on a real Neshan map

Advanced sources and layers#