Leaflet map slow when dragging map

Ionic Framework ionic-v3
1

Hi,

I’ve implemented my map and only have six (6) markers on it.
Here’s the HTML:

  <div class="container-map" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <div id="mapId2" style="width: 100%; height: 100%">
    </div>
  </div>

When I try to drag the map, it’s super slow on mobile (emulator and on device)!
Here’s how I’ve added it in .ts:

   this.map = L.map('mapId2', {
     center: this.center,
     zoom: 14,
     renderer: L.canvas()
   });

Any advice? Ways of fixing the slow dragging?
Thanks in advance.

2

Try this

 this.map = L.map('mapId2', {
     center: this.center,
     zoom: 14,
     zoomAnimation: false,
     fadeAnimation: false,
     markerZoomAnimation: false,
     zoomAnimationThreshold: false,
     animate: false,
     renderer: L.canvas()
   });
3

No, it didn’t help with the issue unfortunately.

4

This is my scss:

page-home {
  .container-map {
      position: absolute;
      top: 0px;
      bottom: 0px;
      width: 100%;
      height: 100%;
  }
}
5

any other thoughts?
I’m stuck with a very slow map…