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";
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>
);
};