3

I'm having an issue with leaflet map loading incorrectly on mobile.

The map is meant to load with a lat/lng of 25.748503, -80.286949 (downtown Miami), but on mobile it loads somewhere around 25.584223, -80.028805 (off the coast in the Atlantic).

Dragging the map back to right position seems to trigger the other tiles and layers to load and so does changing the screen orientation. Also, the layers and tiles are loading fine on desktop.

I've attached pictures of how it's loading incorrectly and how it's supposed to load.

Tested this on an iPhone 6+ with Safari and Chrome.

Any ideas would be awesome, thanks!

Here's a snippet of the code used to build the map:

// from main.js

var tiles = new L.StamenTileLayer('toner-lite');

var lat = 25.748503;
var lon = -80.286949;

var map = new L.Map('map-container', {
    center: new L.LatLng(lat, lon),
    zoom: 8.5,
    minZoom: 7,
    maxZoom: 16,
    zoomControl: false,
    doubleClickZoom: false,
    VML: true,
    scrollWheelZoom: false
}).addLayer(tiles);


// from _map-container.scss

#map-container {
  width: 100%;
  height: 100vh;

  @media (max-width: $screen-md) {
    height: 50vh;
  }
}

.leaflet-bottom.leaflet-left {
  background: #F4F4F4;
  padding: 0 0.25em;
  font-size: 11px;
  font-family: $sans-serif;
}

incorrectly loading properly loading

Chris Williams
  • 412
  • 3
  • 16
  • Can you add some code to the question so I can review it? Also, is the map pane simply larger than the viewport? – Adam Feb 13 '17 at 18:32
  • Ok, I've added the map init code and the container styles. I know using vh units can cause issues, but I've also tried it with fixed height and still have the same problem. – Chris Williams Feb 13 '17 at 18:58
  • 2
    Could be https://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map/36257493#36257493 – ghybs Feb 13 '17 at 22:29
  • @ghybs Adding `map.invalidateSize()` seems push the bounds of the map to the top left on mobile and desktop, Is there a certain way of implementing it? – Chris Williams Feb 15 '17 at 17:15
  • 1
    Call it **after** your map div gets its correct size. – ghybs Feb 16 '17 at 01:33
  • I'm having a similar issue but the size doesn't seem the problem (`map.getSize()` always returns the correct size, so `map.invalidateSize()` doesn't fix it). 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 – tgordon18 Aug 15 '18 at 14:20

0 Answers0