@radiofrance/svelte-leaflet 0.1.0-alpha.9 → 1.0.0-next.1

package/README.md

@@ -2,6 +2,12 @@
 
 A library that wraps leaflet classes in domless/renderless svelte components.
 
+## Compatibility
+
+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
 
 `npm i -D @radiofrance/svelte-leaflet`
@@ -29,7 +35,7 @@ All events are forwarded from the Map class, see the leaflet documentation for m
 Example:
 
 ```svelte
-<Map {options} on:click={(e) => console.log(e.detail.latlng)} />
+<Map {options} onclick={(e) => console.log(e.detail.latlng)} />
 ```
 
 ### Marker
@@ -38,15 +44,14 @@ 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.
-- A component with `slot="icon"` attribute can be passed as the Marker child to display a custom icon.
+- 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                        |
-| `size`   | number                                                | `25`       | icon size (only used with a custom icon)      |
-| `id`     | string                                                | `''`       | an identifier to link the maker with you data |
+| 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
 

package/dist/DivIcon.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import type { Marker as LeafletMarker, DivIcon as LeafletDivIcon, DivIconOptions } from 'leaflet';
+
+	import { getContext, onDestroy, onMount, type Snippet } from 'svelte';
+	import { MARKER } from './contexts.js';
+
+	type Props = { children: Snippet; instance?: LeafletDivIcon; options?: DivIconOptions };
+
+	let { children, instance = $bindable(), options = {} }: Props = $props();
+	let iconContainer: HTMLDivElement | undefined = $state();
+
+	const getMarker = getContext<() => LeafletMarker>(MARKER);
+
+	onMount(() => {
+		const marker = getMarker?.();
+		if (marker) {
+			instance = window.L.divIcon({
+				html: iconContainer,
+				className: '',
+				...options,
+			});
+			marker.setIcon(instance);
+		}
+	});
+
+	onDestroy(() => {
+		if (instance) {
+			instance.remove?.();
+		}
+	});
+</script>
+
+<div class="container">
+	<div class="DivIcon" bind:this={iconContainer}>
+		{@render children()}
+	</div>
+</div>
+
+<!-- 
+  @component
+	Renders a custom HTML icon for a marker.
+	
+	## Usage
+	**It should only be used as a child of a `Marker` component.**
+
+	```svelte
+	...
+		<DivIcon {options}>
+			<div class="my-custom-icon">🤓</div>
+		</DivIcon>
+	...
+	```
+
+	## Reactivity
+	**None of the options are reactive.**
+	
+	If you need to update the icon, you should create a new `DivIcon` component with the new options.
+-->
+
+<style>
+	.container {
+		display: none;
+	}
+</style>

package/dist/DivIcon.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { DivIcon as LeafletDivIcon, DivIconOptions } from 'leaflet';
+import { type Snippet } from 'svelte';
+/**
+ * Renders a custom HTML icon for a marker.
+ *
+ * ## Usage
+ * **It should only be used as a child of a `Marker` component.**
+ *
+ * ```svelte
+ * ...
+ * 	<DivIcon {options}>
+ * 		<div class="my-custom-icon">🤓</div>
+ * 	</DivIcon>
+ * ...
+ * ```
+ *
+ * ## Reactivity
+ * **None of the options are reactive.**
+ *
+ * If you need to update the icon, you should create a new `DivIcon` component with the new options.
+ */
+declare const DivIcon: import("svelte").Component<{
+    children: Snippet;
+    instance?: LeafletDivIcon;
+    options?: DivIconOptions;
+}, {}, "instance">;
+export default DivIcon;

package/dist/Icon.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { Marker as LeafletMarker, Icon as LeafletIcon, IconOptions } from 'leaflet';
+
+	import { getContext, onDestroy, onMount } from 'svelte';
+	import { MARKER } from './contexts.js';
+
+	type Props = { instance?: LeafletIcon; options: IconOptions };
+
+	let { instance = $bindable(), options }: Props = $props();
+
+	const getMarker = getContext<() => LeafletMarker>(MARKER);
+
+	onMount(() => {
+		const marker = getMarker?.();
+		if (marker) {
+			instance = window.L.icon(options);
+			marker.setIcon(instance);
+		}
+	});
+
+	onDestroy(() => {
+		if (instance) {
+			instance.remove?.();
+		}
+	});
+</script>
+
+<!-- 
+  @component
+	Renders a custom image icon for a marker.
+	
+	## Usage
+	**It should only be used as a child of a `Marker` component.**
+  
+  `options.iconUrl` is required. The easiest way to use it is with data URL : import the image and pass it as the value.
+  
+  Absolute and relative URLs are also supported.
+  
+  ```svelte
+  <script>
+    import myPngIcon from './icon.png';
+  </script>
+
+  ...
+    <Icon options={{iconUrl: myPngIcon}}/>
+  ...
+  ```
+
+	## Reactivity
+	**None of the options are reactive.**
+  
+  If you need to update the icon, you should create a new `DivIcon` component with the new options.
+
+
+
+-->

package/dist/Icon.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Icon as LeafletIcon, IconOptions } from 'leaflet';
+/**
+ * Renders a custom image icon for a marker.
+ *
+ * ## Usage
+ * **It should only be used as a child of a `Marker` component.**
+ *
+ *  `options.iconUrl` is required. The easiest way to use it is with data URL : import the image and pass it as the value.
+ *
+ *  Absolute and relative URLs are also supported.
+ *
+ *  ```svelte
+ *  <script>
+ *    import myPngIcon from './icon.png';
+ *  </script>
+ *
+ *  ...
+ *    <Icon options={{iconUrl: myPngIcon}}/>
+ *  ...
+ *  ```
+ *
+ * ## Reactivity
+ * **None of the options are reactive.**
+ *
+ *  If you need to update the icon, you should create a new `DivIcon` component with the new options.
+ */
+declare const Icon: import("svelte").Component<{
+    instance?: LeafletIcon;
+    options: IconOptions;
+}, {}, "instance">;
+export default Icon;

package/dist/LocateControl.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { getContext, onMount, type Snippet } from 'svelte';
+	import type { ControlPosition, Map as LeafletMap, LocateOptions } from 'leaflet';
+	import { MAP } from './contexts.js';
+	import GeolocationButton from './private/GeolocationButton.svelte';
+	import { getFirstNonCommentChild } from './utils.js';
+
+	type Props = {
+		instance?: L.Control;
+		children?: Snippet;
+		position?: ControlPosition;
+		options?: LocateOptions;
+	};
+
+	let { instance = $bindable(), children, position = 'topleft', options }: Props = $props();
+	let locateButtonContainer: HTMLDivElement;
+
+	const getMap = getContext<() => LeafletMap>(MAP);
+
+	onMount(() => {
+		const map = getMap();
+		const control = window.L.Control.extend({
+			position,
+			onAdd: createLocateOnAdd(map, locateButtonContainer, options),
+		});
+		instance = new control({ position });
+		map.addControl(instance);
+	});
+
+	function createLocateOnAdd(
+		mapInstance: LeafletMap,
+		locateButtonContainer: HTMLElement,
+		locateControlOptions: L.LocateOptions = {},
+	) {
+		return () => {
+			const locateButtonElement = getFirstNonCommentChild(locateButtonContainer);
+			if (!locateButtonElement) return;
+			// prevent zoom on locate button double click
+			locateButtonElement.addEventListener('dblclick', (e: MouseEvent) => {
+				e.preventDefault();
+				e.stopPropagation();
+			});
+			locateButtonElement.addEventListener('click', () => {
+				mapInstance?.locate(locateControlOptions);
+			});
+			return locateButtonElement;
+		};
+	}
+</script>
+
+<div bind:this={locateButtonContainer}>
+	{#if children}
+		{@render children()}
+	{:else}
+		<GeolocationButton />
+	{/if}
+</div>

package/dist/LocateControl.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type Snippet } from 'svelte';
+import type { ControlPosition, LocateOptions } from 'leaflet';
+declare const LocateControl: import("svelte").Component<{
+    instance?: L.Control;
+    children?: Snippet;
+    position?: ControlPosition;
+    options?: LocateOptions;
+}, {}, "instance">;
+export default LocateControl;

package/dist/Map.svelte

@@ -1,84 +1,135 @@
-<script>import "leaflet/dist/leaflet.css";
-import "leaflet.markercluster/dist/MarkerCluster.css";
-import "leaflet.markercluster/dist/MarkerCluster.Default.css";
-import markerIcon2x from "leaflet/dist/images/marker-icon-2x.png";
-import markerIcon from "leaflet/dist/images/marker-icon.png";
-import markerShadow from "leaflet/dist/images/marker-shadow.png";
-import { createEventDispatcher, setContext } from "svelte";
-import {
-  bindEvents,
-  keyboardEvents,
-  layerGroupEvents,
-  layersControlEvents,
-  leafletMouseEvents,
-  locationEvents,
-  mapStateChangeEvents,
-  popupEvents,
-  tooltipEvents
-} from "./index.js";
-let L;
-export let options = {};
-export let tilesUrl = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
-export let attribution = `&copy;<a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>`;
-export let instance = null;
-const dispatch = createEventDispatcher();
-export const getMarkers = () => {
-  const markers = [];
-  instance?.eachLayer((layer) => {
-    if (layer instanceof L.Marker) {
-      markers.push(layer);
-    }
-  });
-  return markers;
-};
-setContext("map", () => instance);
-let container;
-$:
-  if (instance)
-    instance.options = Object.assign(instance.options, options);
-function resizeMap() {
-  instance?.invalidateSize();
-}
-const events = [
-  ...keyboardEvents,
-  ...layerGroupEvents,
-  ...layersControlEvents,
-  ...leafletMouseEvents,
-  ...locationEvents,
-  ...mapStateChangeEvents,
-  ...popupEvents,
-  ...tooltipEvents,
-  "autopanstart",
-  "zoomanim"
-];
-function onLoad() {
-  L = window.L;
-  delete L.Icon.Default.prototype._getIconUrl;
-  L.Icon.Default.mergeOptions({
-    iconRetinaUrl: markerIcon2x,
-    iconUrl: markerIcon,
-    shadowUrl: markerShadow
-  });
-  instance = L.map(container, { maxZoom: 18, ...options });
-  bindEvents(instance, dispatch, events);
-  L.tileLayer(tilesUrl, {
-    attribution
-  }).addTo(instance);
-  instance.whenReady(() => {
-    instance.fireEvent("load");
-  });
-}
-function leafletLoader(_node) {
-  import("leaflet").then(() => {
-    import("leaflet.markercluster").then(onLoad);
-  });
-}
+<script lang="ts">
+	import 'leaflet/dist/leaflet.css';
+	import 'leaflet.markercluster/dist/MarkerCluster.css';
+	import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
+	import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png';
+	import markerIcon from 'leaflet/dist/images/marker-icon.png';
+	import markerShadow from 'leaflet/dist/images/marker-shadow.png';
+
+	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';
+
+	type Props = {
+		instance?: LeafletMap;
+		options?: MapOptions;
+		markers?: Marker[];
+		tilesUrl?: string;
+		attribution?: string;
+		focusable?: boolean;
+		children?: Snippet;
+	} & MapEvents;
+
+	let {
+		instance = $bindable(),
+		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>`,
+		focusable = true,
+		children,
+		...restProps
+	}: Props = $props();
+
+	const defaultOptions = {
+		center: [48.852, 2.278] as LatLngTuple,
+		trackResize: true,
+		zoom: 3,
+		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) {
+			updateMapProps(instance, options);
+		}
+	});
+
+	function onLoad() {
+		if (!container) return;
+		// @ts-ignore
+		delete window.L.Icon.Default.prototype._getIconUrl;
+		window.L.Icon.Default.mergeOptions({
+			iconRetinaUrl: markerIcon2x,
+			iconUrl: markerIcon,
+			shadowUrl: markerShadow,
+		});
+		const mergedOptions = { ...defaultOptions, ...options };
+		// trackResize is set to false else the resize callback couldn't be unbined (no reference)
+		instance = window.L.map(container, { ...mergedOptions, trackResize: false });
+		if (mergedOptions.trackResize) {
+			// this triggers updateMapProps and binds the custom resize callback
+			options.trackResize = true;
+		}
+		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) {
+				markers.push(layer);
+			}
+		});
+
+		instance.on('layerremove', (event) => {
+			const layer = event.layer;
+			if (layer instanceof window.L.Marker) {
+				const index = markers.indexOf(layer);
+				if (index > -1) {
+					markers.splice(index, 1);
+				}
+			}
+		});
+
+		instance.whenReady(() => {
+			if (!instance) return;
+			// TODO: find out why manually firing the load event is needed
+			instance.fireEvent('load');
+		});
+	}
+
+	function leafletLoader(_node: HTMLElement) {
+		(async function () {
+			await import('leaflet');
+			// leaflet.markercluster is loaded by default. It's 34ko (12ko gzipped).
+			// A single tile is around 30ko gzipped.
+			// TODO: consider making it optional (handle loading in MarkerClusterGroup.svelte ?)
+			await import('leaflet.markercluster');
+			onLoad();
+		})();
+	}
 </script>
 
-<svelte:window on:resize={resizeMap} use:leafletLoader />
+<svelte:window use:leafletLoader />
 
 <div class="Map" bind:this={container} style="height: 100%; width: 100%">
 	{#if instance}
-		<slot map={instance} />
+		{@render children?.()}
 	{/if}
 </div>
+
+<style>
+	.Map {
+		z-index: 0;
+	}
+</style>

package/dist/Map.svelte.d.ts

@@ -1,67 +1,18 @@
-import { SvelteComponent } from "svelte";
-import type { MapOptions, Marker, Map } from 'leaflet';
-import type Leaflet from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import 'leaflet.markercluster/dist/MarkerCluster.css';
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
-declare const __propDef: {
-    props: {
-        options?: MapOptions | undefined;
-        tilesUrl?: string | undefined;
-        attribution?: string | undefined;
-        instance?: Map | undefined;
-        getMarkers?: (() => Marker[]) | undefined;
-    };
-    events: {
-        keypress: CustomEvent<Leaflet.LeafletKeyboardEvent>;
-        keydown: CustomEvent<Leaflet.LeafletKeyboardEvent>;
-        keyup: CustomEvent<Leaflet.LeafletKeyboardEvent>;
-        layeradd: CustomEvent<Leaflet.LayerEvent>;
-        layerremove: CustomEvent<Leaflet.LayerEvent>;
-        baselayerchange: CustomEvent<Leaflet.LayersControlEvent>;
-        overlayadd: CustomEvent<Leaflet.LayersControlEvent>;
-        overlayremove: CustomEvent<Leaflet.LayersControlEvent>;
-        click: CustomEvent<Leaflet.LeafletMouseEvent>;
-        dblclick: CustomEvent<Leaflet.LeafletMouseEvent>;
-        mousedown: CustomEvent<Leaflet.LeafletMouseEvent>;
-        mouseup: CustomEvent<Leaflet.LeafletMouseEvent>;
-        mouseover: CustomEvent<Leaflet.LeafletMouseEvent>;
-        mouseout: CustomEvent<Leaflet.LeafletMouseEvent>;
-        contextmenu: CustomEvent<Leaflet.LeafletMouseEvent>;
-        mousemove: CustomEvent<Leaflet.LeafletMouseEvent>;
-        preclick: CustomEvent<Leaflet.LeafletMouseEvent>;
-        locationfound: CustomEvent<Leaflet.LocationEvent>;
-        locationerror: CustomEvent<Leaflet.ErrorEvent>;
-        load: CustomEvent<Leaflet.LeafletEvent>;
-        move: CustomEvent<Leaflet.LeafletEvent>;
-        moveend: CustomEvent<Leaflet.LeafletEvent>;
-        movestart: CustomEvent<Leaflet.LeafletEvent>;
-        unload: CustomEvent<Leaflet.LeafletEvent>;
-        viewreset: CustomEvent<Leaflet.LeafletEvent>;
-        zoom: CustomEvent<Leaflet.LeafletEvent>;
-        zoomend: CustomEvent<Leaflet.LeafletEvent>;
-        zoomlevelschange: CustomEvent<Leaflet.LeafletEvent>;
-        zoomstart: CustomEvent<Leaflet.LeafletEvent>;
-        resize: CustomEvent<Leaflet.ResizeEvent>;
-        popupopen: CustomEvent<Leaflet.PopupEvent>;
-        popupclose: CustomEvent<Leaflet.PopupEvent>;
-        tooltipopen: CustomEvent<Leaflet.TooltipEvent>;
-        tooltipclose: CustomEvent<Leaflet.TooltipEvent>;
-        autopanstart: CustomEvent<Leaflet.LeafletEvent>;
-        zoomanim: CustomEvent<Leaflet.LeafletEvent>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            map: Map;
-        };
-    };
-};
-export type MapProps = typeof __propDef.props;
-export type MapEvents = typeof __propDef.events;
-export type MapSlots = typeof __propDef.slots;
-export default class Map extends SvelteComponent<MapProps, MapEvents, MapSlots> {
-    get getMarkers(): () => Marker<any>[];
-}
-export {};
+import type { MapOptions, Marker, Map as LeafletMap } from 'leaflet';
+import { type Snippet } from 'svelte';
+import { type MapEvents } from './map.svelte.js';
+declare const Map: import("svelte").Component<{
+    instance?: LeafletMap;
+    options?: MapOptions;
+    markers?: Marker[];
+    tilesUrl?: string;
+    attribution?: string;
+    focusable?: boolean;
+    children?: Snippet;
+} & MapEvents, {
+    getMarkers: () => Marker[];
+}, "instance" | "options" | "markers">;
+export default Map;