proper implementation of invalidateSize() to display mapbox/leaflet on mobile device

问题

I started a question about a bootstrap leaflet map not displaying on mobile devices How can I fix bootstrap leaflet map mobile display?

Since then I have used a simple mapbox template for a map and with invalidateSize() as outlined here https://www.mapbox.com/help/why-map-cropped-hidden-shown/

But still no luck getting the map to display on a mobile phone.

Can anyone assist me with the proper implementation of invalidateSize()?

Thanks Barry

There is a single div element:

<div id='map' class='blue'></div>

and this is the script:

<script>
L.mapbox.accessToken = 'mytoken';
var map = L.map('map').setView([10.5063,-61.4079], 10);
map.attributionControl.setPrefix('&copy; <a href="http://www.url.com">Copyright 2015. hellO!</a>');
L.control.locate().addTo(map);


L.control.layers(
  {'Streets': L.mapbox.tileLayer('url').addTo(map)}, 
  {
  'Drive Times': L.mapbox.tileLayer('url'),
  'Outlets': L.mapbox.tileLayer('url')
  }
).addTo(map);

//attempt to force resize on mobile devices
$('map').show();
map.invalidateSize();

this is all the css:

    <style>
      .menu-ui {background:#fff; position:absolute; bottom:10px;right:10px; left:10px; z-index:1; border-radius:3px; width:auto; height:inherit; border:1px solid rgba(0,0,0,0.4);}
      .menu-ui a { font-size:11px; color:#404040; display:  inline-block; margin:0;padding:0; padding:10px; text-decoration:none; border-right: 2pt  inset; border-right-color:0.5px solid rgba(0,0,0,0.25); text-align: left;}
      .menu-ui a:first-child { border-radius:3px 3px 0 0; }
      .menu-ui a:last-child { border:none; border-radius:0 0 3px 3px; }
      .menu-ui a:hover { background:#f8f8f8; color:#404040; }
      .menu-ui a.active { background:#3887BE; color:#FFF; }
      .menu-ui a.active:hover { background:#3074a4; }
      .menu-ui a.inactive { background:#FFF; color:#3887BE; }

      .leaflet-control-locate {border: 1px solid rgba(0,0,0,0.4);}
      .leaflet-control-locate a {background-color: #fff;background-position: -3px, -2px;}
      .leaflet-control-locate.active a {background-position: -33px -2px;}
      .leaflet-popup-content { margin-top: 2px; margin-bottom: 2px; margin-left: 2px; margin-right: 2px;}
      .leaflet-popup-content-wrapper {border-radius: 2px;}
      .legend label, .legend span { display:block; float:left; height:15px; width:20%; text-align:center; font-size:9px; color:#808080;}
      .leaflet-control-layers label { font-weight: normal; margin-bottom: 0px;}
        .legend label, .legend span { display:block; float:left; height:15px; width:20%; text-align:center; font-size:9px; color:#808080;}
    </style>

回答1:

What does the styling look like on $('map')? I see your inline CSS, but is there anything else on it? Try giving it a size to be sure everything else is working first.

Also, if you are using any kind of CSS animation to resize the map container, you need to wait until after the animation is done, e.g.:

window.setTimeout(function() {
    map.invalidateSize();
}, 1000);

回答2:

Why not start out with the most basic map you can get and go from there. First check if the code posted below works, then change it to your token en mapid, test again, add the layercontrol, test again etc. Add one feature at a time and keep testing, you'll find out where it goes wrong then easily. That's at the moment hard to guess without your full code and a proper testcase on Plunker or JSfiddle or somewhere else where we could test it.

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>A simple map</title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
        <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
        <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet' />
        <style>
            body { margin:0; padding:0; }
            #map { position:absolute; top:0; bottom:0; width:100%; }
        </style>
    </head>
    <body>
        <div id='map'></div>
        <script>
            L.mapbox.accessToken = 'pk.eyJ1IjoicGF1bC12ZXJob2V2ZW4iLCJhIjoiZ1BtMWhPSSJ9.wQGnLyl1DiuIQuS0U_PtiQ';
            var map = L.mapbox.map('map', 'examples.map-i86nkdio').setView([40, -74.50], 9);
        </script>
    </body>
</html>

Taken from: https://www.mapbox.com/mapbox.js/example/v1.0.0/

回答3:

the maps now work.

the issue was http/https. two things had to be changed.

1) the method of calling the tiles and associated php script initially, i used tileserver.php to call

'Streets':L.tileLayer('[url]url/[mbtiles file name].tilejson'

now i'm using mbtiles-server.php to call

'Streets':L.tileLayer("[url]/mbtiles-server.php?db=[mbtiles file name].mbtiles&z={z}&x={x}&y={y}.png")

note: php script had to be in the same folder/directory as the mbtiles file. also, replace text in [] with your own

2) leaflet css/js was used only, no mapbox as the api uses a secure key

much thanks again @iH8 for the excellent work!

来源：https://stackoverflow.com/questions/28868124/proper-implementation-of-invalidatesize-to-display-mapbox-leaflet-on-mobile-de

标签

mobile

maps

leaflet

mapbox

window-resize