Moving things around between map and overlay components.

This commit is contained in:
Eric van der Vlist 2022-09-02 17:56:10 +02:00
parent 95205bb49f
commit ff32b75480
2 changed files with 31 additions and 21 deletions

View File

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

View File

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