Moving things around between map and overlay components.

src/components/live-map.tsx

@@ -6,20 +6,35 @@ import LiveOverlay from './live-overlay';
 
 const LiveMap: react.FC = () => {
   const initialCenter: [number, number] = [44.73574, 6.18981];
-  const initialZoom: number = 13;
+  const initialZoom: number = 15;
   const [center, setCenter] = useState(initialCenter);
   const [position, setPosition] = useState(initialCenter);
   const [zoom, setZoom] = useState(initialZoom);
 
+  const emptyTrack: any = {
+    type: 'Feature',
+    geometry: {
+      type: 'LineString',
+      coordinates: [],
+    },
+    properties: { foo: 'track' },
+  };
+
+  let [track, setTrack] = useState(emptyTrack);
+
   useEffect(() => {
     Geolocation.getCurrentPosition().then((position) => {
       setCenter([position.coords.latitude, position.coords.longitude]);
       setPosition([position.coords.latitude, position.coords.longitude]);
+      track.geometry.coordinates = [
+        [position.coords.longitude, position.coords.latitude],
+      ];
+      setTrack(track);
     });
-  }, []);
+  }, [track]);
 
   return (
-     <Map
+    <Map
       center={center}
       zoom={zoom}
       onBoundsChanged={({ center, zoom }) => {
@@ -30,15 +45,13 @@ const LiveMap: react.FC = () => {
     >
       <ZoomControl />
       <Marker width={20} anchor={position} />
-      <LiveOverlay
-        coordinates={[
-          [center[1], center[0]],
-          [initialCenter[1], initialCenter[0]],
-        ]}
-        mapState={undefined}
-        latLngToPixel={undefined}
-        
-      />
+      {track.geometry.coordinates.length !== 0 && (
+        <LiveOverlay
+          mapState={undefined}
+          latLngToPixel={undefined}
+          track={track}
+        />
+      )}
     </Map>
   );
 };

src/components/live-overlay.tsx

@@ -2,11 +2,10 @@ import { GeoJson, MapState, Point } from 'pigeon-maps';
 import React from 'react';
 
 const LiveOverlay: React.FC<{
-  coordinates: [number, number][];
   mapState: any;
   latLngToPixel: any;
+  track: any;
 }> = (props: {
-  coordinates: [number, number][];
   mapState: MapState;
   latLngToPixel:
     | ((
@@ -15,18 +14,16 @@ const LiveOverlay: React.FC<{
         zoom?: number | undefined
       ) => Point)
     | undefined;
+  track: any;
 }) => {
+
+    
+
   return (
     <GeoJson
       data={{
         type: 'FeatureCollection',
-        features: [
-          {
-            type: 'Feature',
-            geometry: { type: 'LineString', coordinates: props.coordinates },
-            properties: { prop0: 'value0' },
-          },
-        ],
+        features: [props.track],
       }}
       mapState={props.mapState}
       latLngToPixel={props.latLngToPixel}