<ion-slides> item does not render the Leaflet map


#1

Hi,
I have a problem with Leaflet.js and ion-slides element. if I include the map in ion-slides

<ion-slides>
  <ion-slide>
    <div id="map-slider"></div>
  </ion-slide>
</ion-slides>
this.map = leaflet.map('map-slider', {
      zoomControl: false,
      zoomSnap: 0,
      attributionControl: false
    }).setView([coordinates[0][0], coordinates[0][1]], 16);
    
leaflet.tileLayer('...', {
      accessToken: '...',
      id: 'mapbox.satellite'
}).addTo(this.map);

var polyline = leaflet.polyline(coordinates, { weight: 5, color: '#00ffa8' }).addTo(this.map);

this.map.fitBounds(polyline.getBounds(), { paddingTopLeft: [10, 10], paddingBottomRight: [10, 10] });

only renders the polyline. But if I put the map out of the element then everything works. Do you have any idea to bypass this problem?


#2

Hi, I have the same issue. Did you find any solution ?


#3

Try to set slide Item height


#4

Thank you for your reply.
I tried to put a height: 200px or a height: max-content on slides but nothing change.

<ion-content padding>
  WORK
  <div class="map-card-container">
    <div id="map1" style="width: 100%; height: 100%"></div>
  </div>

  DOESN'T WORK
  <ion-slides pager>
    <ion-slide style="height: max-content;">
      <div class="map-card-container">
        <div id="map2" style="width: 100%; height: 100%"></div>
      </div>
      <div class="map-card-container">
        <div id="map3" style="width: 100%; height: 100%"></div>
      </div>
    </ion-slide>
  </ion-slides>
</ion-content>

#5

When you look in element inspector do you see the map element?


#6

Yep, the page look like this.


The map is displayed, with the polyline inside.
I can also move inside the map.
Simply the tiles/map images are not displayed (contrary to the map that is not in the slides)

(edit : The tiles are loaded in Network)


#7

try to zoom in/out see if changes after zoom


#8

Same, when I zoom or move in the map the tiles are loaded in Network, but not displayed on the map.
So the map detect the changes, load the correct tiles, but does not seem able to display them.

It’s append only if the map is inside a slider.


#9

Can you upload any demo?
That i can debug it?