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

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
+- ✅ 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
+- Canvas
 
-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/Map.svelte

@@ -9,7 +9,7 @@
 	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 { mapEvents, updateMapProps, type MapEvents } from './map.js';
 	import { FOCUSABLE, MAP } from './contexts.js';
 
 	type Props = {
@@ -33,6 +33,10 @@
 		...restProps
 	}: Props = $props();
 
+	setContext(MAP, () => instance);
+	setContext(FOCUSABLE, focusable ? null : -1);
+	let container: HTMLElement | null = $state(null);
+
 	const defaultOptions = {
 		center: [48.852, 2.278] as LatLngTuple,
 		trackResize: true,
@@ -40,20 +44,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) {

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/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;

package/dist/Popup.svelte

@@ -9,7 +9,7 @@
 	} from 'leaflet';
 	import { getContext, onDestroy, onMount, type Snippet } from 'svelte';
 	import { bindEvents } from './index.js';
-	import { popupEvents, updatePopupProps, type PopupEvents } from './popup.svelte.js';
+	import { popupEvents, updatePopupProps, type PopupEvents } from './popup.js';
 	import { LAYERGROUP, MAP, MARKER } from './contexts.js';
 
 	type Props = {

package/dist/Popup.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { LatLngExpression, PopupOptions, Popup as LeafletPopup } from 'leaflet';
 import { type Snippet } from 'svelte';
-import { type PopupEvents } from './popup.svelte.js';
+import { type PopupEvents } from './popup.js';
 declare const Popup: import("svelte").Component<{
     latlng?: LatLngExpression;
     options?: PopupOptions;

package/dist/ZoomControl.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { getContext, onMount, type Snippet } from 'svelte';
+	import type { Control, Map as LeafletMap } from 'leaflet';
+	import { MAP } from './contexts.js';
+
+	type Props = {
+		instance?: L.Control;
+		children?: Snippet;
+		options?: Control.ZoomOptions;
+	};
+
+	let { instance = $bindable(), options }: Props = $props();
+
+	const getMap = getContext<() => LeafletMap>(MAP);
+
+	onMount(() => {
+		const map = getMap();
+		instance = window.L.control.zoom(options);
+		instance.addTo(map);
+	});
+</script>

package/dist/ZoomControl.svelte.d.ts

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

package/dist/index.d.ts

@@ -1,13 +1,14 @@
-import type { ControlPosition, Evented, LatLngExpression, LeafletEventHandlerFnMap, LocateOptions } from 'leaflet';
+import type { ControlPosition, Evented, LatLngExpression, LeafletEvent as OriginalLeafletEvent, LeafletEventHandlerFnMap, LocateOptions } from 'leaflet';
 import DivIcon from './DivIcon.svelte';
+import LocateControl from './LocateControl.svelte';
 import Map from './Map.svelte';
 import Marker from './Marker.svelte';
 import MarkerClusterGroup from './MarkerClusterGroup.svelte';
-import Popup from './Popup.svelte';
 import Polygon from './Polygon.svelte';
-import LocateControl from './LocateControl.svelte';
-export { DivIcon, Map, Marker, MarkerClusterGroup, Popup, Polygon, LocateControl };
-export type { Circle as LeafletCircle, CircleOptions, DragEndEvent, ErrorEvent, LatLngBoundsLiteral, LatLngExpression, LatLngLiteral, LatLngTuple, LayerEvent, LayersControlEvent, LeafletEvent, LeafletKeyboardEvent, LeafletMouseEvent, LocationEvent, Map as LeafletMap, MapOptions, MarkerOptions, PathOptions, PopupEvent, PopupOptions, ResizeEvent, TooltipEvent, } from 'leaflet';
+import Polyline from './Polyline.svelte';
+import Popup from './Popup.svelte';
+export { DivIcon, Map, Marker, MarkerClusterGroup, Popup, Polyline, Polygon, LocateControl };
+export type { Circle as LeafletCircle, CircleOptions, DragEndEvent, ErrorEvent, LatLngBoundsLiteral, LatLngExpression, LatLngLiteral, LatLngTuple, LayerEvent, LayersControlEvent, LeafletKeyboardEvent, LeafletMouseEvent, LocationEvent, Map as LeafletMap, Marker as LeafletMarker, MapOptions, MarkerOptions, PathOptions, PopupEvent, PopupOptions, ResizeEvent, TooltipEvent, } from 'leaflet';
 export type Latlngs<D = 2> = 2 extends D ? LatLngExpression[] | LatLngExpression[][] : 3 extends D ? LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][] : never;
 export type PrefixedLeafletEventHandlerFnMap = {
     [K in keyof LeafletEventHandlerFnMap as `on${K}`]: LeafletEventHandlerFnMap[K];
@@ -17,3 +18,6 @@ export type LocateControlOptions = {
     position?: ControlPosition;
     options?: LocateOptions;
 };
+export type LeafletEvent<SourceTarget = any> = Omit<OriginalLeafletEvent, 'sourceTarget'> & {
+    sourceTarget: SourceTarget;
+};

package/dist/index.js

@@ -1,12 +1,13 @@
 // Reexport your entry components here
 import DivIcon from './DivIcon.svelte';
+import LocateControl from './LocateControl.svelte';
 import Map from './Map.svelte';
 import Marker from './Marker.svelte';
 import MarkerClusterGroup from './MarkerClusterGroup.svelte';
-import Popup from './Popup.svelte';
 import Polygon from './Polygon.svelte';
-import LocateControl from './LocateControl.svelte';
-export { DivIcon, Map, Marker, MarkerClusterGroup, Popup, Polygon, LocateControl };
+import Polyline from './Polyline.svelte';
+import Popup from './Popup.svelte';
+export { DivIcon, Map, Marker, MarkerClusterGroup, Popup, Polyline, Polygon, LocateControl };
 export function bindEvents(instance, eventsProps, events) {
     events.forEach((event) => {
         const eventCallback = eventsProps[`on${event}`];

package/dist/{markerClusterGroup.svelte.d.ts → markerClusterGroup.d.ts}

@@ -1,4 +1,4 @@
-import { type MarkerEvents } from './marker.svelte.js';
+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"];

package/dist/{markerClusterGroup.svelte.js → markerClusterGroup.js}

@@ -1,4 +1,4 @@
-import { markerEvents } from './marker.svelte.js';
+import { markerEvents } from './marker.js';
 const clusteredMarkerEvents = markerEvents.map((event) => `cluster${event}`);
 const clusterSpecificEvents = ['animationend', 'spiderfied', 'unspiderfied'];
 export const markerClusterGroupEvents = [

package/dist/utils.d.ts

@@ -10,3 +10,6 @@ export type CreateSvelteEventsMap<EventNames extends readonly (keyof LeafletEven
         sourceTarget: SourceTarget;
     }) => void;
 };
+export type Simplify<T> = T extends object ? T extends infer O ? {
+    [K in keyof O]: Simplify<O[K]>;
+} : never : T;

package/package.json

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