Ionic (tim) – geolocation

ts-file van pagina:

import * as Leaflet from 'leaflet';

global.scss:

@import "~leaflet/dist/leaflet.css" 

angular.json:

{ "glob": "**/*", "input": "node_modules/leaflet/dist/images", "output": "leaflet" }

capacitor.config.json:

"server": { "allowNavigation": [ "openstreetmap.org", "*.openstreetmap.org" ] }

Opdracht

Breid de applicatie uit zodat deze ook jouw positie kan volgen en de marker gaat aanpassen bij een wijziging van positie. Hiervoor kan je watchposition gebruiken op bv. volgende wijze:

const wait = Geolocation.watchPosition({enableHighAccuracy: true, timeout: 1000}, (position, err) => {
     console.log(position.coords.latitude);
     console.log(position.coords.longitude);
     // schrijf code om de marker aan te passen - tip: er bestaat een setLatLng methode voor marker (zie docs leaflet online)
 });



Tip: in google chrome dev tools kan je via sensors je GPS positie aanpassen

Tip: in je android emulator kan je via locatie instellingen een route laten afspelen (zie video hierboven)