Leaflet working when running on desktop, but not working on android device

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

And here is locatePosition():

locatePosition() {
    this.map.locate({ setView: true }).on("locationfound", (e: any) => {
      this.newMarker = marker([e.latitude, e.longitude], {
        draggable: true
      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() {

  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>'

Can you provide an example github repo? It’s a bit hard to know what the issue is from just this.

1 Like

Sure, here’s the repo link: https://github.com/damosull/leaftletExample