Merge pull request #202 from emilhe/1.0.9

1.0.9

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.9] - 2023-09-25
+
+### Added
+
+- Add `viewport` property for the `Map` component to enable easy manipulation of the viewport (i.e. zoom/center)
+
 ## [1.0.8] - 2023-08-30
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-leaflet",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Dash Leaflet is a light wrapper around React-Leaflet. The syntax is similar to other Dash components, with naming conventions following the React-Leaflet API.",
   "main": "index.ts",
   "repository": {

src/ts/components/MapContainer.tsx

@@ -8,7 +8,7 @@ import {ClickEvents, KeyboardEvents, LoadEvents, MapContainerProps, DashComponen
 const trackViewport = (map, props) => {
     const bounds = map.getBounds()
     props.setProps({
-        zoom: map.zoom, center: map.center,
+        zoom: map.getZoom(), center: map.getCenter(),
         bounds: [[bounds.getSouth(), bounds.getWest()], [bounds.getNorth(), bounds.getEast()]]
     })
 }
@@ -32,6 +32,30 @@ function EventSubscriber(props) {
         }
     }, [props.invalidateSize])
 
+    useEffect(function updateViewport(){
+        if(props.viewport === undefined){
+            return;
+        }
+        let {transition, center, zoom, options} = props.viewport;
+        if(!center){
+            center = map.getCenter();
+        }
+        if(!zoom){
+            zoom = map.getZoom();
+        }
+        // TODO: Maybe check for change before invoking transition?
+        switch (transition) {
+            case 'flyTo':
+                map.flyTo(center, zoom, options)
+                return;
+            case 'panTo':
+                map.panTo(center, options)
+                return;
+            default:
+                map.setView(center, zoom, options)
+        }
+    }, [props.viewport])
+
     return null
 }
 
@@ -54,6 +78,21 @@ type Props = Modify<MapContainerProps, {
      */
     invalidateSize?: string | number | object;
 
+    /**
+     * This property can be used to manipulate the viewport after initializing the map. [DL]
+     */
+    viewport?: {
+        center?: number[],
+        zoom?: number
+        transition?: "flyTo" | "panTo" | "setView"
+        options?: {
+            animate?: boolean,
+            duration?: number,
+            easeLinearity?: number,
+            noMoveStart?: boolean
+        }
+    };
+
     /**
      * If true (default), zoom, center, and bounds properties are updated on whenReady/moveend. [DL]
      */