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

package/README.md

@@ -10,16 +10,15 @@ A library that wraps leaflet classes in domless/renderless svelte components.
 
 ### Map
 
-Renders a map with the given center and zoom level.
+Renders a map Leaflet Map. The Map will take up 100% of its container's height and width.
 
 #### 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)_      |                                                                                    |
+| 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
 
@@ -30,7 +29,7 @@ All events are forwarded from the Map class, see the leaflet documentation for m
 Example:
 
 ```svelte
-<Map {center} {zoom} on:click={(e) => console.log(e.detail.latlng)} />
+<Map {options} on:click={(e) => console.log(e.detail.latlng)} />
 ```
 
 ### Marker
@@ -81,7 +80,7 @@ Enables clustering of child markers
 
 ### Polyline
 
-- Allows to draw lines on the map
+Allows to draw lines on the map
 
 #### Attributes
 

package/dist/Map.svelte

@@ -3,8 +3,7 @@ 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 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>`;
 const dispatch = createEventDispatcher();
@@ -22,16 +21,17 @@ export const map = () => thisMap;
 setContext("map", () => thisMap);
 let container;
 $:
-  thisMap?.setView(center, zoom);
+  if (thisMap)
+    thisMap.options = Object.assign(thisMap.options, options);
 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);
+  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));
   L.tileLayer(tilesUrl, {
-    attribution,
-    maxZoom: 20
+    attribution
+    // maxZoom: 20
   }).addTo(thisMap);
 }
 function leafletLoader(_node) {

package/dist/Map.svelte.d.ts

@@ -1,16 +1,14 @@
 import { SvelteComponent } from "svelte";
-import type { LatLngExpression, Map, Marker } from 'leaflet';
-import type Leaflet from 'leaflet';
+import type { MapOptions, Marker, Map } 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;
+        options?: MapOptions | undefined;
         tilesUrl?: string | undefined;
         attribution?: string | undefined;
-        getMarkers?: (() => Leaflet.Marker[]) | undefined;
+        getMarkers?: (() => Marker[]) | undefined;
         map?: (() => Map) | undefined;
     };
     events: {

package/dist/Marker.svelte

@@ -26,7 +26,7 @@ async function createMarker(size2, latlng2, id2, options2) {
   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));
+  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) {

package/dist/Marker.svelte.d.ts

@@ -15,6 +15,9 @@ declare const __propDef: {
         click: CustomEvent<any>;
         dblclick: CustomEvent<any>;
         contextmenu: CustomEvent<any>;
+        dragstart: CustomEvent<any>;
+        drag: CustomEvent<any>;
+        dragend: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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 { CircleOptions, LatLngExpression, LatLngLiteral, LatLngTuple, LeafletEvent, LeafletKeyboardEvent, LeafletMouseEvent, Map as LeafletMap, MarkerOptions, PathOptions } from 'leaflet';
+export type { CircleOptions, LatLngExpression, LatLngLiteral, LatLngTuple, LeafletEvent, LeafletKeyboardEvent, LeafletMouseEvent, Map as LeafletMap, MapOptions, MarkerOptions, PathOptions } from 'leaflet';

package/package.json

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