@radiofrance/svelte-leaflet 0.1.0-alpha.3 → 0.1.0-alpha.5

package/dist/Circle.svelte

@@ -0,0 +1,26 @@
+<script>import { createEventDispatcher, getContext, onDestroy, onMount } from "svelte";
+export let center;
+export let options = { radius: 100 };
+let circle;
+let map = getContext("map")();
+const dispatch = createEventDispatcher();
+$:
+  updateCicle(center, options);
+function updateCicle(center2, options2) {
+  if (circle) {
+    circle.setLatLng(center2);
+    circle.options = options2;
+  }
+}
+onMount(async () => {
+  const L = window.L;
+  circle = new L.Circle(center, options);
+  circle.on("click", (e) => dispatch("click", e));
+  circle.addTo(map);
+});
+onDestroy(() => {
+  circle?.remove();
+});
+</script>
+
+<slot />

package/dist/Circle.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { LatLngExpression } from 'leaflet';
+declare const __propDef: {
+    props: {
+        center: LatLngExpression;
+        options?: import("leaflet").CircleMarkerOptions | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type CircleProps = typeof __propDef.props;
+export type CircleEvents = typeof __propDef.events;
+export type CircleSlots = typeof __propDef.slots;
+export default class Circle extends SvelteComponent<CircleProps, CircleEvents, CircleSlots> {
+}
+export {};

package/dist/Marker.svelte

@@ -6,29 +6,28 @@ const L = globalThis.window.L;
 export let size = 25;
 export let latlng;
 export let id = "";
+export let options = {};
 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) {
+  recreateMarker(size, latlng, id, options);
+async function recreateMarker(size2, latlng2, id2, options2) {
   removeMarker();
   await tick();
-  createMarker(size2, latlng2, id2);
+  createMarker(size2, latlng2, id2, options2);
 }
-async function createMarker(size2, latlng2, id2) {
+async function createMarker(size2, latlng2, id2, options2) {
   await tick();
   const layerGroup = getLayerGroup?.();
   const map = getMap();
   const mapOrLayerGroup = layerGroup || map;
-  const markerOptions = {};
-  marker = L.marker(latlng2, markerOptions);
+  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));
   mapOrLayerGroup.addLayer(marker);
-  const icon = marker.getIcon();
   await tick();
   if (markerElement.childElementCount > 0) {
     marker.setIcon(

package/dist/Marker.svelte.d.ts

@@ -3,12 +3,13 @@ type MarkerContext = {
     id?: string;
 };
 export type Marker = LeafletMarker & MarkerContext;
-import type { LatLngExpression, Marker as LeafletMarker } from 'leaflet';
+import type { LatLngExpression, Marker as LeafletMarker, MarkerOptions } from 'leaflet';
 declare const __propDef: {
     props: {
         size?: number | undefined;
         latlng: LatLngExpression;
         id?: string | undefined;
+        options?: MarkerOptions | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/dist/Polyline.svelte

@@ -14,7 +14,7 @@ function updateLine(latLngs, lineStyle) {
 }
 onMount(async () => {
   const L = window.L;
-  line = new L.Polyline(latlngs);
+  line = new L.Polyline(latlngs, options);
   line.on("click", (e) => dispatch("click", e));
   line.addTo(map);
 });

package/dist/index.d.ts

@@ -4,4 +4,4 @@ export { default as MarkerClusterGroup } from './MarkerClusterGroup.svelte';
 export { default as Polyline } from './Polyline.svelte';
 export { default as Popup } from './Popup.svelte';
 export type { Marker as LeafletMarker } from './Marker.svelte';
-export type { Map as LeafletMap, LatLngTuple, LatLngExpression, LatLngLiteral, LeafletEvent, LeafletMouseEvent, LeafletKeyboardEvent } from 'leaflet';
+export type { CircleOptions, LatLngExpression, LatLngLiteral, LatLngTuple, LeafletEvent, LeafletKeyboardEvent, LeafletMouseEvent, Map as LeafletMap, MarkerOptions, PathOptions } from 'leaflet';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@radiofrance/svelte-leaflet",
-	"version": "0.1.0-alpha.3",
+	"version": "0.1.0-alpha.5",
 	"description": "A library that wraps leaflet classes in domless/renderless svelte components.",
 	"keywords": [
 		"svelte",
@@ -54,8 +54,6 @@
 		"@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",
@@ -63,8 +61,6 @@
 		"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",
@@ -82,5 +78,11 @@
 	"publishConfig": {
 		"access": "public",
 		"registry": "https://registry.npmjs.org/"
+	},
+	"dependencies": {
+		"@types/leaflet": "^1.9.12",
+		"@types/leaflet.markercluster": "^1.5.4",
+		"leaflet": "^1.9.4",
+		"leaflet.markercluster": "^1.5.3"
 	}
 }