🧩 LSVGOverlay

Used to load and display a single svg over specific bounds of the map.

🧪 Demo

Width: Height:

Markers

• 0 - lng (X): 0 - lat (Y): 0
• 1 - lng (X): 100 - lat (Y): 0
• 2 - lng (X): 0 - lat (Y): 100
• 3 - lng (X): 100 - lat (Y): 100
• 4 - lng (X): 0 - lat (Y): 50
• 5 - lng (X): 50 - lat (Y): 0
• 6 - lng (X): 50 - lat (Y): 100
• 7 - lng (X): 100 - lat (Y): 50

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue'

import { LMap, LMarker, LPopup, LSVGOverlay } from '@maxel01/vue-leaflet'
import { CRS, type LatLngBoundsLiteral } from 'leaflet'

const width = ref(100)
const height = ref(100)

const svgElement = ref()
onMounted(() => {
    svgElement.value = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
    svgElement.value.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
    svgElement.value.setAttribute('viewBox', '0 0 200 200')
    svgElement.value.innerHTML = '<rect width="200" height="200"/><rect x="75" y="23" width="50" height="50" style="fill:red"/><rect x="75" y="123" width="50" height="50" style="fill:#0013ff"/>'
})

const bounds = computed(
    () =>
        [
            [0, 0],
            [height.value, width.value]
        ] as LatLngBoundsLiteral
)

const markers = ref([
    { coordinates: { lng: 0, lat: 0 } },
    { coordinates: { lng: 100, lat: 0 } },
    { coordinates: { lng: 0, lat: 100 } },
    { coordinates: { lng: 100, lat: 100 } },
    { coordinates: { lng: 0, lat: 50 } },
    { coordinates: { lng: 50, lat: 0 } },
    { coordinates: { lng: 50, lat: 100 } },
    { coordinates: { lng: 100, lat: 50 } }
])
</script>

<template>
    <LMap :zoom="1" :crs="CRS.Simple" :center="[height / 2, width / 2]" :minZoom="-5">
        <LSVGOverlay v-if="svgElement" :svg="svgElement" :bounds="bounds" />

        <LMarker v-for="(marker, idx) in markers" :key="idx" :lat-lng="marker.coordinates">
            <LPopup>{{ idx }}</LPopup>
        </LMarker>
    </LMap>

    <!-- Bounds settings -->
    <label for="width">Width: </label>
    <input type="number" id="width" placeholder="Width" v-model="width" />
    <label for="height">Height: </label>
    <input type="number" id="height" placeholder="Height" v-model="height" />

    <!-- Marker settings -->
    <div class="markers-list">
        <h4>Markers</h4>
        <ul>
            <li v-for="(marker, idx) in markers" :key="idx">
                {{ idx }} - lng (X): {{ marker.coordinates.lng }} - lat (Y):
                {{ marker.coordinates.lat }}
            </li>
        </ul>
    </div>
</template>

<style scoped>
input {
    border: 1px solid;
}
</style>

⚙️ Props

Prop name	Description	Type	Reactive	Default	Required
svg	Url of the svg or the SVGElement	string | SVGElement	initOnly	-	true

🔗 Inherited props

from ImageOverlayAbstractProps

Prop name	Description	Type	Reactive	Default	Required
bounds	The geographical bounds	LatLngBoundsExpression	true	-	true
className	A custom class name to assign to the image. Empty by default.	string	initOnly	-	false
zIndex	The explicit zIndex of the overlay layer.	number	true	-	false
errorOverlayUrl	URL to the overlay image to show in place of the overlay that failed to load.	string	initOnly	-	false
crossOrigin	Whether the crossOrigin attribute will be added to the image. If a String is provided, the image will have its crossOrigin attribute set to the String provided. This is needed if you want to access image pixel data. Refer to CORS Settings for valid String values.	boolean	initOnly	-	false
interactive	If true, the image overlay will emit mouse events when clicked or hovered	boolean	initOnly	-	false
alt	Text for the alt attribute of the image (useful for accessibility).	string	initOnly	-	false
opacity	The opacity of the image overlay.	number	true	-	false

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

🎯 Slots

Name	Description
default	Used to inject Leaflet child components like <LPopup> or <LTooltip> into the LCircleMarker.

🧭 Exposes

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