0

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>

and in controller

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());

and only renders the polyline. But if I put the map out of the element (ion-slides) then everything works. This behavior is only with android devices.

Do you have any idea to bypass this problem?

el_tuzcatore
  • 25
  • 6
  • Could be similar to https://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map – ghybs Sep 18 '17 at 15:25
  • Thank you for the reply. anyway I tried to unify all the sizes of ion-slide and ion-card but I always have the same problem – el_tuzcatore Sep 18 '17 at 15:59
  • First make sure if your issue is similar. If you call `map.invalidateSize()` in a setTimeout, or resize your window (change orientation?), does it make Leaflet suddenly load tiles correctly? – ghybs Sep 18 '17 at 16:28
  • @ghybs I do not think my problem is the same. I do not even change orientation but just do what I said. all the seeds are of the same size. But how should I use map.invalidateSize ()? – el_tuzcatore Sep 19 '17 at 09:59
  • The point is _not_ to avoid resizing / changing orientation, but _precisely_ to do it on purpose to test and see if Leaflet behaves differently. – ghybs Sep 19 '17 at 10:57

0 Answers0