CODEWITHSUNDEEP
jqueryjquery-mobileleafletopenstreetmap
martin10
martin10

Reputation: 199

Why isn't my map completely showing?

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:

enter image description here

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?

Upvotes: 4

Views: 1788

Answers (1)

IvanSanchez
IvanSanchez

Reputation: 19049

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.

Upvotes: 5

Related Questions