LGeoJson

Represents a GeoJSON object or an array of GeoJSON objects.

Demo

<LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">
  <LTileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
    layer-type="base"
    name="OpenStreetMap"
  />
  <LGeoJson
    :geojson="geojson"
    :options-style="geoStyler"
  />
</LMap>

<script setup>
import { ref, onMounted } 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>

Props

Prop name	Description	Type	Required	Default
geojson	Should be an object in GeoJSON format (or an array of GeoJSON objects) that will be displayed on the map	Object|Array as GeoJsonObject	GeoJsonObject[]	-
optionsStyle	A Function defining the styling for GeoJSON lines and polygons. See more in original Leaflet documentation	Function as L.StyleFunction	-	*

Inherited props

from layer.ts

Prop name	Description	Type	Required	Default
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	String	-	'overlayPane'
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	-	null
name		String	-	-
layerType		String in ["base", "overlay"]	-	-
visible		Boolean	-	true

from component.ts

Prop name	Description	Type	Required	Default
options	Leaflet options to pass to the component constructor	Object	-	{}

Events

Event name	Type	Description
update:visible	boolean	Triggers when the visible prop needs to be updated
ready	object	Triggers when the component is ready