GeoJSON

Style point, line and polygon features with native source options.

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)
const geojson: GeoJSON.FeatureCollection = {
  type: 'FeatureCollection',
  features: Array.from({ length: 120 }, (_, i) => ({
    type: 'Feature',
    properties: { weight: 1 + i % 7 },
    geometry: { type: 'Point', coordinates: [
      51.36 + Math.sin(i * 2.4) * (.008 + (i % 12) * .002),
      35.72 + Math.cos(i * 1.7) * (.006 + (i % 9) * .002),
    ] },
  })),
}
</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"
    :geojson="geojson"
    :cluster='false'
    :heatmap='false'
  />
</template>

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

GeoJSON#

GeoJSON is longitude first, including when used with the Leaflet component. The optional MapLibre geojsonLayers array controls native rendering; omit source because the component manages it. Without custom layers, the component supplies point/line/polygon styling.

import type { MapLibreOverlayLayer } from 'vue-neshan-maps'

const geojson = {
  type: 'FeatureCollection' as const,
  features: [{
    type: 'Feature' as const,
    properties: { name: 'Azadi Square' },
    geometry: { type: 'Point' as const, coordinates: [51.338, 35.6997] },
  }],
}
const geojsonLayers: MapLibreOverlayLayer[] = [{
  id: 'places', type: 'circle',
  paint: { 'circle-radius': 8, 'circle-color': '#087f8c',
    'circle-stroke-color': '#ffffff', 'circle-stroke-width': 2 },
}]

vue

<NeshanMapLibre :api-key="webKey" :geojson="geojson" :geojson-layers="geojsonLayers" />

geojsonOptions contains native GeoJSON source options on MapLibre and L.GeoJSONOptions on Leaflet. See the complete GeoJSON component for a runnable starting point.

Found something unclear?View the source Report an issue

GeoJSON

Run on a real Neshan map

GeoJSON#