From d8c3035bb26bf8474c59fae613df247b6a5fe26c Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Thu, 1 Sep 2022 21:30:31 +0200
Subject: [PATCH] Trying to control the center and zoom of pigeon maps (doesn't
 work on my phone)

---
 src/components/live-map.tsx | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/live-map.tsx b/src/components/live-map.tsx
index 31976fb..47392e2 100644
--- a/src/components/live-map.tsx
+++ b/src/components/live-map.tsx
@@ -4,21 +4,30 @@ import { Map, Marker } from "pigeon-maps"
 import { Geolocation } from "@awesome-cordova-plugins/geolocation";
 
 const LiveMap: react.FC = () => {
-  const initialPosition: [number, number] = [44.73574, 6.18981];
-  const [currentPosition, setCurrentposition] = useState(initialPosition);
+  const initialCenter: [number, number] = [44.73574, 6.18981];
+  const initialZoom: number = 13;
+  const [center, setCenter] = useState(initialCenter);
+  const [position, setPosition] = useState(initialCenter);
+  const [zoom, setZoom] = useState(initialZoom);
 
   useEffect(()=>{
     Geolocation.getCurrentPosition().then((position) =>
     {
-      setCurrentposition([position.coords.latitude, position.coords.longitude]);
-     }
+      setCenter([position.coords.latitude, position.coords.longitude]);
+      setPosition([position.coords.latitude, position.coords.longitude]);
+    }
   );
-
+  
   }, [])
  
   return (
-    <Map center={currentPosition} defaultZoom={11}>
-      <Marker width={50} anchor={currentPosition} />
+    <Map center={center} zoom={zoom} onBoundsChanged={
+      ({center, zoom}) => {
+        setCenter(center);
+        setZoom(zoom);
+      }
+    }>
+      <Marker width={20} anchor={position} />
     </Map>
    );
 };