@radiofrance/svelte-leaflet 1.0.0-next.2 → 1.0.0-next.3

package/README.md

@@ -27,28 +27,28 @@ Simple Leaflet maps for your Svelte projects.
 ### UI Layers
 
 - ✅ Marker
-- DivOverlay
+- DivOverlay _(abstract class)_
 - ✅ Popup
-- Tooltip
+- ✅ Tooltip
 
 ### Raster Layers
 
-- TileLayer
-- TileLayer.WMS
-- ImageOverlay
-- VideoOverlay
+- ✅ TileLayer
+- ✅ TileLayer.WMS
+- ✅ ImageOverlay
+- ✅ VideoOverlay
 
 ### Vector Layers
 
 - Path
 - ✅ Polyline
 - ✅ Polygon
-- Rectangle
-- Circle
-- CircleMarker
-- SVGOverlay
-- SVG
-- Canvas
+- ✅ Rectangle
+- ✅ Circle
+- ✅ CircleMarker
+- ✅ SVGOverlay
+- SVG _(this is a Renderer, won't be implemented)_
+- Canvas _(this is a Renderer, won't be implemented)_
 
 ### Other Layers
 

package/dist/Circle.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { getContext, onDestroy, onMount } from 'svelte';
+	import type {
+		Circle as LeafletCircle,
+		LatLngExpression,
+		CircleMarkerOptions,
+		LayerGroup,
+	} from 'leaflet';
+	import { polygonEvents, updatePolylineProps, type PolygonEvents } from './polyline.js';
+	import { bindEvents, type LeafletMap } from './index.js';
+	import { LAYERGROUP, MAP } from './contexts.js';
+	import { circleMarkerEvents, type CircleMarkerEvents } from './circleMarker.js';
+
+	type Props = {
+		latlng: LatLngExpression;
+		instance?: LeafletCircle;
+		options?: CircleMarkerOptions;
+	} & CircleMarkerEvents;
+
+	let { latlng, instance = $bindable(), options = { radius: 50 }, ...restProps }: Props = $props();
+
+	const getMap = getContext<() => LeafletMap>(MAP);
+	const getLayerGroup = getContext<() => LayerGroup>(LAYERGROUP);
+
+	onMount(() => {
+		const map = getMap?.();
+		const layerGroup = getLayerGroup?.();
+		const context = layerGroup || map;
+		instance = window.L.circle(latlng, { ...options });
+		instance.addTo(context);
+		bindEvents(instance, restProps, circleMarkerEvents);
+	});
+
+	onDestroy(() => {
+		instance?.remove();
+	});
+
+	$effect(() => {
+		if (instance && latlng) {
+			instance.setLatLng(latlng);
+		}
+	});
+
+	// TODO : implement reactivity
+</script>

package/dist/Circle.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Circle as LeafletCircle, LatLngExpression, CircleMarkerOptions } from 'leaflet';
+import { type CircleMarkerEvents } from './circleMarker.js';
+declare const Circle: import("svelte").Component<{
+    latlng: LatLngExpression;
+    instance?: LeafletCircle;
+    options?: CircleMarkerOptions;
+} & CircleMarkerEvents, {}, "instance">;
+export default Circle;

package/dist/CircleMarker.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { getContext, onDestroy, onMount } from 'svelte';
+	import type {
+		CircleMarker as LeafletCircleMarker,
+		LatLngExpression,
+		CircleMarkerOptions,
+		LayerGroup,
+	} from 'leaflet';
+	import { bindEvents, type LeafletMap } from './index.js';
+	import { LAYERGROUP, MAP } from './contexts.js';
+	import { circleMarkerEvents, type CircleMarkerEvents } from './circleMarker.js';
+
+	type Props = {
+		latlng: LatLngExpression;
+		instance?: LeafletCircleMarker;
+		options?: CircleMarkerOptions;
+	} & CircleMarkerEvents;
+
+	let { latlng, instance = $bindable(), options = { radius: 50 }, ...restProps }: Props = $props();
+
+	const getMap = getContext<() => LeafletMap>(MAP);
+	const getLayerGroup = getContext<() => LayerGroup>(LAYERGROUP);
+
+	onMount(() => {
+		const map = getMap?.();
+		const layerGroup = getLayerGroup?.();
+		const context = layerGroup || map;
+		instance = window.L.circleMarker(latlng, { ...options });
+		instance.addTo(context);
+		bindEvents(instance, restProps, circleMarkerEvents);
+	});
+
+	onDestroy(() => {
+		instance?.remove();
+	});
+
+	$effect(() => {
+		if (instance && latlng) {
+			instance.setLatLng(latlng);
+		}
+	});
+
+	// TODO : implement reactivity
+	// $effect(() => {
+	// 	if (instance && options) {
+	// 		updatePolylineProps(instance, options);
+	// 	}
+	// });
+</script>

package/dist/CircleMarker.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CircleMarker as LeafletCircleMarker, LatLngExpression, CircleMarkerOptions } from 'leaflet';
+import { type CircleMarkerEvents } from './circleMarker.js';
+declare const CircleMarker: import("svelte").Component<{
+    latlng: LatLngExpression;
+    instance?: LeafletCircleMarker;
+    options?: CircleMarkerOptions;
+} & CircleMarkerEvents, {}, "instance">;
+export default CircleMarker;

package/dist/ImageOverlay.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { getContext, onDestroy, onMount } from 'svelte';
+	import type {
+		ImageOverlay as LeafletImageOverlay,
+		Map as LeafletMap,
+		ImageOverlayOptions,
+		LayerGroup,
+		LatLngBoundsLiteral,
+	} from 'leaflet';
+	import {
+		imageOverlayEvents,
+		updateImageOverlayProps,
+		type ImageOverlayEvents,
+	} from './imageOverlay.js';
+	import { bindEvents } from './index.js';
+	import { getOverlaysStore, LAYERGROUP, MAP } from './contexts.js';
+	import { getRandomString } from './utils.js';
+
+	type Props = {
+		name?: string;
+		url: string;
+		bounds: LatLngBoundsLiteral;
+		options?: ImageOverlayOptions;
+		instance?: LeafletImageOverlay;
+	} & ImageOverlayEvents;
+
+	let {
+		name = `overlay-${getRandomString(5)}`,
+		url,
+		bounds,
+		options = {},
+		instance = $bindable(),
+		...restProps
+	}: Props = $props();
+
+	const getMap = getContext<() => LeafletMap>(MAP);
+	const getLayerGroup = getContext<() => LayerGroup>(LAYERGROUP);
+	const overlaysStore = getOverlaysStore();
+
+	onMount(() => {
+		const map = getMap?.();
+		const layerGroup = getLayerGroup?.();
+		const context = layerGroup || map;
+		instance = window.L.imageOverlay(url, bounds, options);
+		$overlaysStore[name] = instance;
+		bindEvents(instance, restProps, imageOverlayEvents);
+		instance.addTo(context);
+	});
+
+	onDestroy(() => {
+		instance?.remove();
+	});
+
+	$effect(() => {
+		if (instance && options) {
+			updateImageOverlayProps(instance, options);
+		}
+	});
+
+	$effect(() => {
+		if (instance && bounds) {
+			const latlngBounds = window.L.latLngBounds(bounds);
+			instance.setBounds(latlngBounds);
+		}
+	});
+</script>

package/dist/ImageOverlay.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ImageOverlay as LeafletImageOverlay, ImageOverlayOptions, LatLngBoundsLiteral } from 'leaflet';
+import { type ImageOverlayEvents } from './imageOverlay.js';
+declare const ImageOverlay: import("svelte").Component<{
+    name?: string;
+    url: string;
+    bounds: LatLngBoundsLiteral;
+    options?: ImageOverlayOptions;
+    instance?: LeafletImageOverlay;
+} & ImageOverlayEvents, {}, "instance">;
+export default ImageOverlay;

package/dist/LayersControl.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { getContext, onMount, tick } from 'svelte';
+	import { getBaseLayersStore, getOverlaysStore, MAP } from './contexts.js';
+	import type { Control, Map as LeafletMap } from 'leaflet';
+
+	type Props = {
+		instance?: Control;
+		options?: Control.LayersOptions;
+	};
+	let { instance = $bindable(), options }: Props = $props();
+
+	const getMap = getContext<() => LeafletMap>(MAP);
+	const baseLayersStore = getBaseLayersStore();
+	const overlaysStore = getOverlaysStore();
+
+	onMount(async () => {
+		const map = getMap();
+		// wait for layers to be initialized
+		await tick();
+		instance = window.L.control.layers($baseLayersStore, $overlaysStore, options);
+		instance.addTo(map);
+	});
+</script>

package/dist/LayersControl.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { Control } from 'leaflet';
+declare const LayersControl: import("svelte").Component<{
+    instance?: Control;
+    options?: Control.LayersOptions;
+}, {}, "instance">;
+export default LayersControl;

package/dist/Map.svelte

@@ -8,9 +8,15 @@
 
 	import type { MapOptions, Marker, Map as LeafletMap, LatLngTuple } from 'leaflet';
 	import { bindEvents } from './index.js';
-	import { setContext, type Snippet } from 'svelte';
+	import { setContext, tick, type Snippet } from 'svelte';
 	import { mapEvents, updateMapProps, type MapEvents } from './map.js';
-	import { FOCUSABLE, MAP } from './contexts.js';
+	import {
+		FOCUSABLE,
+		getBaseLayersStore,
+		initBaseLayersStore,
+		initOverlaysStore,
+		MAP,
+	} from './contexts.js';
 
 	type Props = {
 		instance?: LeafletMap;
@@ -27,7 +33,7 @@
 		options = $bindable({}),
 		markers = $bindable([]),
 		tilesUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-		attribution = `&copy;<a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>`,
+		attribution = `&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors`,
 		focusable = true,
 		children,
 		...restProps
@@ -35,6 +41,10 @@
 
 	setContext(MAP, () => instance);
 	setContext(FOCUSABLE, focusable ? null : -1);
+	initBaseLayersStore();
+	initOverlaysStore();
+	const baseLayersStore = getBaseLayersStore();
+
 	let container: HTMLElement | null = $state(null);
 
 	const defaultOptions = {
@@ -51,7 +61,7 @@
 		}
 	});
 
-	function onLoad() {
+	async function onLoad() {
 		if (!container) return;
 		// @ts-ignore
 		delete window.L.Icon.Default.prototype._getIconUrl;
@@ -69,11 +79,6 @@
 		}
 		bindEvents(instance, restProps, mapEvents);
 
-		// create component for the tile layer ?
-		window.L.tileLayer(tilesUrl, {
-			attribution,
-		}).addTo(instance);
-
 		instance.on('layeradd', (event) => {
 			const layer = event.layer;
 			if (layer instanceof window.L.Marker) {
@@ -91,6 +96,16 @@
 			}
 		});
 
+		// waits for the user layers before adding a default layer
+		await tick();
+		if (!hasTileLayer(instance)) {
+			const defaultBaseLayer = window.L.tileLayer(tilesUrl, {
+				attribution,
+			});
+			defaultBaseLayer.addTo(instance);
+			$baseLayersStore['Default Layer'] = defaultBaseLayer;
+		}
+
 		instance.whenReady(() => {
 			if (!instance) return;
 			// TODO: find out why manually firing the load event is needed
@@ -98,6 +113,16 @@
 		});
 	}
 
+	function hasTileLayer(map: LeafletMap) {
+		let hasTileLayer = false;
+		map.eachLayer(function (layer) {
+			if (layer instanceof window.L.TileLayer) {
+				hasTileLayer = true;
+			}
+		});
+		return hasTileLayer;
+	}
+
 	function leafletLoader(_node: HTMLElement) {
 		(async function () {
 			await import('leaflet');

package/dist/MarkerClusterGroup.svelte.d.ts

@@ -8,61 +8,61 @@ declare const MarkerClusterGroup: Component<{
     options?: MarkerClusterGroupOptions;
     children?: Snippet;
 } & {
-    onclustermovestart?: ((e: Omit<import("leaflet").LeafletEvent, "sourceTarget"> & {
+    onclusterclick?: ((e: Omit<import("leaflet").LeafletMouseEvent, "sourceTarget"> & {
         sourceTarget: import("leaflet").Marker<any>;
     }) => void) | undefined;
-    onclustermove?: ((e: Omit<import("leaflet").LeafletEvent, "sourceTarget"> & {
+    onclusterdblclick?: ((e: Omit<import("leaflet").LeafletMouseEvent, "sourceTarget"> & {
         sourceTarget: import("leaflet").Marker<any>;
     }) => void) | undefined;
-    onclustermoveend?: ((e: Omit<import("leaflet").LeafletEvent, "sourceTarget"> & {
+    onclustermousedown?: ((e: Omit<import("leaflet").LeafletMouseEvent, "sourceTarget"> & {
         sourceTarget: import("leaflet").Marker<any>;
     }) => void) | undefined;
-    onclusterdragstart?: ((e: Omit<import("leaflet").LeafletEvent, "sourceTarget"> & {
+    onclustermouseup?: ((e: Omit<import("leaflet").LeafletMouseEvent, "sourceTarget"> & {
         sourceTarget: import("leaflet").Marker<any>;
     }) => void) | undefined;
-    onclusterdrag?: ((e: Omit<import("leaflet").LeafletEvent, "sourceTarget"> & {
+    onclustermouseover?: ((e: Omit<import("leaflet").LeafletMouseEvent, "sourceTarget"> & {
         sourceTarget: import("leaflet").Marker<any>;
     }) => void) | undefined;
-    onclusteradd?: ((e: Omit<import("leaflet").LeafletEvent, "sourceTarget"> & {
+    onclustermouseout?: ((e: Omit<import("leaflet").LeafletMouseEvent, "sourceTarget"> & {
         sourceTarget: import("leaflet").Marker<any>;
     }) => void) | undefined;
-    onclusterremove?: ((e: Omit<import("leaflet").LeafletEvent, "sourceTarget"> & {
+    onclustercontextmenu?: ((e: Omit<import("leaflet").LeafletMouseEvent, "sourceTarget"> & {
         sourceTarget: import("leaflet").Marker<any>;
     }) => void) | undefined;
-    onclusterpopupopen?: ((e: Omit<import("leaflet").PopupEvent, "sourceTarget"> & {
+    onclusterdragstart?: ((e: Omit<import("leaflet").LeafletEvent, "sourceTarget"> & {
         sourceTarget: import("leaflet").Marker<any>;
     }) => void) | undefined;
-    onclusterpopupclose?: ((e: Omit<import("leaflet").PopupEvent, "sourceTarget"> & {
+    onclustermovestart?: ((e: Omit<import("leaflet").LeafletEvent, "sourceTarget"> & {
         sourceTarget: import("leaflet").Marker<any>;
     }) => void) | undefined;
-    onclustertooltipopen?: ((e: Omit<import("leaflet").TooltipEvent, "sourceTarget"> & {
+    onclusterdrag?: ((e: Omit<import("leaflet").LeafletEvent, "sourceTarget"> & {
         sourceTarget: import("leaflet").Marker<any>;
     }) => void) | undefined;
-    onclustertooltipclose?: ((e: Omit<import("leaflet").TooltipEvent, "sourceTarget"> & {
+    onclusterdragend?: ((e: Omit<import("leaflet").DragEndEvent, "sourceTarget"> & {
         sourceTarget: import("leaflet").Marker<any>;
     }) => void) | undefined;
-    onclusterclick?: ((e: Omit<import("leaflet").LeafletMouseEvent, "sourceTarget"> & {
+    onclustermoveend?: ((e: Omit<import("leaflet").LeafletEvent, "sourceTarget"> & {
         sourceTarget: import("leaflet").Marker<any>;
     }) => void) | undefined;
-    onclusterdblclick?: ((e: Omit<import("leaflet").LeafletMouseEvent, "sourceTarget"> & {
+    onclusteradd?: ((e: Omit<import("leaflet").LeafletEvent, "sourceTarget"> & {
         sourceTarget: import("leaflet").Marker<any>;
     }) => void) | undefined;
-    onclustermousedown?: ((e: Omit<import("leaflet").LeafletMouseEvent, "sourceTarget"> & {
+    onclusterremove?: ((e: Omit<import("leaflet").LeafletEvent, "sourceTarget"> & {
         sourceTarget: import("leaflet").Marker<any>;
     }) => void) | undefined;
-    onclustermouseup?: ((e: Omit<import("leaflet").LeafletMouseEvent, "sourceTarget"> & {
+    onclusterpopupopen?: ((e: Omit<import("leaflet").PopupEvent, "sourceTarget"> & {
         sourceTarget: import("leaflet").Marker<any>;
     }) => void) | undefined;
-    onclustermouseover?: ((e: Omit<import("leaflet").LeafletMouseEvent, "sourceTarget"> & {
+    onclusterpopupclose?: ((e: Omit<import("leaflet").PopupEvent, "sourceTarget"> & {
         sourceTarget: import("leaflet").Marker<any>;
     }) => void) | undefined;
-    onclustermouseout?: ((e: Omit<import("leaflet").LeafletMouseEvent, "sourceTarget"> & {
+    onclustertooltipopen?: ((e: Omit<import("leaflet").TooltipEvent, "sourceTarget"> & {
         sourceTarget: import("leaflet").Marker<any>;
     }) => void) | undefined;
-    onclustercontextmenu?: ((e: Omit<import("leaflet").LeafletMouseEvent, "sourceTarget"> & {
+    onclustertooltipclose?: ((e: Omit<import("leaflet").TooltipEvent, "sourceTarget"> & {
         sourceTarget: import("leaflet").Marker<any>;
     }) => void) | undefined;
-    onclusterdragend?: ((e: Omit<import("leaflet").DragEndEvent, "sourceTarget"> & {
+    onclustermove?: ((e: Omit<import("leaflet").LeafletEvent, "sourceTarget"> & {
         sourceTarget: import("leaflet").Marker<any>;
     }) => void) | undefined;
 } & import("./utils.js").CreateSvelteEventsMap<readonly ["animationend", "spiderfied", "unspiderfied"]>, {}, "instance">;

package/dist/Rectangle.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { getContext, onDestroy, onMount } from 'svelte';
+	import type {
+		Rectangle as LeafletRectangle,
+		LatLngBoundsExpression,
+		PolylineOptions,
+		LayerGroup,
+	} from 'leaflet';
+	import { polygonEvents, updatePolylineProps, type PolygonEvents } from './polyline.js';
+	import { bindEvents, type LeafletMap } from './index.js';
+	import { LAYERGROUP, MAP } from './contexts.js';
+
+	type Props = {
+		bounds: LatLngBoundsExpression;
+		instance?: LeafletRectangle;
+		options?: PolylineOptions;
+	} & PolygonEvents;
+
+	let { bounds, instance = $bindable(), options = {}, ...restProps }: Props = $props();
+
+	const getMap = getContext<() => LeafletMap>(MAP);
+	const getLayerGroup = getContext<() => LayerGroup>(LAYERGROUP);
+
+	onMount(() => {
+		const map = getMap?.();
+		const layerGroup = getLayerGroup?.();
+		const context = layerGroup || map;
+		instance = window.L.rectangle(bounds, options);
+		instance.addTo(context);
+		bindEvents(instance, restProps, polygonEvents);
+	});
+
+	onDestroy(() => {
+		instance?.remove();
+	});
+
+	$effect(() => {
+		if (instance && bounds) {
+			instance.setBounds(bounds);
+		}
+	});
+
+	$effect(() => {
+		if (instance && options) {
+			updatePolylineProps(instance, options);
+		}
+	});
+</script>

package/dist/Rectangle.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Rectangle as LeafletRectangle, LatLngBoundsExpression, PolylineOptions } from 'leaflet';
+import { type PolygonEvents } from './polyline.js';
+declare const Rectangle: import("svelte").Component<{
+    bounds: LatLngBoundsExpression;
+    instance?: LeafletRectangle;
+    options?: PolylineOptions;
+} & PolygonEvents, {}, "instance">;
+export default Rectangle;

package/dist/SVGOverlay.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { getContext, onDestroy, onMount } from 'svelte';
+	import type { SVGOverlay as LeafletSVGOverlay, LayerGroup, LatLngBoundsLiteral } from 'leaflet';
+	import { type LeafletMap } from './index.js';
+	import { LAYERGROUP, MAP } from './contexts.js';
+
+	type Props = {
+		bounds: LatLngBoundsLiteral;
+		instance?: LeafletSVGOverlay;
+		options?: object;
+		children?: any;
+	};
+
+	let { bounds, instance = $bindable(), options = {}, children, ...restProps }: Props = $props();
+	let svgContainer: HTMLDivElement | null = $state(null);
+
+	const getMap = getContext<() => LeafletMap>(MAP);
+	const getLayerGroup = getContext<() => LayerGroup>(LAYERGROUP);
+
+	onMount(() => {
+		const map = getMap?.();
+		const layerGroup = getLayerGroup?.();
+		const context = layerGroup || map;
+		const svg = svgContainer?.querySelector('svg');
+		if (!svg) {
+			throw new Error('SVGOverlay requires an SVG element as a child');
+		}
+		instance = window.L.svgOverlay(svg, bounds, options);
+		instance.addTo(context);
+		// bindEvents(instance, restProps);
+	});
+
+	onDestroy(() => {
+		instance?.remove();
+	});
+
+	// $effect(() => {
+	// 	if (instance && bounds) {
+	// 		instance.setBounds(window.L.latLngBounds(bounds));
+	// 	}
+	// });
+</script>
+
+<div bind:this={svgContainer} class="svg-container">
+	{@render children()}
+</div>
+
+<style>
+	.svg-container {
+		display: none;
+	}
+</style>

package/dist/SVGOverlay.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SVGOverlay as LeafletSVGOverlay, LatLngBoundsLiteral } from 'leaflet';
+declare const SvgOverlay: import("svelte").Component<{
+    bounds: LatLngBoundsLiteral;
+    instance?: LeafletSVGOverlay;
+    options?: object;
+    children?: any;
+}, {}, "instance">;
+export default SvgOverlay;

package/dist/TileLayer.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { getContext, onDestroy, onMount } from 'svelte';
+	import type { TileLayer as LeafletTileLayer, TileLayerOptions, Map as LeafletMap } from 'leaflet';
+	import { getBaseLayersStore, MAP } from './contexts.js';
+	import { getRandomString } from './utils.js';
+
+	type Props = {
+		url: string;
+		name?: string;
+		options?: TileLayerOptions;
+		instance?: LeafletTileLayer;
+	};
+
+	let {
+		url,
+		name = `layer-${getRandomString(5)}`,
+		options = {},
+		instance = $bindable(),
+	}: Props = $props();
+
+	const getMap = getContext<() => LeafletMap>(MAP);
+	const baseLayersStore = getBaseLayersStore();
+
+	onMount(() => {
+		const map = getMap();
+		instance = window.L.tileLayer(url, options);
+		$baseLayersStore[name] = instance;
+		instance.addTo(map);
+	});
+
+	onDestroy(() => {
+		instance?.remove();
+	});
+</script>

package/dist/TileLayer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { TileLayer as LeafletTileLayer, TileLayerOptions } from 'leaflet';
+declare const TileLayer: import("svelte").Component<{
+    url: string;
+    name?: string;
+    options?: TileLayerOptions;
+    instance?: LeafletTileLayer;
+}, {}, "instance">;
+export default TileLayer;

package/dist/TileLayerWMS.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { getContext, onDestroy, onMount } from 'svelte';
+	import type {
+		WMSOptions,
+		WMSParams,
+		TileLayer as LeafletTileLayer,
+		Map as LeafletMap,
+	} from 'leaflet';
+	import { MAP } from './contexts.js';
+
+	type Props = {
+		url: string;
+		params?: WMSParams;
+		options?: WMSOptions;
+		instance?: LeafletTileLayer;
+	};
+
+	let {
+		url,
+		params = { layers: 'wms-default-layer' },
+		options = {},
+		instance = $bindable(),
+	}: Props = $props();
+
+	const getMap = getContext<() => LeafletMap>(MAP);
+
+	onMount(() => {
+		const map = getMap();
+		instance = window.L.tileLayer.wms(url, { ...options, ...params });
+		instance.addTo(map);
+	});
+
+	onDestroy(() => {
+		instance?.remove();
+	});
+</script>

package/dist/TileLayerWMS.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { WMSOptions, WMSParams, TileLayer as LeafletTileLayer } from 'leaflet';
+declare const TileLayerWms: import("svelte").Component<{
+    url: string;
+    params?: WMSParams;
+    options?: WMSOptions;
+    instance?: LeafletTileLayer;
+}, {}, "instance">;
+export default TileLayerWms;

package/dist/Tooltip.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import type {
+		LatLngExpression,
+		TooltipOptions,
+		LayerGroup,
+		Tooltip as LeafletTooltip,
+		Map as LeafletMap,
+		Marker as LeafletMarker,
+	} from 'leaflet';
+	import { getContext, onDestroy, onMount, type Snippet } from 'svelte';
+	import { bindEvents } from './index.js';
+	import { tooltipEvents, updateTooltipProps, type TooltipEvents } from './tooltip.js';
+	import { LAYERGROUP, MAP, MARKER } from './contexts.js';
+
+	type Props = {
+		latlng?: LatLngExpression;
+		options?: TooltipOptions;
+		instance?: LeafletTooltip;
+		children?: Snippet;
+	} & TooltipEvents;
+
+	let {
+		latlng,
+		options = $bindable({}),
+		instance = $bindable(),
+		children,
+		...restProps
+	}: Props = $props();
+
+	let tooltipContent: HTMLElement | undefined = $state();
+
+	const getMap = getContext<() => LeafletMap>(MAP);
+	const getLayerGroup = getContext<() => LayerGroup>(LAYERGROUP);
+	const getMarker = getContext<() => LeafletMarker>(MARKER);
+
+	onMount(() => {
+		const map = getMap?.();
+		const layerGroup = getLayerGroup?.();
+		const marker = getMarker?.();
+		const context = layerGroup || map;
+		instance = window.L.tooltip(options);
+		if (latlng) instance.setLatLng(latlng);
+		bindEvents(instance, restProps, tooltipEvents);
+		if (marker) marker.bindTooltip(instance);
+		else if (map) instance.openOn(map);
+		else instance.addTo(context);
+		if (tooltipContent) instance.setContent(tooltipContent);
+	});
+
+	onDestroy(() => {
+		instance?.remove();
+	});
+
+	$effect(() => {
+		if (instance && options) {
+			updateTooltipProps(instance, options);
+		}
+	});
+</script>
+
+<div class="container">
+	{#if children}
+		<div bind:this={tooltipContent} class="TooltipChildrenContainer">
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.container {
+		display: none;
+	}
+</style>

package/dist/Tooltip.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { LatLngExpression, TooltipOptions, Tooltip as LeafletTooltip } from 'leaflet';
+import { type Snippet } from 'svelte';
+import { type TooltipEvents } from './tooltip.js';
+declare const Tooltip: import("svelte").Component<{
+    latlng?: LatLngExpression;
+    options?: TooltipOptions;
+    instance?: LeafletTooltip;
+    children?: Snippet;
+} & TooltipEvents, {}, "instance" | "options">;
+export default Tooltip;

package/dist/VideoOverlay.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { getContext, onDestroy, onMount } from 'svelte';
+	import type {
+		VideoOverlay as LeafletVideoOverlay,
+		Map as LeafletMap,
+		VideoOverlayOptions,
+		LayerGroup,
+		LatLngBoundsLiteral,
+	} from 'leaflet';
+	import {
+		videoOverlayEvents,
+		updateVideoOverlayProps,
+		type VideoOverlayEvents,
+	} from './videoOverlay.js';
+	import { bindEvents } from './index.js';
+	import { getOverlaysStore, LAYERGROUP, MAP } from './contexts.js';
+	import { getRandomString } from './utils.js';
+
+	type Props = {
+		name?: string;
+		url: string | string[] | HTMLVideoElement;
+		bounds: LatLngBoundsLiteral;
+		options?: VideoOverlayOptions;
+		instance?: LeafletVideoOverlay;
+	} & VideoOverlayEvents;
+
+	let {
+		name = `overlay-${getRandomString(5)}`,
+		url,
+		bounds,
+		options = {},
+		instance = $bindable(),
+		...restProps
+	}: Props = $props();
+
+	const getMap = getContext<() => LeafletMap>(MAP);
+	const getLayerGroup = getContext<() => LayerGroup>(LAYERGROUP);
+	const overlaysStore = getOverlaysStore();
+
+	onMount(() => {
+		const map = getMap?.();
+		const layerGroup = getLayerGroup?.();
+		const context = layerGroup || map;
+		instance = window.L.videoOverlay(url, bounds, options);
+		$overlaysStore[name] = instance;
+		bindEvents(instance, restProps, videoOverlayEvents);
+		instance.addTo(context);
+	});
+
+	onDestroy(() => {
+		instance?.remove();
+	});
+
+	$effect(() => {
+		if (instance && options) {
+			updateVideoOverlayProps(instance, options);
+		}
+	});
+
+	$effect(() => {
+		if (instance && bounds) {
+			const latlngBounds = window.L.latLngBounds(bounds);
+			instance.setBounds(latlngBounds);
+		}
+	});
+</script>

package/dist/VideoOverlay.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { VideoOverlay as LeafletVideoOverlay, VideoOverlayOptions, LatLngBoundsLiteral } from 'leaflet';
+import { type VideoOverlayEvents } from './videoOverlay.js';
+declare const VideoOverlay: import("svelte").Component<{
+    name?: string;
+    url: string | string[] | HTMLVideoElement;
+    bounds: LatLngBoundsLiteral;
+    options?: VideoOverlayOptions;
+    instance?: LeafletVideoOverlay;
+} & VideoOverlayEvents, {}, "instance">;
+export default VideoOverlay;

package/dist/circleMarker.d.ts

@@ -0,0 +1,4 @@
+import type { CircleMarker as LeafletCircleMarker } from 'leaflet';
+import type { CreateSvelteEventsMap } from './utils.js';
+export declare const circleMarkerEvents: readonly ["move", "click", "dblclick", "mousedown", "mouseup", "mouseover", "mouseout", "contextmenu", "add", "remove", "popupopen", "popupclose", "tooltipopen", "tooltipclose"];
+export type CircleMarkerEvents = CreateSvelteEventsMap<typeof circleMarkerEvents, LeafletCircleMarker>;

package/dist/circleMarker.js

@@ -0,0 +1,8 @@
+import { interactiveLayerEvents, layerEvents, popupSpecificEvents, tooltipSpecificEvents, } from './events.js';
+export const circleMarkerEvents = [
+    'move',
+    ...interactiveLayerEvents,
+    ...layerEvents,
+    ...popupSpecificEvents,
+    ...tooltipSpecificEvents,
+];

package/dist/contexts.d.ts

@@ -1,4 +1,12 @@
+import { type Writable } from 'svelte/store';
+import type { Control } from 'leaflet';
 export declare const MAP: unique symbol;
 export declare const LAYERGROUP: unique symbol;
 export declare const MARKER: unique symbol;
 export declare const FOCUSABLE: unique symbol;
+type Context = Writable<Control.LayersObject>;
+export declare function initBaseLayersStore(): void;
+export declare function getBaseLayersStore(): Context;
+export declare function initOverlaysStore(): void;
+export declare function getOverlaysStore(): Context;
+export {};

package/dist/contexts.js

@@ -1,4 +1,22 @@
+import { writable } from 'svelte/store';
+import { getContext, setContext } from 'svelte';
 export const MAP = Symbol('map');
 export const LAYERGROUP = Symbol('layerGroup');
 export const MARKER = Symbol('marker');
 export const FOCUSABLE = Symbol('focusable');
+const BASELAYERS = Symbol('baseLayers');
+const OVERLAYS = Symbol('overlays');
+export function initBaseLayersStore() {
+    const baseLayers = writable({});
+    setContext(BASELAYERS, baseLayers);
+}
+export function getBaseLayersStore() {
+    return getContext(BASELAYERS);
+}
+export function initOverlaysStore() {
+    const baseLayers = writable({});
+    setContext(OVERLAYS, baseLayers);
+}
+export function getOverlaysStore() {
+    return getContext(OVERLAYS);
+}

package/dist/events.d.ts

@@ -5,7 +5,7 @@ export declare const locationEvents: readonly ["locationfound", "locationerror"]
 export declare const leafletMouseEvents: readonly ["click", "dblclick", "mousedown", "mouseup", "mouseover", "mouseout", "contextmenu", "mousemove", "preclick"];
 export declare const layerEvents: readonly ["add", "remove"];
 export declare const popupSpecificEvents: readonly ["popupopen", "popupclose"];
-export declare const tooltipEvents: readonly ["tooltipopen", "tooltipclose"];
+export declare const tooltipSpecificEvents: readonly ["tooltipopen", "tooltipclose"];
 export declare const layerGroupEvents: readonly ["layeradd", "layerremove"];
 export declare const layersControlEvents: readonly ["baselayerchange", "overlayadd", "overlayremove"];
 export declare const mapStateChangeEvents: readonly ["load", "move", "moveend", "movestart", "unload", "viewreset", "zoom", "zoomend", "zoomlevelschange", "zoomstart", "resize"];

package/dist/events.js

@@ -13,7 +13,7 @@ export const locationEvents = ['locationfound', 'locationerror'];
 export const leafletMouseEvents = [...interactiveLayerEvents, 'mousemove', 'preclick'];
 export const layerEvents = ['add', 'remove'];
 export const popupSpecificEvents = ['popupopen', 'popupclose'];
-export const tooltipEvents = ['tooltipopen', 'tooltipclose'];
+export const tooltipSpecificEvents = ['tooltipopen', 'tooltipclose'];
 export const layerGroupEvents = ['layeradd', 'layerremove'];
 export const layersControlEvents = ['baselayerchange', 'overlayadd', 'overlayremove'];
 const leafletEvents = [

package/dist/imageOverlay.d.ts

@@ -0,0 +1,5 @@
+import type { ImageOverlay as LeafletImageOverlay, ImageOverlayOptions } from 'leaflet';
+import type { CreateSvelteEventsMap } from './utils.js';
+export declare function updateImageOverlayProps(instance: LeafletImageOverlay, options: ImageOverlayOptions): void;
+export declare const imageOverlayEvents: readonly ["click", "dblclick", "mousedown", "mouseup", "mouseover", "mouseout", "contextmenu", "add", "remove", "popupopen", "popupclose", "tooltipopen", "tooltipclose"];
+export type ImageOverlayEvents = CreateSvelteEventsMap<typeof imageOverlayEvents, LeafletImageOverlay>;

package/dist/imageOverlay.js

@@ -0,0 +1,25 @@
+import { interactiveLayerEvents, layerEvents, popupSpecificEvents, tooltipSpecificEvents, } from './events.js';
+export function updateImageOverlayProps(instance, options) {
+    if (!options)
+        return;
+    for (const [key, value] of Object.entries(options)) {
+        if (instance.options[key] === value)
+            continue;
+        instance.options[key] = value;
+        switch (key) {
+            case 'opacity':
+            case 'alt':
+                instance.setOpacity(value);
+                break;
+            case 'interactive':
+            case 'attribution':
+                throw new Error(`mutation of ${key} option is not supported`);
+        }
+    }
+}
+export const imageOverlayEvents = [
+    ...interactiveLayerEvents,
+    ...layerEvents,
+    ...popupSpecificEvents,
+    ...tooltipSpecificEvents,
+];

package/dist/map.js

@@ -1,5 +1,5 @@
 import { capitalize } from './utils.js';
-import { keyboardEvents, layerGroupEvents, layersControlEvents, leafletMouseEvents, locationEvents, mapStateChangeEvents, popupSpecificEvents, tooltipEvents, } from './events.js';
+import { keyboardEvents, layerGroupEvents, layersControlEvents, leafletMouseEvents, locationEvents, mapStateChangeEvents, popupSpecificEvents, tooltipSpecificEvents, } from './events.js';
 // stores the function bound to the event listener so it can be removed later
 let boundInvalidateMapSize = null;
 function invalidateMapSize(map) {
@@ -111,7 +111,7 @@ export const mapEvents = [
     ...locationEvents,
     ...mapStateChangeEvents,
     ...popupSpecificEvents,
-    ...tooltipEvents,
+    ...tooltipSpecificEvents,
     'autopanstart',
     'zoomanim',
 ];

package/dist/marker.js

@@ -1,5 +1,5 @@
 import { capitalize } from './utils.js';
-import { draggingEvents, interactiveLayerEvents, layerEvents, popupSpecificEvents, tooltipEvents, } from './events.js';
+import { draggingEvents, interactiveLayerEvents, layerEvents, popupSpecificEvents, tooltipSpecificEvents, } from './events.js';
 // const L = globalThis.window.L;
 export function updateMarkerProps(instance, options) {
     if (!options)
@@ -57,5 +57,5 @@ export const markerEvents = [
     ...interactiveLayerEvents,
     ...layerEvents,
     ...popupSpecificEvents,
-    ...tooltipEvents,
+    ...tooltipSpecificEvents,
 ];

package/dist/markerClusterGroup.d.ts

@@ -2,7 +2,7 @@ import { type MarkerEvents } from './marker.js';
 import type { CreateSvelteEventsMap } from './utils.js';
 type ClusterifyMarkerEvent<E> = E extends `on${infer N}` ? `oncluster${N}` : never;
 declare const clusterSpecificEvents: readonly ["animationend", "spiderfied", "unspiderfied"];
-export declare const markerClusterGroupEvents: readonly [...("clustermovestart" | "clustermove" | "clustermoveend" | "clusterdragstart" | "clusterdrag" | "clusteradd" | "clusterremove" | "clusterpopupopen" | "clusterpopupclose" | "clustertooltipopen" | "clustertooltipclose" | "clusterclick" | "clusterdblclick" | "clustermousedown" | "clustermouseup" | "clustermouseover" | "clustermouseout" | "clustercontextmenu" | "clusterdragend")[], "animationend", "spiderfied", "unspiderfied"];
+export declare const markerClusterGroupEvents: readonly [...("clusterclick" | "clusterdblclick" | "clustermousedown" | "clustermouseup" | "clustermouseover" | "clustermouseout" | "clustercontextmenu" | "clusterdragstart" | "clustermovestart" | "clusterdrag" | "clusterdragend" | "clustermoveend" | "clusteradd" | "clusterremove" | "clusterpopupopen" | "clusterpopupclose" | "clustertooltipopen" | "clustertooltipclose" | "clustermove")[], "animationend", "spiderfied", "unspiderfied"];
 export type MarkerClusterGroupEvents = {
     [K in keyof MarkerEvents as ClusterifyMarkerEvent<K>]: MarkerEvents[K];
 } & CreateSvelteEventsMap<typeof clusterSpecificEvents>;

package/dist/polyline.js

@@ -1,4 +1,4 @@
-import { interactiveLayerEvents, layerEvents, popupSpecificEvents, tooltipEvents, } from './events.js';
+import { interactiveLayerEvents, layerEvents, popupSpecificEvents, tooltipSpecificEvents, } from './events.js';
 export function updatePolylineProps(instance, options) {
     if (!options)
         return;
@@ -52,5 +52,5 @@ export const polygonEvents = [
     ...interactiveLayerEvents,
     ...layerEvents,
     ...popupSpecificEvents,
-    ...tooltipEvents,
+    ...tooltipSpecificEvents,
 ];

package/dist/popup.js

@@ -1,4 +1,4 @@
-import { interactiveLayerEvents, layerEvents, popupSpecificEvents, tooltipEvents, } from './events.js';
+import { interactiveLayerEvents, layerEvents, popupSpecificEvents, tooltipSpecificEvents, } from './events.js';
 export function updatePopupProps(instance, options) {
     if (!options)
         return;
@@ -46,5 +46,5 @@ export const popupEvents = [
     ...interactiveLayerEvents,
     ...layerEvents,
     ...popupSpecificEvents,
-    ...tooltipEvents,
+    ...tooltipSpecificEvents,
 ];

package/dist/tileLayer.d.ts

@@ -0,0 +1,5 @@
+import type { TileLayerOptions } from 'leaflet';
+export type TileLayerProps = {
+    url: string;
+    options?: TileLayerOptions;
+};

package/dist/tileLayer.js

@@ -0,0 +1 @@
+export {};

package/dist/tileLayerWMS.d.ts

@@ -0,0 +1,7 @@
+import type { TileLayerOptions, WMSParams, TileLayer as LeafletTileLayerWMS } from 'leaflet';
+export type TileLayerWMSProps = {
+    url: string;
+    params?: WMSParams;
+    options?: TileLayerOptions;
+    instance?: LeafletTileLayerWMS;
+};

package/dist/tileLayerWMS.js

@@ -0,0 +1 @@
+export {};

package/dist/tooltip.d.ts

@@ -0,0 +1,10 @@
+import type { Tooltip as LeafletTooltip, TooltipOptions } from 'leaflet';
+import type { CreateSvelteEventsMap } from './utils.js';
+export declare function updateTooltipProps(instance: LeafletTooltip, options: TooltipOptions): void;
+export declare const tooltipEvents: readonly ["click", "dblclick", "mousedown", "mouseup", "mouseover", "mouseout", "contextmenu", "add", "remove", "tooltipopen", "tooltipclose"];
+export type TooltipEvents = CreateSvelteEventsMap<typeof tooltipEvents, LeafletTooltip>;
+declare module 'leaflet' {
+    interface Tooltip {
+        _source: Layer;
+    }
+}

package/dist/tooltip.js

@@ -0,0 +1,34 @@
+import { interactiveLayerEvents, layerEvents, tooltipSpecificEvents } from './events.js';
+export function updateTooltipProps(instance, options) {
+    if (!options)
+        return;
+    for (const [key, value] of Object.entries(options)) {
+        if (instance.options[key] === value)
+            continue;
+        instance.options[key] = value;
+        switch (key) {
+            case 'className':
+            case 'interactive':
+            case 'pane':
+                throw new Error(`mutation of ${key} option is not supported`);
+            case 'direction':
+            case 'permanent':
+            case 'sticky':
+            case 'opacity':
+                if (instance.isOpen()) {
+                    const source = instance._source;
+                    source.closeTooltip();
+                    source.openTooltip();
+                }
+                break;
+            case 'content':
+                instance.setContent(value);
+                break;
+        }
+    }
+}
+export const tooltipEvents = [
+    ...interactiveLayerEvents,
+    ...layerEvents,
+    ...tooltipSpecificEvents,
+];

package/dist/utils.d.ts

@@ -1,5 +1,6 @@
 import type { LeafletEventHandlerFnMap } from 'leaflet';
 export declare function capitalize<T extends string>(str: T): Capitalize<T>;
+export declare function getRandomString(length: number): string;
 export declare function getFirstNonCommentChild(element: HTMLElement): HTMLElement | null;
 export type PickOptionByType<Options, Type> = keyof {
     [K in keyof Options as true extends UnionContainsType<Options[K], Type> ? K : never]: Options[K];

package/dist/utils.js

@@ -1,6 +1,13 @@
 export function capitalize(str) {
     return (str[0].toUpperCase() + str.slice(1));
 }
+const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
+function getRandomChar() {
+    return chars[Math.floor(Math.random() * chars.length)];
+}
+export function getRandomString(length) {
+    return Array.from({ length }, getRandomChar).join('');
+}
 export function getFirstNonCommentChild(element) {
     let child = element.firstChild;
     while (child && child.nodeType !== Node.ELEMENT_NODE) {

package/dist/videoOverlay.d.ts

@@ -0,0 +1,5 @@
+import type { VideoOverlay as LeafletVideoOverlay, VideoOverlayOptions } from 'leaflet';
+import type { CreateSvelteEventsMap } from './utils.js';
+export declare function updateVideoOverlayProps(instance: LeafletVideoOverlay, options: VideoOverlayOptions): void;
+export declare const videoOverlayEvents: readonly ["click", "dblclick", "mousedown", "mouseup", "mouseover", "mouseout", "contextmenu", "add", "remove", "popupopen", "popupclose", "tooltipopen", "tooltipclose"];
+export type VideoOverlayEvents = CreateSvelteEventsMap<typeof videoOverlayEvents, LeafletVideoOverlay>;

package/dist/videoOverlay.js

@@ -0,0 +1,25 @@
+import { interactiveLayerEvents, layerEvents, popupSpecificEvents, tooltipSpecificEvents, } from './events.js';
+export function updateVideoOverlayProps(instance, options) {
+    if (!options)
+        return;
+    for (const [key, value] of Object.entries(options)) {
+        if (instance.options[key] === value)
+            continue;
+        instance.options[key] = value;
+        switch (key) {
+            case 'opacity':
+            case 'alt':
+                instance.setOpacity(value);
+                break;
+            case 'interactive':
+            case 'attribution':
+                throw new Error(`mutation of ${key} option is not supported`);
+        }
+    }
+}
+export const videoOverlayEvents = [
+    ...interactiveLayerEvents,
+    ...layerEvents,
+    ...popupSpecificEvents,
+    ...tooltipSpecificEvents,
+];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@radiofrance/svelte-leaflet",
-	"version": "1.0.0-next.2",
+	"version": "1.0.0-next.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",