Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Trying to control the center and zoom of pigeon maps (doesn't work on my phone)

This commit is contained in:
Eric van der Vlist 2022-09-01 21:30:31 +02:00
parent a0ee63ef09
commit d8c3035bb2
1 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/live-map.tsx
View File

@ -4,21 +4,30 @@ import { Map, Marker } from "pigeon-maps"
import { Geolocation } from "@awesome-cordova-plugins/geolocation"; import { Geolocation } from "@awesome-cordova-plugins/geolocation";
const LiveMap: react.FC = () => { const LiveMap: react.FC = () => {
const initialPosition: [number, number] = [44.73574, 6.18981]; const initialCenter: [number, number] = [44.73574, 6.18981];
const [currentPosition, setCurrentposition] = useState(initialPosition); const initialZoom: number = 13;
const [center, setCenter] = useState(initialCenter);
const [position, setPosition] = useState(initialCenter);
const [zoom, setZoom] = useState(initialZoom);
useEffect(()=>{ useEffect(()=>{
Geolocation.getCurrentPosition().then((position) => 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 ( return (
<Map center={currentPosition} defaultZoom={11}> <Map center={center} zoom={zoom} onBoundsChanged={
<Marker width={50} anchor={currentPosition} /> ({center, zoom}) => {
setCenter(center);
setZoom(zoom);
}
}>
<Marker width={20} anchor={position} />
</Map> </Map>
); );
}; };