Why isn't my map completely showing?

Question

I am using Leaflet to display a map. I just changed my HTML to use jQuery Mobile and Leaflet.

I read the documentation for jQuery Mobile, which says I have to add jQuery 1.11.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

But I was using:

<script type='text/javascript' src='js/jquery-3.1.1.min.js'></script>

Why there is a such difference??

My problem is the following:

Before I moved to jQuery Mobile, my map was fully displaying in its container:

<div id="mapId"></div>

When I changed my HTML code to use jQuery Mobile, the layout was a disaster until I commented this out:

<!--  <script type='text/javascript' src='js/jquery-3.1.1.min.js'></script>-->

and added this:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

But now my map is not fully displaying. In fact I only see a very small part of it until I resize the browser:

After I resized the browser, the map is displaying fully.

Why and how can I solve this problem? Why can't I use the latest version of jQuery?

Answer 1

Same problem as in Leaflet map loading half greyed tiles and related questions (e.g. Leaflet Map not showing in bootstrap div, Leaflet map not displayed properly inside tabbed panel, leaflet map shows up grey, etc etc) - just run map.invalidateSize() when your page layout is stable.