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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +8 -9
  2. package/dist/Map.svelte +6 -6
  3. package/dist/Map.svelte.d.ts +3 -5
  4. package/dist/index.d.ts +1 -1
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -10,16 +10,15 @@ A library that wraps leaflet classes in domless/renderless svelte components.
10
10
 
11
11
  ### Map
12
12
 
13
- Renders a map with the given center and zoom level.
13
+ Renders a map Leaflet Map. The Map will take up 100% of its container's height and width.
14
14
 
15
15
  #### Attributes
16
16
 
17
- | Attribute | Type | Default | Notes |
18
- | ------------- | ----------------------------------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------- |
19
- | `center` | [LatLng](https://leafletjs.com/reference.html#latlng) | _required_ | initial center of the map. |
20
- | `zoom` | number | _required_ | initial zoom level |
21
- | `tilesUrl` | string | `'https://tile.openstreetmap.org/{z}/{x}/{y}.png'` | more free tile services can be found at https://alexurquhart.github.io/free-tiles/ |
22
- | `attribution` | string | `'©OpenStreetMap'` _(link to openstreetmap)_ | |
17
+ | Attribute | Type | Default | Notes |
18
+ | ------------- | ------------------------------------------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------- |
19
+ | `options` | [MapOptions](https://leafletjs.com/reference.html#map-option) | `{}` | Map options |
20
+ | `tilesUrl` | string | `'https://tile.openstreetmap.org/{z}/{x}/{y}.png'` | more free tile services can be found at https://alexurquhart.github.io/free-tiles/ |
21
+ | `attribution` | string | `'©OpenStreetMap'` _(link to openstreetmap)_ | |
23
22
 
24
23
  #### Events
25
24
 
@@ -30,7 +29,7 @@ All events are forwarded from the Map class, see the leaflet documentation for m
30
29
  Example:
31
30
 
32
31
  ```svelte
33
- <Map {center} {zoom} on:click={(e) => console.log(e.detail.latlng)} />
32
+ <Map {options} on:click={(e) => console.log(e.detail.latlng)} />
34
33
  ```
35
34
 
36
35
  ### Marker
@@ -81,7 +80,7 @@ Enables clustering of child markers
81
80
 
82
81
  ### Polyline
83
82
 
84
- - Allows to draw lines on the map
83
+ Allows to draw lines on the map
85
84
 
86
85
  #### Attributes
87
86
 
package/dist/Map.svelte CHANGED
@@ -3,8 +3,7 @@ import "leaflet.markercluster/dist/MarkerCluster.css";
3
3
  import "leaflet.markercluster/dist/MarkerCluster.Default.css";
4
4
  import { createEventDispatcher, setContext } from "svelte";
5
5
  let L;
6
- export let center;
7
- export let zoom;
6
+ export let options = {};
8
7
  export let tilesUrl = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
9
8
  export let attribution = `&copy;<a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>`;
10
9
  const dispatch = createEventDispatcher();
@@ -22,16 +21,17 @@ export const map = () => thisMap;
22
21
  setContext("map", () => thisMap);
23
22
  let container;
24
23
  $:
25
- thisMap?.setView(center, zoom);
24
+ if (thisMap)
25
+ thisMap.options = Object.assign(thisMap.options, options);
26
26
  function resizeMap() {
27
27
  thisMap?.invalidateSize();
28
28
  }
29
29
  function onLoad() {
30
30
  L = window.L;
31
- 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);
31
+ 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));
32
32
  L.tileLayer(tilesUrl, {
33
- attribution,
34
- maxZoom: 20
33
+ attribution
34
+ // maxZoom: 20
35
35
  }).addTo(thisMap);
36
36
  }
37
37
  function leafletLoader(_node) {
package/dist/Map.svelte.d.ts CHANGED
@@ -1,16 +1,14 @@
1
1
  import { SvelteComponent } from "svelte";
2
- import type { LatLngExpression, Map, Marker } from 'leaflet';
3
- import type Leaflet from 'leaflet';
2
+ import type { MapOptions, Marker, Map } from 'leaflet';
4
3
  import 'leaflet/dist/leaflet.css';
5
4
  import 'leaflet.markercluster/dist/MarkerCluster.css';
6
5
  import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
7
6
  declare const __propDef: {
8
7
  props: {
9
- center: LatLngExpression;
10
- zoom: number;
8
+ options?: MapOptions | undefined;
11
9
  tilesUrl?: string | undefined;
12
10
  attribution?: string | undefined;
13
- getMarkers?: (() => Leaflet.Marker[]) | undefined;
11
+ getMarkers?: (() => Marker[]) | undefined;
14
12
  map?: (() => Map) | undefined;
15
13
  };
16
14
  events: {
package/dist/index.d.ts CHANGED
@@ -4,4 +4,4 @@ export { default as MarkerClusterGroup } from './MarkerClusterGroup.svelte';
4
4
  export { default as Polyline } from './Polyline.svelte';
5
5
  export { default as Popup } from './Popup.svelte';
6
6
  export type { Marker as LeafletMarker } from './Marker.svelte';
7
- export type { CircleOptions, LatLngExpression, LatLngLiteral, LatLngTuple, LeafletEvent, LeafletKeyboardEvent, LeafletMouseEvent, Map as LeafletMap, MarkerOptions, PathOptions } from 'leaflet';
7
+ export type { CircleOptions, LatLngExpression, LatLngLiteral, LatLngTuple, LeafletEvent, LeafletKeyboardEvent, LeafletMouseEvent, Map as LeafletMap, MapOptions, MarkerOptions, PathOptions } from 'leaflet';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@radiofrance/svelte-leaflet",
3
- "version": "0.1.0-alpha.6",
3
+ "version": "0.1.0-alpha.7",
4
4
  "description": "A library that wraps leaflet classes in domless/renderless svelte components.",
5
5
  "keywords": [
6
6
  "svelte",