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

package/README.md

@@ -1,12 +1,22 @@
 # @radiofrance/svelte-leaflet
 
-A library that wraps leaflet classes in domless/renderless svelte components.
+Simple Leaflet maps for your Svelte projects.
 
-## Compatibility
+## Features
+
+- Works in SSR pages
+- TypeScript : events, props and options are fully typed
+- Simple event usage with the `oneventname` syntax
+  - ![](./static/map-types.png)
+  - `event.sourceTarget` is correctly typed
+- Fully reactive : update props and options, the components will update
+- Customize `DivIcon`, `Popup` and more with Svelte components or HTML instead of strings
+- Single dependency : no `leaflet` or `@types/leaflet` needed
 
-Version 1.0.0 and above are compatible with Svelte 5.
+## Compatibility
 
-For svelte 3 and 4, use version 0.1.x (not actively maintained).
+- Version 1.0.0 and above are compatible with Svelte 5.
+- For Svelte 3 and 4, use version 0.1.x (not actively maintained).
 
 ## Install
 
@@ -14,82 +24,57 @@ For svelte 3 and 4, use version 0.1.x (not actively maintained).
 
 ## Components
 
-### Map
-
-Renders a map Leaflet Map. The Map will take up 100% of its container's height and width.
-
-#### Attributes
-
-| Attribute     | Type                                                          | Default                                            | Notes                                                                              |
-| ------------- | ------------------------------------------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------- |
-| `options`     | [MapOptions](https://leafletjs.com/reference.html#map-option) | `{}`                                               | Map options                                                                        |
-| `tilesUrl`    | string                                                        | `'https://tile.openstreetmap.org/{z}/{x}/{y}.png'` | more free tile services can be found at https://alexurquhart.github.io/free-tiles/ |
-| `attribution` | string                                                        | `'©OpenStreetMap'` _(link to openstreetmap)_      |                                                                                    |
-
-#### Events
-
-All events are forwarded from the Map class, see the leaflet documentation for more information.
-
-- https://leafletjs.com/reference.html#map-event
-
-Example:
-
-```svelte
-<Map {options} onclick={(e) => console.log(e.detail.latlng)} />
-```
-
-### Marker
-
-Add a marker to the map.
-
-- Can be used as a child of `<Map>` or `<MarkerClusterGroup>`
-- A `<Popup>` component can be passed as the Marker child to display a popup when the marker is clicked.
-- To use a custom icon, pass a `Icon` or a `DivIcon` component as the marker child.
-
-#### Attributes
-
-| Name      | Type                                                                | Default    | Notes                                 |
-| --------- | ------------------------------------------------------------------- | ---------- | ------------------------------------- |
-| `latlng`  | [LatLng](https://leafletjs.com/reference.html#latlng)               | _required_ | position of the marker                |
-| `options` | [MarkerOptions](https://leafletjs.com/reference.html#marker-option) | `{}`       | options to pass to the leaflet marker |
-
-#### Events
-
-All events are forwarded from the Marker class, see the leaflet documentation for more information.
-
-- https://leafletjs.com/reference.html#marker-event
-
-### Popup
+### UI Layers
 
-`<Popup>` children will be displayed when the marker is clicked.
+- ✅ Marker
+- DivOverlay _(abstract class)_
+- ✅ Popup
+- ✅ Tooltip
 
-- Use as a `<Marker>` child.
+### Raster Layers
 
-#### Attributes
+- ✅ TileLayer
+- ✅ TileLayer.WMS
+- ✅ ImageOverlay
+- ✅ VideoOverlay
 
-| Name      | Type                                                              | Default | Notes                                |
-| --------- | ----------------------------------------------------------------- | ------- | ------------------------------------ |
-| `options` | [PopupOptions](https://leafletjs.com/reference.html#popup-option) | `{}`    | options to pass to the leaflet popup |
+### Vector Layers
 
-### MarkerClusterGroup
+- Path
+- ✅ Polyline
+- ✅ Polygon
+- ✅ Rectangle
+- ✅ Circle
+- ✅ CircleMarker
+- ✅ SVGOverlay
+- SVG _(this is a Renderer, won't be implemented)_
+- Canvas _(this is a Renderer, won't be implemented)_
 
-Enables clustering of child markers
+### Other Layers
 
-- Use as a `<Map>` child
+- LayerGroup
+- FeatureGroup
+- GeoJSON
+- GridLayer
 
-#### Attributes
+### Basic Types
 
-| Name      | Type                                                                                                                                   | Default | Notes                                                                                                      |
-| --------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------- |
-| `options` | [MarkerClusterGroupOptions](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/leaflet.markercluster/index.d.ts#L36) | `{}`    | [MarkerClusterGroup options](https://github.com/leaflet/Leaflet.markercluster?tab=readme-ov-file#defaults) |
+- LatLng
+- LatLngBounds
+- Point
+- Bounds
+- ✅ Icon
+- ✅ DivIcon
 
-### Polyline
+### Controls
 
-Allows to draw lines on the map
+- ✅ Zoom
+- Attribution
+- Layers
+- Scale
 
-#### Attributes
+### Extra
 
-| Name      | Type                                                                    | Default    | Notes                                   |
-| --------- | ----------------------------------------------------------------------- | ---------- | --------------------------------------- |
-| `latlngs` | [LatLng[]](https://leafletjs.com/reference.html#latlng)                 | _required_ | array of points to draw the line        |
-| `options` | [PolylineOptions](https://leafletjs.com/reference.html#polyline-option) | `{}`       | options to pass to the leaflet polyline |
+- ✅ MarkerClusterGroup
+- ✅ LocateControl
+  - ![locate control](./static//locate-control.png)

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 { mapEvents, updateMapProps, type MapEvents } from './map.svelte.js';
-	import { FOCUSABLE, MAP } from './contexts.js';
+	import { setContext, tick, type Snippet } from 'svelte';
+	import { mapEvents, updateMapProps, type MapEvents } from './map.js';
+	import {
+		FOCUSABLE,
+		getBaseLayersStore,
+		initBaseLayersStore,
+		initOverlaysStore,
+		MAP,
+	} from './contexts.js';
 
 	type Props = {
 		instance?: LeafletMap;
@@ -27,12 +33,20 @@
 		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
 	}: Props = $props();
 
+	setContext(MAP, () => instance);
+	setContext(FOCUSABLE, focusable ? null : -1);
+	initBaseLayersStore();
+	initOverlaysStore();
+	const baseLayersStore = getBaseLayersStore();
+
+	let container: HTMLElement | null = $state(null);
+
 	const defaultOptions = {
 		center: [48.852, 2.278] as LatLngTuple,
 		trackResize: true,
@@ -40,20 +54,6 @@
 		maxZoom: 18,
 		keyboard: options.keyboard === undefined ? focusable : options.keyboard,
 	};
-	// consider exporting a reference to the markers instead of a getter
-	export const getMarkers: () => Marker[] = () => {
-		const markers: Marker[] = [];
-		instance?.eachLayer((layer) => {
-			if (layer instanceof window.L.Marker) {
-				markers.push(layer);
-			}
-		});
-		return markers;
-	};
-
-	setContext(MAP, () => instance);
-	setContext(FOCUSABLE, focusable ? null : -1);
-	let container: HTMLElement | null = $state(null);
 
 	$effect(() => {
 		if (instance) {
@@ -61,7 +61,7 @@
 		}
 	});
 
-	function onLoad() {
+	async function onLoad() {
 		if (!container) return;
 		// @ts-ignore
 		delete window.L.Icon.Default.prototype._getIconUrl;
@@ -79,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) {
@@ -101,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
@@ -108,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/Map.svelte.d.ts

@@ -3,7 +3,7 @@ import 'leaflet.markercluster/dist/MarkerCluster.css';
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
 import type { MapOptions, Marker, Map as LeafletMap } from 'leaflet';
 import { type Snippet } from 'svelte';
-import { type MapEvents } from './map.svelte.js';
+import { type MapEvents } from './map.js';
 declare const Map: import("svelte").Component<{
     instance?: LeafletMap;
     options?: MapOptions;
@@ -12,7 +12,5 @@ declare const Map: import("svelte").Component<{
     attribution?: string;
     focusable?: boolean;
     children?: Snippet;
-} & MapEvents, {
-    getMarkers: () => Marker[];
-}, "instance" | "options" | "markers">;
+} & MapEvents, {}, "instance" | "options" | "markers">;
 export default Map;

package/dist/Marker.svelte

@@ -8,7 +8,7 @@
 		MarkerClusterGroup,
 	} from 'leaflet';
 	import { bindEvents, type LatLngExpression } from './index.js';
-	import { markerEvents, updateMarkerProps, type MarkerEvents } from './marker.svelte.js';
+	import { markerEvents, updateMarkerProps, type MarkerEvents } from './marker.js';
 	import { LAYERGROUP, MAP, MARKER } from './contexts.js';
 
 	type Props = {

package/dist/Marker.svelte.d.ts

@@ -1,7 +1,7 @@
 import { type Snippet } from 'svelte';
 import type { Marker as LeafletMarker, MarkerOptions } from 'leaflet';
 import { type LatLngExpression } from './index.js';
-import { type MarkerEvents } from './marker.svelte.js';
+import { type MarkerEvents } from './marker.js';
 declare const Marker: import("svelte").Component<{
     latlng: LatLngExpression;
     options?: MarkerOptions;

package/dist/MarkerClusterGroup.svelte

@@ -16,10 +16,7 @@
 		MarkerCluster,
 	} from 'leaflet';
 	import { LAYERGROUP, MAP } from './contexts.js';
-	import {
-		markerClusterGroupEvents,
-		type MarkerClusterGroupEvents,
-	} from './markerClusterGroup.svelte.js';
+	import { markerClusterGroupEvents, type MarkerClusterGroupEvents } from './markerClusterGroup.js';
 	import { bindEvents } from './index.js';
 
 	type Props = {

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/Polygon.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext, onDestroy, onMount } from 'svelte';
 	import type { Polygon as LeafletPolygon, PolylineOptions, LayerGroup } from 'leaflet';
-	import { polygonEvents, updatePolylineProps, type PolygonEvents } from './polyline.svelte.js';
+	import { polygonEvents, updatePolylineProps, type PolygonEvents } from './polyline.js';
 	import { bindEvents, type Latlngs, type LeafletMap } from './index.js';
 	import { LAYERGROUP, MAP } from './contexts.js';
 

package/dist/Polygon.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Polygon as LeafletPolygon, PolylineOptions } from 'leaflet';
-import { type PolygonEvents } from './polyline.svelte.js';
+import { type PolygonEvents } from './polyline.js';
 import { type Latlngs } from './index.js';
 declare const Polygon: import("svelte").Component<{
     latlngs: Latlngs<3>;

package/dist/Polyline.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext, onDestroy, onMount } from 'svelte';
 	import type { Polyline as LeafletPolyline, PolylineOptions, LayerGroup } from 'leaflet';
-	import { polygonEvents, updatePolylineProps, type PolygonEvents } from './polyline.svelte.js';
+	import { polygonEvents, updatePolylineProps, type PolygonEvents } from './polyline.js';
 	import { bindEvents, type Latlngs, type LeafletMap } from './index.js';
 	import { LAYERGROUP, MAP } from './contexts.js';
 

package/dist/Polyline.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Polyline as LeafletPolyline, PolylineOptions } from 'leaflet';
-import { type PolygonEvents } from './polyline.svelte.js';
+import { type PolygonEvents } from './polyline.js';
 import { type Latlngs } from './index.js';
 declare const Polyline: import("svelte").Component<{
     latlngs: Latlngs;