1

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>
Community
  • 1
  • 1
barryjames
  • 31
  • 1
  • 7

3 Answers3

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);
jyoung
  • 322
  • 3
  • 13
  • thanks for replying! @jyoung the css has been added to the original post. tried your suggestion, but the same thing keeps happening. the map displays perfectly within a desktop browser. but on my iphone, only the controls show, not the map. – barryjames Mar 05 '15 at 13:39
0

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/

iH8
  • 27,722
  • 4
  • 67
  • 76
  • began trying this method i.e. simple map and then go toward more complicated. the jsfiddle is [here](https://jsfiddle.net/barryjames17/3tcgboog/5/). still the same result. works within a desktop/laptop browser but not on my iphone. not even the fiddle shows from my mobile. @iH8 – barryjames Mar 05 '15 at 17:08
  • That fiddle doesn't work for me because you're running the fiddle from HTTPS and the tilelayers URL's use HTTP which gives you a nice mixed content error in your console. Changing the tilelayer URL's to HTTPS doesn't work either because the server you're loading the tiles from throws a ERR_SSL_PROTOCOL_ERROR. You've got two options here 1) Run from HTTP, 2) Correctly setup your tileserver to run SSL. ps. The fact that your seeing the controls and no tiles is a dead giveaway that something is wrong with your tilelayers. – iH8 Mar 05 '15 at 17:39
  • Thanks @iH8. Interesting the way tiles are called (including http/https) doesn't show up an issue until the viewing size is switched from desktop to mobile. Will try another tile server setup and let you know how it works out. – barryjames Mar 05 '15 at 21:07
  • Tip: use protocol relative (also called protocolless) URL's in your scripts, all browsers supported that (as far as i know). Leave out the `HTTP:` or `HTTPS:` and just use `//`. The browser will figure out what to use according to the URL the document is loaded from. That way your script will always work regardless if you load it from HTTP or HTTPS. – iH8 Mar 05 '15 at 21:27
  • 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") *the php script had to be in the same folder/directory as the mbtiles file. replace text in [] with your own* 2) leaflet only, no mapbox as the api uses a secure key thanks again @iH8! excellent work! – barryjames Mar 07 '15 at 15:18
0

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!

barryjames
  • 31
  • 1
  • 7