Search code examples
angularipadmobileleaflettile

Leaflet Tiles Not Loading Correctly in Angular on Mobile

I'm adding a leaflet (1.3,3) to an Angular 6 project that's being built for iPad (IOS 8.1) using Cordova. I'm having a similar issue to this question and this one, but the size doesn't seem the problem. map.getSize() always returns the correct size (checked throughout the various lifecycle hooks), so map.invalidateSize() doesn't fix the issue. Is there a different reason for the tiles failing to move out of the corner? I've noticed the tiles don't get the transform: translate3d(..) that they do in the browser.

Some sample code:

ngAfterViewInit() {
  this.map = L.map(element,
    {
      attributionControl: false,
      center: [40, -93],
      zoom: 4,
      zoomControl: false,
      maxBounds: [
        [-4, -150],
        [70, -35]
      ],
      maxZoom: 5,
      minZoom: 0
    })
  L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png')
    .addTo(this.map);

  this.map.invalidateSize();
}

Note that the map works as expected in browsers and using Chrome's compatibility tools to test different sizes. However, when it's loaded onto the iPad, all the tiles are rendered in the top left corner on top of each other. This issue does not occur on higher versions of IOS, but I’d like to maintain compatibility if possible.

I've tried putting the this.map.invalidateSize() call in different Angular lifecycle hooks to no avail. I even tried adding a button that when pressed calls map.invalidateSize(), but that didn't work either (presumably because the size is as it should be).

My best guess right now is that this has to do with the lack of transform: translate3d(..). If I open up Safari's dev tools to edit the iPad content, I can add -webkit-transform: translate3d(401px, 285px, 0px) to a tile and get it to go to the right place. Seems like leaflet is not recognizing that it needs to add the -webkit- prefix..

There are admittedly a number of questions very similar to this, but none have an answer that seems to fit.

Solution

  • This pull request has the problem:

    https://github.com/Leaflet/Leaflet/pull/6290

    There was a bug in the Leaflet DomUtil.js code that prevented certain webkit browsers from picking up the appropriate styles. Hopefully this will be fixed in future versions of Leaflet.