🧩 LGeoJson

Represents a GeoJSON object or an array of GeoJSON objects.

🧪 Demo

<script setup lang="ts">
import { LGeoJson, LMap, LTileLayer } from '@maxel01/vue-leaflet'
import { onMounted, ref } from 'vue'

const geojson = ref(undefined)
const geoStyler = (feature) => ({
    opacity: feature.properties.code / 100000
})

onMounted(async () => {
    const response = await fetch(
        'https://rawgit.com/gregoiredavid/france-geojson/master/regions/pays-de-la-loire/communes-pays-de-la-loire.geojson'
    )
    geojson.value = await response.json()
})
</script>

<template>
    <LMap :zoom="8" :center="[47.41322, -1.219482]">
        <LTileLayer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            layer-type="base"
            name="OpenStreetMap"
        />
        <LGeoJson :geojson="geojson" :options-style="geoStyler" />
    </LMap>
</template>

⚙️ Props

Prop name	Description	Type	Reactive	Default	Required
geojson	An object in GeoJSON format to display on the map (you can alternatively add it later with addData method).	GeoJsonObject	true	-	false
optionsStyle	A Function defining the styling for GeoJSON lines and polygons. See more in original Leaflet documentation	StyleFunction	true	-	false

🔗 Inherited props

from LayerProps

Prop name	Description	Type	Reactive	Default	Required
pane	By default, the layer will be added to the map's overlay pane. Overriding this option will cause the layer to be placed on another pane by default. Not effective if the renderer option is set (the renderer option will override the pane option).	string	initOnly	-	false
attribution	String to be shown in the attribution control, e.g. "© OpenStreetMap contributors". It describes the layer data and is often a legal obligation towards copyright holders and tile providers.	string	true	-	false
name	-	string	true	-	false
layerType	-	LayerType	true	-	false
visible	-	boolean	true	-	false

from ComponentProps

Prop name	Description	Type	Reactive	Default	Required
options	Leaflet options to pass to the component constructor.	T	initOnly	-	false

📡 Emits

Event	Arguments	Description
update:visible	boolean	Triggers when the visible prop needs to be updated
ready	T	Triggers when the component is ready

🧭 Exposes

Name	Type	Description
ready	Ref<boolean>	Indicates whether the component and its underlying Leaflet object are fully initialized.
leafletObject	Ref<GeoJSON | undefined>	The underlying Leaflet instance. Can be used to directly interact with the Leaflet API (e.g. calling methods or accessing internal state).