@radiofrance/svelte-leaflet 0.1.0-alpha.12 → 0.1.0-alpha.13

package/dist/Circle.svelte

@@ -1,40 +1,33 @@
 <script>import { createEventDispatcher, getContext, onDestroy, onMount } from "svelte";
-import {
-  bindEvents,
-  interactiveLayerEvents,
-  layerEvents,
-  popupEvents,
-  tooltipEvents
-} from "./index.js";
+import { bindEvents, interactiveLayerEvents, layerEvents, popupEvents, tooltipEvents } from "./index.js";
 export let center;
 export let options = { radius: 100 };
 export let instance = void 0;
 const events = [
-  "move",
-  ...interactiveLayerEvents,
-  ...layerEvents,
-  ...popupEvents,
-  ...tooltipEvents
+    "move",
+    ...interactiveLayerEvents,
+    ...layerEvents,
+    ...popupEvents,
+    ...tooltipEvents
 ];
 let map = getContext("map")();
 const dispatch = createEventDispatcher();
-$:
-  updateCircle(center, options);
+$: updateCircle(center, options);
 function updateCircle(center2, options2) {
-  if (instance) {
-    instance.setLatLng(center2);
-    instance.setStyle(options2);
-    instance.setRadius(options2.radius);
-  }
+    if (instance) {
+        instance.setLatLng(center2);
+        instance.setStyle(options2);
+        instance.setRadius(options2.radius);
+    }
 }
 onMount(async () => {
-  const L = window.L;
-  instance = new L.Circle(center, options);
-  bindEvents(instance, dispatch, events);
-  instance.addTo(map);
+    const L = window.L;
+    instance = new L.Circle(center, options);
+    bindEvents(instance, dispatch, events);
+    instance.addTo(map);
 });
 onDestroy(() => {
-  instance?.remove();
+    instance?.remove();
 });
 </script>
 

package/dist/Map.svelte

@@ -5,20 +5,11 @@ 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, tick } from "svelte";
-import {
-  bindEvents,
-  keyboardEvents,
-  layerGroupEvents,
-  layersControlEvents,
-  leafletMouseEvents,
-  locationEvents,
-  mapStateChangeEvents,
-  popupEvents,
-  tooltipEvents
-} from "./index.js";
+import { bindEvents, keyboardEvents, layerGroupEvents, layersControlEvents, leafletMouseEvents, locationEvents, mapStateChangeEvents, popupEvents, tooltipEvents } from "./index.js";
 import GeolocationButton from "./private/GeolocationButton.svelte";
 let L;
 let locateButtonContainer;
+const defaultOptions = { center: [46.6188459, 1.7262114], zoom: 7, maxZoom: 18 };
 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>`;
@@ -26,72 +17,72 @@ export let instance = null;
 export let locateControl = void 0;
 const dispatch = createEventDispatcher();
 export const getMarkers = () => {
-  const markers = [];
-  instance?.eachLayer((layer) => {
-    if (layer instanceof L.Marker) {
-      markers.push(layer);
-    }
-  });
-  return markers;
+    const markers = [];
+    instance?.eachLayer((layer) => {
+        if (layer instanceof L.Marker) {
+            markers.push(layer);
+        }
+    });
+    return markers;
 };
 setContext("map", () => instance);
 let container;
-$:
-  if (instance)
+$: if (instance) {
     instance.options = Object.assign(instance.options, options);
+}
 function resizeMap() {
-  instance?.invalidateSize();
+    instance?.invalidateSize();
 }
 const events = [
-  ...keyboardEvents,
-  ...layerGroupEvents,
-  ...layersControlEvents,
-  ...leafletMouseEvents,
-  ...locationEvents,
-  ...mapStateChangeEvents,
-  ...popupEvents,
-  ...tooltipEvents,
-  "autopanstart",
-  "zoomanim"
+    ...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(async () => {
-    instance.fireEvent("load");
-    await tick();
-    if (locateControl) {
-      const control = L.Control.extend({
-        position: "topleft",
-        onAdd() {
-          const button = locateButtonContainer.firstChild;
-          button.onclick = (e) => {
-            e.stopPropagation();
-            instance.locate(locateControl?.options);
-          };
-          return button;
+    L = window.L;
+    delete L.Icon.Default.prototype._getIconUrl;
+    L.Icon.Default.mergeOptions({
+        iconRetinaUrl: markerIcon2x,
+        iconUrl: markerIcon,
+        shadowUrl: markerShadow
+    });
+    instance = L.map(container, { ...defaultOptions, ...options });
+    bindEvents(instance, dispatch, events);
+    L.tileLayer(tilesUrl, {
+        attribution
+    }).addTo(instance);
+    instance.whenReady(async () => {
+        instance.fireEvent("load");
+        await tick();
+        if (locateControl) {
+            const control = L.Control.extend({
+                position: "topleft",
+                onAdd() {
+                    const button = locateButtonContainer.firstChild;
+                    button.onclick = (e) => {
+                        e.stopPropagation();
+                        instance.locate(locateControl?.options);
+                    };
+                    return button;
+                }
+            });
+            instance.addControl(new control(locateControl));
         }
-      });
-      instance.addControl(new control(locateControl));
-    }
-  });
+    });
 }
 function leafletLoader(_node) {
-  (async function() {
-    await import("leaflet");
-    await import("leaflet.markercluster");
-    onLoad();
-  })();
+    (async function () {
+        await import("leaflet");
+        await import("leaflet.markercluster");
+        onLoad();
+    })();
 }
 </script>
 
@@ -99,7 +90,7 @@ function leafletLoader(_node) {
 
 <div class="Map" bind:this={container} style="height: 100%; width: 100%">
 	{#if instance}
-		<slot map={instance} />
+		<slot />
 	{/if}
 </div>
 <div class="locate-button-container" bind:this={locateButtonContainer}>
@@ -108,12 +99,4 @@ function leafletLoader(_node) {
 	</slot>
 </div>
 
-<style>
-	.Map {
-		z-index: 0;
-	}
-
-	.locate-button-container {
-		display: none;
-	}
-</style>
+<style>.Map{z-index:0}.locate-button-container{display:none}</style>

package/dist/Map.svelte.d.ts

@@ -55,9 +55,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {
-            map: Map;
-        };
+        default: {};
         'locate-button': {};
     };
 };

package/dist/Marker.svelte

@@ -1,4 +1,5 @@
-<script context="module"></script>
+<script context="module">"use strict";
+</script>
 
 <script>import { createEventDispatcher, getContext, onDestroy, setContext, tick } from "svelte";
 const dispatch = createEventDispatcher();
@@ -12,43 +13,40 @@ let marker;
 const getMap = getContext("map");
 const getLayerGroup = getContext("layerGroup");
 setContext("layer", () => marker);
-$:
-  recreateMarker(size, latlng, id, options);
+$: recreateMarker(size, latlng, id, options);
 async function recreateMarker(size2, latlng2, id2, options2) {
-  removeMarker();
-  await tick();
-  createMarker(size2, latlng2, id2, options2);
+    removeMarker();
+    await tick();
+    createMarker(size2, latlng2, id2, options2);
 }
 async function createMarker(size2, latlng2, id2, options2) {
-  await tick();
-  const layerGroup = getLayerGroup?.();
-  const map = getMap();
-  const mapOrLayerGroup = layerGroup || map;
-  marker = L.marker(latlng2, options2);
-  marker.id = id2;
-  marker.on("click", (e) => dispatch("click", e)).on("dblclick", (e) => dispatch("dblclick", e)).on("contextmenu", (e) => dispatch("contextmenu", e)).on("dragstart", (e) => dispatch("dragstart", e)).on("drag", (e) => dispatch("drag", e)).on("dragend", (e) => dispatch("dragend", e));
-  mapOrLayerGroup.addLayer(marker);
-  await tick();
-  if (markerElement.childElementCount > 0) {
-    marker.setIcon(
-      L.divIcon({
-        html: markerElement,
-        className: "map-marker",
-        iconSize: L.point(size2, size2)
-      })
-    );
-  }
+    await tick();
+    const layerGroup = getLayerGroup?.();
+    const map = getMap();
+    const mapOrLayerGroup = layerGroup || map;
+    marker = L.marker(latlng2, options2);
+    marker.id = id2;
+    marker.on("click", (e) => dispatch("click", e)).on("dblclick", (e) => dispatch("dblclick", e)).on("contextmenu", (e) => dispatch("contextmenu", e)).on("dragstart", (e) => dispatch("dragstart", e)).on("drag", (e) => dispatch("drag", e)).on("dragend", (e) => dispatch("dragend", e));
+    mapOrLayerGroup.addLayer(marker);
+    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);
+    if (!marker)
+        return;
+    const layerGroup = getLayerGroup?.();
+    const map = getMap();
+    const mapOrLayerGroup = layerGroup || map;
+    mapOrLayerGroup.removeLayer(marker);
 }
 onDestroy(() => {
-  removeMarker();
+    removeMarker();
 });
 </script>
 
@@ -61,12 +59,4 @@ onDestroy(() => {
 	{/if}
 {/key}
 
-<style>
-	.leaflet-marker {
-		display: none;
-	}
-
-	:global(.map-marker .leaflet-marker) {
-		display: inherit;
-	}
-</style>
+<style>.leaflet-marker{display:none}:global(.map-marker .leaflet-marker){display:inherit}</style>

package/dist/MarkerClusterGroup.svelte

@@ -7,38 +7,30 @@ const getMap = getContext("map");
 let clusterGroup;
 setContext("layerGroup", () => clusterGroup);
 onMount(async () => {
-  const map = getMap();
-  if (icon) {
-    options.iconCreateFunction = function(cluster) {
-      const html = document.createElement("div");
-      new icon({ target: html, props: { count: cluster.getChildCount() } });
-      return L.divIcon({ html });
-    };
-  }
-  if (markerElement.childElementCount > 0) {
-    options.iconCreateFunction = function(cluster) {
-      const html = markerElement.innerHTML.replace("%count%", cluster.getChildCount().toString());
-      return L.divIcon({ html });
-    };
-  }
-  clusterGroup = L.markerClusterGroup(options);
-  map.addLayer(clusterGroup);
+    const map = getMap();
+    if (icon) {
+        options.iconCreateFunction = function (cluster) {
+            const html = document.createElement("div");
+            new icon({ target: html, props: { count: cluster.getChildCount() } });
+            return L.divIcon({ html });
+        };
+    }
+    if (markerElement.childElementCount > 0) {
+        options.iconCreateFunction = function (cluster) {
+            const html = markerElement.innerHTML.replace("%count%", cluster.getChildCount().toString());
+            return L.divIcon({ html });
+        };
+    }
+    clusterGroup = L.markerClusterGroup(options);
+    map.addLayer(clusterGroup);
 });
 </script>
 
 <slot />
-<template>
+
 	<div bind:this={markerElement} class="leaflet-markercluster">
 		<slot name="icon" />
 	</div>
-</template>
 
-<style>
-	/* .leaflet-markercluster {
-		display: none;
-	}
 
-	:global(.map-marker .leaflet-markercluster) {
-		display: inherit;
-	} */
-</style>
+<style></style>

package/dist/Polyline.svelte

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

package/dist/Popup.svelte

@@ -1,7 +1,7 @@
 <script>import { getContext, onDestroy, onMount, tick } from "svelte";
 const L = globalThis.window.L;
 export let options = {
-  autoPan: false
+    autoPan: false
 };
 let popup = void 0;
 let popupElement;
@@ -10,34 +10,34 @@ let popupOpen = false;
 const getLayer = getContext("layer");
 let layer;
 function removePopup() {
-  if (!popup)
-    return;
-  layer.unbindPopup();
-  popup.remove();
+    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", async () => {
-    popupOpen = true;
-    showContents = true;
     await tick();
-    popup?.update();
-  });
-  layer.on("popupclose", async () => {
-    popupOpen = false;
-    setTimeout(() => {
-      if (!popupOpen) {
-        showContents = false;
-      }
-    }, 200);
-  });
+    layer = getLayer();
+    popup = L.popup().setContent(popupElement);
+    layer.bindPopup(popup, options);
+    layer.on("popupopen", async () => {
+        popupOpen = true;
+        showContents = true;
+        await tick();
+        popup?.update();
+    });
+    layer.on("popupclose", async () => {
+        popupOpen = false;
+        setTimeout(() => {
+            if (!popupOpen) {
+                showContents = false;
+            }
+        }, 200);
+    });
 }
 onMount(createPopup);
 onDestroy(() => {
-  removePopup();
+    removePopup();
 });
 </script>
 

package/dist/private/GeolocationButton.svelte

@@ -8,25 +8,4 @@
 	</button>
 </div>
 
-<style>
-	button {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 30px;
-		height: 30px;
-		background-color: white;
-		cursor: pointer;
-		border: none;
-		border-radius: 2px;
-	}
-
-	button:hover {
-		background-color: #f4f4f4;
-	}
-
-	div {
-		border-radius: 4px;
-		border: 2px solid rgba(0, 0, 0, 0.2);
-	}
-</style>
+<style>button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;background-color:#fff;cursor:pointer;border:0;border-radius:2px}button:hover{background-color:#f4f4f4}div{border-radius:4px;border:2px solid rgba(0,0,0,.2)}</style>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@radiofrance/svelte-leaflet",
-	"version": "0.1.0-alpha.12",
+	"version": "0.1.0-alpha.13",
 	"description": "A library that wraps leaflet classes in domless/renderless svelte components.",
 	"keywords": [
 		"svelte",
@@ -46,6 +46,7 @@
 		"svelte": "^4.0.0"
 	},
 	"devDependencies": {
+		"@csstools/postcss-global-data": "^2.1.1",
 		"@playwright/test": "^1.28.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
@@ -56,16 +57,21 @@
 		"@types/eslint": "8.56.0",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",
+		"autoprefixer": "^10.4.19",
 		"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",
+		"postcss": "^8.4.39",
+		"postcss-csso": "^6.0.1",
+		"postcss-preset-env": "^9.6.0",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"publint": "^0.1.9",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
+		"svelte-preprocess": "^6.0.1",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.11",