@radiofrance/svelte-leaflet 0.1.0-alpha.0

package/README.md

@@ -0,0 +1,91 @@
+# @radiofrance/svelte-leaflet
+
+A library that wraps leaflet classes in domless/renderless svelte components.
+
+## Install
+
+`npm i -D @radiofrance/svelte-leaflet`
+
+## Components
+
+### Map
+
+Renders a map with the given center and zoom level.
+
+#### Attributes
+
+| Attribute     | Type                                                  | Default                                            | Notes                                                                              |
+| ------------- | ----------------------------------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------- |
+| `center`      | [LatLng](https://leafletjs.com/reference.html#latlng) | _required_                                         | initial center of the map.                                                         |
+| `zoom`        | number                                                | _required_                                         | initial zoom level                                                                 |
+| `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 {center} {zoom} on:click={(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.
+- A component with `slot="icon"` attribute can be passed as the Marker child to display a custom icon.
+
+#### 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 |
+
+#### Events
+
+All events are forwarded from the Marker class, see the leaflet documentation for more information.
+
+- https://leafletjs.com/reference.html#marker-event
+
+### Popup
+
+`<Popup>` children will be displayed when the marker is clicked.
+
+- Use as a `<Marker>` child.
+
+#### Attributes
+
+| Name      | Type                                                              | Default | Notes                                |
+| --------- | ----------------------------------------------------------------- | ------- | ------------------------------------ |
+| `options` | [PopupOptions](https://leafletjs.com/reference.html#popup-option) | `{}`    | options to pass to the leaflet popup |
+
+### MarkerClusterGroup
+
+Enables clustering of child markers
+
+- Use as a `<Map>` child
+
+#### Attributes
+
+| 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) |
+
+### Polyline
+
+- Allows to draw lines on the map
+
+#### Attributes
+
+| 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 |

package/dist/Map.svelte

@@ -0,0 +1,50 @@
+<script>import "leaflet/dist/leaflet.css";
+import "leaflet.markercluster/dist/MarkerCluster.css";
+import "leaflet.markercluster/dist/MarkerCluster.Default.css";
+import { createEventDispatcher, setContext } from "svelte";
+let L;
+export let center;
+export let zoom;
+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>`;
+const dispatch = createEventDispatcher();
+let thisMap;
+export const getMarkers = () => {
+  const markers = [];
+  thisMap?.eachLayer((layer) => {
+    if (layer instanceof L.Marker) {
+      markers.push(layer);
+    }
+  });
+  return markers;
+};
+export const map = () => thisMap;
+setContext("map", () => thisMap);
+let container;
+$:
+  thisMap?.setView(center, zoom);
+function resizeMap() {
+  thisMap?.invalidateSize();
+}
+function onLoad() {
+  L = window.L;
+  thisMap = L.map(container).on("baselayerchange", (e) => dispatch("baselayerchange", e)).on("overlayadd", (e) => dispatch("overlayadd", e)).on("overlayremove", (e) => dispatch("overlayremove", e)).on("layeradd", (e) => dispatch("layeradd", e)).on("layerremove", (e) => dispatch("layerremove", e)).on("zoomlevelschange", (e) => dispatch("zoomlevelschange", e)).on("resize", (e) => dispatch("resize", e)).on("unload", (e) => dispatch("unload", e)).on("load", (e) => dispatch("load", e)).on("move", (e) => dispatch("move", e)).on("moveend", (e) => dispatch("moveend", e)).on("movestart", (e) => dispatch("movestart", e)).on("viewreset", (e) => dispatch("viewreset", e)).on("zoom", (e) => dispatch("zoom", e)).on("zoomend", (e) => dispatch("zoomend", e)).on("zoomstart", (e) => dispatch("zoomstart", e)).on("autopanstart", (e) => dispatch("autopanstart", e)).on("popupclose", (e) => dispatch("popupclose", e)).on("popupopen", (e) => dispatch("popupopen", e)).on("tooltipclose", (e) => dispatch("tooltipclose", e)).on("tooltipopen", (e) => dispatch("tooltipopen", e)).on("locationerror", (e) => dispatch("locationerror", e)).on("locationfound", (e) => dispatch("locationfound", e)).on("click", (e) => dispatch("click", e)).on("contextmenu", (e) => dispatch("contextmenu", e)).on("dblclick", (e) => dispatch("dblclick", e)).on("keydown", (e) => dispatch("keydown", e)).on("keypress", (e) => dispatch("keypress", e)).on("keyup", (e) => dispatch("keyup", e)).on("mousedown", (e) => dispatch("mousedown", e)).on("mousemove", (e) => dispatch("mousemove", e)).on("mouseout", (e) => dispatch("mouseout", e)).on("mouseover", (e) => dispatch("mouseover", e)).on("mouseup", (e) => dispatch("mouseup", e)).on("preclick", (e) => dispatch("preclick", e)).on("zoomanim", (e) => dispatch("zoomanim", e)).setView(center, zoom).setMinZoom(5).setMaxZoom(20);
+  L.tileLayer(tilesUrl, {
+    attribution,
+    maxZoom: 20
+  }).addTo(thisMap);
+}
+function leafletLoader(_node) {
+  import("leaflet").then(() => {
+    import("leaflet.markercluster").then(onLoad);
+  });
+}
+</script>
+
+<svelte:window on:resize={resizeMap} use:leafletLoader />
+
+<div class="Map" bind:this={container} style="height: 100%; width: 100%">
+	{#if thisMap}
+		<slot map={thisMap} />
+	{/if}
+</div>

package/dist/Map.svelte.d.ts

@@ -0,0 +1,69 @@
+import { SvelteComponent } from "svelte";
+import type { LatLngExpression, Map, Marker } 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: {
+        center: LatLngExpression;
+        zoom: number;
+        tilesUrl?: string | undefined;
+        attribution?: string | undefined;
+        getMarkers?: (() => Leaflet.Marker[]) | undefined;
+        map?: (() => Map) | undefined;
+    };
+    events: {
+        baselayerchange: CustomEvent<any>;
+        overlayadd: CustomEvent<any>;
+        overlayremove: CustomEvent<any>;
+        layeradd: CustomEvent<any>;
+        layerremove: CustomEvent<any>;
+        zoomlevelschange: CustomEvent<any>;
+        resize: CustomEvent<any>;
+        unload: CustomEvent<any>;
+        load: CustomEvent<any>;
+        move: CustomEvent<any>;
+        moveend: CustomEvent<any>;
+        movestart: CustomEvent<any>;
+        viewreset: CustomEvent<any>;
+        zoom: CustomEvent<any>;
+        zoomend: CustomEvent<any>;
+        zoomstart: CustomEvent<any>;
+        autopanstart: CustomEvent<any>;
+        popupclose: CustomEvent<any>;
+        popupopen: CustomEvent<any>;
+        tooltipclose: CustomEvent<any>;
+        tooltipopen: CustomEvent<any>;
+        locationerror: CustomEvent<any>;
+        locationfound: CustomEvent<any>;
+        click: CustomEvent<any>;
+        contextmenu: CustomEvent<any>;
+        dblclick: CustomEvent<any>;
+        keydown: CustomEvent<any>;
+        keypress: CustomEvent<any>;
+        keyup: CustomEvent<any>;
+        mousedown: CustomEvent<any>;
+        mousemove: CustomEvent<any>;
+        mouseout: CustomEvent<any>;
+        mouseover: CustomEvent<any>;
+        mouseup: CustomEvent<any>;
+        preclick: CustomEvent<any>;
+        zoomanim: CustomEvent<any>;
+    } & {
+        [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>[];
+    get map(): () => Map;
+}
+export {};

package/dist/Marker.svelte

@@ -0,0 +1,75 @@
+<script context="module"></script>
+
+<script>import { createEventDispatcher, getContext, onDestroy, setContext, tick } from "svelte";
+const dispatch = createEventDispatcher();
+const L = globalThis.window.L;
+export let size = 25;
+export let latlng;
+export let id = "";
+let markerElement;
+let marker;
+const getMap = getContext("map");
+const getLayerGroup = getContext("layerGroup");
+setContext("layer", () => marker);
+$:
+  recreateMarker(size, latlng, id);
+async function recreateMarker(size2, latlng2, id2) {
+  removeMarker();
+  await tick();
+  createMarker(size2, latlng2, id2);
+}
+async function createMarker(size2, latlng2, id2) {
+  await tick();
+  const layerGroup = getLayerGroup?.();
+  const map = getMap();
+  const mapOrLayerGroup = layerGroup || map;
+  const markerOptions = {};
+  marker = L.marker(latlng2, markerOptions);
+  marker.id = id2;
+  marker.on("click", (e) => dispatch("click", e)).on("dblclick", (e) => dispatch("dblclick", e)).on("contextmenu", (e) => dispatch("contextmenu", e));
+  mapOrLayerGroup.addLayer(marker);
+  const icon = marker.getIcon();
+  await tick();
+  if (markerElement.childElementCount > 0) {
+    marker.setIcon(
+      L.divIcon({
+        html: markerElement,
+        className: "map-marker",
+        iconSize: L.point(size2, size2)
+      })
+    );
+  }
+}
+function removeMarker() {
+  if (!marker)
+    return;
+  const layerGroup = getLayerGroup?.();
+  const map = getMap();
+  const mapOrLayerGroup = layerGroup || map;
+  mapOrLayerGroup.removeLayer(marker);
+}
+onDestroy(() => {
+  removeMarker();
+});
+</script>
+
+<template>
+	{#key marker}
+		{#if marker}
+			<div bind:this={markerElement} class="leaflet-marker">
+				<slot name="icon" />
+			</div>
+			<slot />
+		{/if}
+	{/key}
+</template>
+
+<style>
+	.leaflet-marker {
+		display: none;
+	}
+
+	:global(.map-marker .leaflet-marker) {
+		display: inherit;
+	}
+</style>

package/dist/Marker.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+type MarkerContext = {
+    id?: string;
+};
+export type Marker = LeafletMarker & MarkerContext;
+import type { LatLngExpression, Marker as LeafletMarker } from 'leaflet';
+declare const __propDef: {
+    props: {
+        size?: number | undefined;
+        latlng: LatLngExpression;
+        id?: string | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+        dblclick: CustomEvent<any>;
+        contextmenu: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+        default: {};
+    };
+};
+export type MarkerProps = typeof __propDef.props;
+export type MarkerEvents = typeof __propDef.events;
+export type MarkerSlots = typeof __propDef.slots;
+export default class Marker extends SvelteComponent<MarkerProps, MarkerEvents, MarkerSlots> {
+}
+export {};

package/dist/MarkerClusterGroup.svelte

@@ -0,0 +1,14 @@
+<script>import { getContext, onMount, setContext } from "svelte";
+export let options = {};
+const L = globalThis.window.L;
+const getMap = getContext("map");
+let markers;
+setContext("layerGroup", () => markers);
+onMount(async () => {
+  const map = getMap();
+  markers = L.markerClusterGroup(options);
+  map.addLayer(markers);
+});
+</script>
+
+<slot />

package/dist/MarkerClusterGroup.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { MarkerClusterGroupOptions } from 'leaflet';
+declare const __propDef: {
+    props: {
+        options?: MarkerClusterGroupOptions | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type MarkerClusterGroupProps = typeof __propDef.props;
+export type MarkerClusterGroupEvents = typeof __propDef.events;
+export type MarkerClusterGroupSlots = typeof __propDef.slots;
+export default class MarkerClusterGroup extends SvelteComponent<MarkerClusterGroupProps, MarkerClusterGroupEvents, MarkerClusterGroupSlots> {
+}
+export {};

package/dist/Polyline.svelte

@@ -0,0 +1,26 @@
+<script>import { createEventDispatcher, getContext, onDestroy, onMount } from "svelte";
+export let latlngs;
+export let options = {};
+let line;
+let map = getContext("map")();
+const dispatch = createEventDispatcher();
+$:
+  updateLine(latlngs, options);
+function updateLine(latLngs, lineStyle) {
+  if (line) {
+    line.setLatLngs(latLngs);
+    line.setStyle(lineStyle);
+  }
+}
+onMount(async () => {
+  const L = window.L;
+  line = new L.Polyline(latlngs);
+  line.on("click", (e) => dispatch("click", e));
+  line.addTo(map);
+});
+onDestroy(() => {
+  line?.remove();
+});
+</script>
+
+<slot />

package/dist/Polyline.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { LatLngExpression, PathOptions } from 'leaflet';
+declare const __propDef: {
+    props: {
+        latlngs: LatLngExpression[];
+        options?: PathOptions | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type PolylineProps = typeof __propDef.props;
+export type PolylineEvents = typeof __propDef.events;
+export type PolylineSlots = typeof __propDef.slots;
+export default class Polyline extends SvelteComponent<PolylineProps, PolylineEvents, PolylineSlots> {
+}
+export {};

package/dist/Popup.svelte

@@ -0,0 +1,46 @@
+<script>import { getContext, onDestroy, onMount, tick } from "svelte";
+const L = globalThis.window.L;
+export let options = {
+  autoPan: false
+};
+let popup = void 0;
+let popupElement;
+let showContents = false;
+let popupOpen = false;
+const getLayer = getContext("layer");
+let layer;
+function removePopup() {
+  if (!popup)
+    return;
+  layer.unbindPopup();
+  popup.remove();
+}
+async function createPopup() {
+  await tick();
+  layer = getLayer();
+  popup = L.popup().setContent(popupElement);
+  layer.bindPopup(popup, options);
+  layer.on("popupopen", () => {
+    popupOpen = true;
+    showContents = true;
+  });
+  layer.on("popupclose", () => {
+    popupOpen = false;
+    setTimeout(() => {
+      if (!popupOpen) {
+        showContents = false;
+      }
+    }, 500);
+  });
+}
+onMount(createPopup);
+onDestroy(() => {
+  removePopup();
+});
+</script>
+
+<div bind:this={popupElement}>
+	{#if showContents}
+		<slot />
+	{/if}
+</div>

package/dist/Popup.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { PopupOptions } from 'leaflet';
+declare const __propDef: {
+    props: {
+        options?: PopupOptions | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type PopupProps = typeof __propDef.props;
+export type PopupEvents = typeof __propDef.events;
+export type PopupSlots = typeof __propDef.slots;
+export default class Popup extends SvelteComponent<PopupProps, PopupEvents, PopupSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Map } from './Map.svelte';
+export { default as Marker } from './Marker.svelte';
+export { default as MarkerClusterGroup } from './MarkerClusterGroup.svelte';
+export { default as Polyline } from './Polyline.svelte';
+export { default as Popup } from './Popup.svelte';
+export type { LatLngTuple, LatLng, LatLngExpression } from 'leaflet';

package/dist/index.js

@@ -0,0 +1,6 @@
+// Reexport your entry components here
+export { default as Map } from './Map.svelte';
+export { default as Marker } from './Marker.svelte';
+export { default as MarkerClusterGroup } from './MarkerClusterGroup.svelte';
+export { default as Polyline } from './Polyline.svelte';
+export { default as Popup } from './Popup.svelte';

package/package.json

@@ -0,0 +1,74 @@
+{
+	"name": "@radiofrance/svelte-leaflet",
+	"version": "0.1.0-alpha.0",
+	"description": "A library that wraps leaflet classes in domless/renderless svelte components.",
+	"author": {
+		"email": "romain.durand@radiofrance.com",
+		"name": "Romain Durand"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/radiofrance/svelte-leaflet"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"test": "npm run test:integration && npm run test:unit",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
+		"test:integration": "playwright test",
+		"test:unit": "vitest"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.28.1",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@types/d3-scale": "^4.0.8",
+		"@types/d3-scale-chromatic": "^3.0.3",
+		"@types/eslint": "8.56.0",
+		"@types/leaflet": "^1.9.8",
+		"@types/leaflet.markercluster": "^1.5.4",
+		"@typescript-eslint/eslint-plugin": "^6.0.0",
+		"@typescript-eslint/parser": "^6.0.0",
+		"d3-scale": "^4.0.2",
+		"d3-scale-chromatic": "^3.0.0",
+		"eslint": "^8.56.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.35.1",
+		"leaflet": "^1.9.4",
+		"leaflet.markercluster": "^1.5.3",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"publint": "^0.1.9",
+		"svelte": "^4.2.7",
+		"svelte-check": "^3.6.0",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.11",
+		"vitest": "^1.2.0"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module"
+}