@radiofrance/svelte-leaflet 0.1.0-alpha.7 → 0.1.0-alpha.9

package/dist/Circle.svelte

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

package/dist/Circle.svelte.d.ts

@@ -1,12 +1,26 @@
 import { SvelteComponent } from "svelte";
-import type { LatLngExpression } from 'leaflet';
+import type { Circle as LeafletCircle, LatLngExpression } from 'leaflet';
 declare const __propDef: {
     props: {
         center: LatLngExpression;
         options?: import("leaflet").CircleMarkerOptions | undefined;
+        instance?: LeafletCircle | undefined;
     };
     events: {
-        click: CustomEvent<any>;
+        click: CustomEvent<import("leaflet").LeafletMouseEvent>;
+        dblclick: CustomEvent<import("leaflet").LeafletMouseEvent>;
+        mousedown: CustomEvent<import("leaflet").LeafletMouseEvent>;
+        mouseup: CustomEvent<import("leaflet").LeafletMouseEvent>;
+        mouseover: CustomEvent<import("leaflet").LeafletMouseEvent>;
+        mouseout: CustomEvent<import("leaflet").LeafletMouseEvent>;
+        contextmenu: CustomEvent<import("leaflet").LeafletMouseEvent>;
+        move: CustomEvent<import("leaflet").LeafletEvent>;
+        popupopen: CustomEvent<import("leaflet").PopupEvent>;
+        popupclose: CustomEvent<import("leaflet").PopupEvent>;
+        tooltipopen: CustomEvent<import("leaflet").TooltipEvent>;
+        tooltipclose: CustomEvent<import("leaflet").TooltipEvent>;
+        add: CustomEvent<import("leaflet").LeafletEvent>;
+        remove: CustomEvent<import("leaflet").LeafletEvent>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/Map.svelte

@@ -1,38 +1,72 @@
 <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();
-let thisMap;
 export const getMarkers = () => {
   const markers = [];
-  thisMap?.eachLayer((layer) => {
+  instance?.eachLayer((layer) => {
     if (layer instanceof L.Marker) {
       markers.push(layer);
     }
   });
   return markers;
 };
-export const map = () => thisMap;
-setContext("map", () => thisMap);
+setContext("map", () => instance);
 let container;
 $:
-  if (thisMap)
-    thisMap.options = Object.assign(thisMap.options, options);
+  if (instance)
+    instance.options = Object.assign(instance.options, options);
 function resizeMap() {
-  thisMap?.invalidateSize();
+  instance?.invalidateSize();
 }
+const events = [
+  ...keyboardEvents,
+  ...layerGroupEvents,
+  ...layersControlEvents,
+  ...leafletMouseEvents,
+  ...locationEvents,
+  ...mapStateChangeEvents,
+  ...popupEvents,
+  ...tooltipEvents,
+  "autopanstart",
+  "zoomanim"
+];
 function onLoad() {
   L = window.L;
-  thisMap = L.map(container, options).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));
+  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
-    // maxZoom: 20
-  }).addTo(thisMap);
+  }).addTo(instance);
+  instance.whenReady(() => {
+    instance.fireEvent("load");
+  });
 }
 function leafletLoader(_node) {
   import("leaflet").then(() => {
@@ -44,7 +78,7 @@ function leafletLoader(_node) {
 <svelte:window on:resize={resizeMap} use:leafletLoader />
 
 <div class="Map" bind:this={container} style="height: 100%; width: 100%">
-	{#if thisMap}
-		<slot map={thisMap} />
+	{#if instance}
+		<slot map={instance} />
 	{/if}
 </div>

package/dist/Map.svelte.d.ts

@@ -1,5 +1,6 @@
 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';
@@ -8,46 +9,46 @@ declare const __propDef: {
         options?: MapOptions | undefined;
         tilesUrl?: string | undefined;
         attribution?: string | undefined;
+        instance?: Map | undefined;
         getMarkers?: (() => 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>;
+        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>;
     };
@@ -62,6 +63,5 @@ 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/MarkerClusterGroup.svelte

@@ -1,14 +1,44 @@
-<script>import { getContext, onMount, setContext } from "svelte";
+<script>import { getContext, onMount, setContext, tick } from "svelte";
 export let options = {};
+export let icon = null;
+let markerElement;
 const L = globalThis.window.L;
 const getMap = getContext("map");
-let markers;
-setContext("layerGroup", () => markers);
+let clusterGroup;
+setContext("layerGroup", () => clusterGroup);
 onMount(async () => {
   const map = getMap();
-  markers = L.markerClusterGroup(options);
-  map.addLayer(markers);
+  if (icon) {
+    options.iconCreateFunction = function(cluster) {
+      const html = document.createElement("div");
+      new icon({ target: html, props: { count: cluster.getChildCount() } });
+      return L.divIcon({ html, className: "foobar" });
+    };
+  }
+  if (markerElement.childElementCount > 0) {
+    options.iconCreateFunction = function(cluster) {
+      const html = markerElement.innerHTML.replace("%count%", cluster.getChildCount().toString());
+      return L.divIcon({ html, className: "" });
+    };
+  }
+  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>

package/dist/MarkerClusterGroup.svelte.d.ts

@@ -3,12 +3,14 @@ import type { MarkerClusterGroupOptions } from 'leaflet';
 declare const __propDef: {
     props: {
         options?: MarkerClusterGroupOptions | undefined;
+        icon?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {};
+        icon: {};
     };
 };
 export type MarkerClusterGroupProps = typeof __propDef.props;

package/dist/index.d.ts

@@ -1,7 +1,54 @@
+import type { DragEndEvent, ErrorEvent, Evented, LayerEvent, LayersControlEvent, LeafletEvent, LeafletKeyboardEvent, LeafletMouseEvent, LocationEvent, PopupEvent, ResizeEvent, TooltipEvent } from 'leaflet';
+import type { EventDispatcher } from 'svelte';
 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 { default as Circle } from './Circle.svelte';
 export type { Marker as LeafletMarker } from './Marker.svelte';
-export type { CircleOptions, LatLngExpression, LatLngLiteral, LatLngTuple, LeafletEvent, LeafletKeyboardEvent, LeafletMouseEvent, Map as LeafletMap, MapOptions, MarkerOptions, PathOptions } from 'leaflet';
+export type { Circle as LeafletCircle, CircleOptions, DragEndEvent, ErrorEvent, LatLngExpression, LatLngLiteral, LatLngTuple, LayerEvent, LayersControlEvent, LeafletEvent, LeafletKeyboardEvent, LeafletMouseEvent, LocationEvent, Map as LeafletMap, MapOptions, MarkerOptions, PathOptions, PopupEvent, PopupOptions, ResizeEvent, TooltipEvent } from 'leaflet';
+export declare function bindEvents(instance: Evented, dispatch: EventDispatcher<Record<string, unknown>>, events: readonly string[]): void;
+export declare const interactiveLayerEvents: readonly ["click", "dblclick", "mousedown", "mouseup", "mouseover", "mouseout", "contextmenu"];
+export declare const keyboardEvents: readonly ["keypress", "keydown", "keyup"];
+export declare const locationEvents: readonly ["locationfound", "locationerror"];
+export declare const leafletMouseEvents: readonly ["click", "dblclick", "mousedown", "mouseup", "mouseover", "mouseout", "contextmenu", "mousemove", "preclick"];
+export declare const layerEvents: readonly ["add", "remove"];
+export declare const popupEvents: readonly ["popupopen", "popupclose"];
+export declare const tooltipEvents: readonly ["tooltipopen", "tooltipclose"];
+export declare const layerGroupEvents: readonly ["layeradd", "layerremove"];
+export declare const layersControlEvents: readonly ["baselayerchange", "overlayadd", "overlayremove"];
+declare const leafletEvents: readonly ["load", "move", "moveend", "movestart", "unload", "viewreset", "zoom", "zoomend", "zoomlevelschange", "zoomstart"];
+export declare const mapStateChangeEvents: readonly ["load", "move", "moveend", "movestart", "unload", "viewreset", "zoom", "zoomend", "zoomlevelschange", "zoomstart", "resize"];
+type LeafletEventTypes = {
+    resize: ResizeEvent;
+    locationerror: ErrorEvent;
+    locationfound: LocationEvent;
+    add: LeafletEvent;
+    remove: LeafletEvent;
+    dragend: DragEndEvent;
+} & LeafletEvents & LayersControlEvents & MouseEvents & PopupEvents & TooltipEvents & LayerGroupEvents & KeyboardEvents;
+type LeafletEvents = {
+    [K in (typeof leafletEvents)[number]]: LeafletEvent;
+};
+type LayersControlEvents = {
+    [K in (typeof layersControlEvents)[number]]: LayersControlEvent;
+};
+type MouseEvents = {
+    [K in (typeof leafletMouseEvents)[number]]: LeafletMouseEvent;
+};
+type PopupEvents = {
+    [K in (typeof popupEvents)[number]]: PopupEvent;
+};
+type TooltipEvents = {
+    [K in (typeof tooltipEvents)[number]]: TooltipEvent;
+};
+type LayerGroupEvents = {
+    [K in (typeof layerGroupEvents)[number]]: LayerEvent;
+};
+type KeyboardEvents = {
+    [K in (typeof keyboardEvents)[number]]: LeafletKeyboardEvent;
+};
+export type LeafletEventsRecord<T extends readonly string[]> = {
+    [K in T[number]]: K extends keyof LeafletEventTypes ? LeafletEventTypes[K] : LeafletEvent;
+};

package/dist/index.js

@@ -4,3 +4,54 @@ 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 { default as Circle } from './Circle.svelte';
+export function bindEvents(instance, dispatch, events) {
+    events.forEach((event) => {
+        instance.on(event, (e) => dispatch(event, e));
+    });
+}
+// export const leafletEvents = [
+// 	'dragstart',
+// 	'drag',
+// 	'add',
+// 	'remove',
+// 	'loading',
+// 	'error',
+// 	'update',
+// 	'down',
+// 	'predrag'
+// ] as const;
+// export const resizeEvents = ['resize'] as const;
+// export const zoomAnimEvents = ['zoomanim'] as const;
+// export const tileEvents = ['tileunload', 'tileloadstart', 'tileload', 'tileabort'] as const;
+// export const tileErrorEvents = ['tileerror'] as const;
+export const interactiveLayerEvents = [
+    'click',
+    'dblclick',
+    'mousedown',
+    'mouseup',
+    'mouseover',
+    'mouseout',
+    'contextmenu'
+];
+export const keyboardEvents = ['keypress', 'keydown', 'keyup'];
+export const locationEvents = ['locationfound', 'locationerror'];
+export const leafletMouseEvents = [...interactiveLayerEvents, 'mousemove', 'preclick'];
+export const layerEvents = ['add', 'remove'];
+export const popupEvents = ['popupopen', 'popupclose'];
+export const tooltipEvents = ['tooltipopen', 'tooltipclose'];
+export const layerGroupEvents = ['layeradd', 'layerremove'];
+export const layersControlEvents = ['baselayerchange', 'overlayadd', 'overlayremove'];
+const leafletEvents = [
+    'load',
+    'move',
+    'moveend',
+    'movestart',
+    'unload',
+    'viewreset',
+    'zoom',
+    'zoomend',
+    'zoomlevelschange',
+    'zoomstart'
+];
+export const mapStateChangeEvents = [...leafletEvents, 'resize'];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@radiofrance/svelte-leaflet",
-	"version": "0.1.0-alpha.7",
+	"version": "0.1.0-alpha.9",
 	"description": "A library that wraps leaflet classes in domless/renderless svelte components.",
 	"keywords": [
 		"svelte",