diff --git a/src/components/live-map.tsx b/src/components/live-map.tsx index a6b80d5..7079ca4 100644 --- a/src/components/live-map.tsx +++ b/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 ( - { @@ -30,15 +45,13 @@ const LiveMap: react.FC = () => { > - + {track.geometry.coordinates.length !== 0 && ( + + )} ); }; diff --git a/src/components/live-overlay.tsx b/src/components/live-overlay.tsx index c76f0ba..2adb765 100644 --- a/src/components/live-overlay.tsx +++ b/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 (