Leafleft map not showing on mobile device

Question

The map shows if it just a normal map but does not show when the location service is added to show the users current position

I had tried the fix for this

 <script>
    $("#dashboard").on("next", "click", function(event, ui)
       { 
          map.invalidateSize(false);
       });
 </script>

Leaflet map not displayed properly inside tabbed panel

but this does not work. It only shows a tiny piece of the map in the top left hand corner and also destroys the initial zoom and is zoomed out to the max.

If i pan the map it will briefly show a section of the map and then disappear. The added marker is set though.

http://jsfiddle.net/JRhCB/

score 0 · Answer 1 · answered Dec 20 '13 at 13:42

I was able to get it to work by wrapping the whole map creation in a function mapInit() and then i just called that function on the button click that showed that section of the page. Zoom , location, options and the display of the map all work 100%.

Leafleft map not showing on mobile device

1 Answers1