I am trying to add leaflet to my ionic app.
Below I’m displaying a map, & a button that is meant to bring me to my current location.
<div id="mapId" style="height:200px"></div>
<ion-item style="cursor: pointer" (click)="locatePosition()">
<ion-button fill="clear">
<ion-icon slot="start" name="map"></ion-icon>
Locate Position
</ion-button>
</ion-item>
And here is locatePosition():
locatePosition() {
this.map.locate({ setView: true }).on("locationfound", (e: any) => {
this.newMarker = marker([e.latitude, e.longitude], {
draggable: true
}).addTo(this.map);
this.newMarker.bindPopup("You are located here!").openPopup();
this.getAddress(e.latitude, e.longitude); // This line is added
this.newMarker.on("dragend", () => {
const position = this.newMarker.getLatLng();
this.getAddress(position.lat, position.lng);// This line is added
});
});
}
When I run the app on my desktop, & click LOCATE POSITION, my position is successfully displayed on the map.
However, when I run the app on my device (ionic cordova run android) & click LOCATE POSITION, the map isn’t updated with my current position.
I’ve tried debugging when running on the android device, but there are no errors being logged to the console.
Can someone please tell me what I’m doing wrong? Thanks a lot in advance!
Also here’s some more of my code, I can provide more if required:
ionViewDidEnter() {
this.loadMap();
}
loadMap() {
this.map = new Map("mapId").setView([17.3850, 78.4867], 13);
const tiles = tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: 'Map Data <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
tiles.addTo(this.map);
}