map not firing properly using jquery mobile pageinit

[tom]

I am using Leaflet with jQuery Mobile and having an issue using the 'pageinit' events.

Here is the code:

$('#location').live('pageinit',function() {
//$(document).ready(function() {
        var locLat = $('#location_lat').html();
        var locLon = $('#location_lon').html();
        var locPos = new L.LatLng(locLat,locLon);

        var tiles = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution:'woot!'})
        var locMarker = new L.Marker(locPos,{
                                        icon: new dddIcon
                                });
        map = new L.Map('mapd');
        map.addLayer(tiles);
        map.addLayer(locMarker);       
        map.setView(locPos,18,true);
        //$('#mapd').css({'height':'302px'});
        //map.invalidateSize();
}); 

I've attached a screenshot of what happens....the map shows one tile. If you pull the map over it renders....maybe a couple of more tiles but there are always gaps. The marker may or may not show up.

If I attach this to the $(document).ready() function, it works great.....but breaks, naturally, using links in jQuery mobile unless its accesed directly.

As you can see I have tried setting the map to render, then manually changing the height by one pixel, then running the invalidateSize method, which also does not work.

I can fix this by using rel=external on any links going to the location page but I really would rather have something that will make the map render in the container properly.

Any ideas or things I can try?

[Diego Guidi]

remove document.ready, with jqm all you need is pageinit.
use /$('#mapd').height(302) instead of css method
try call invalidateSize when pageinit is fired.

Diego Guidi

[tom]

Thanks for the reply Diego

I know about using pageinit.....I put in the commented-out document.ready() to show that using it instead-of pageinit works.

I tried what you recommended and used the height() method rather than a css-property: no change. Map still rendering a single tile as before.

Anyone have other ideas?

On Monday, March 12, 2012 12:39:42 PM UTC-7, Diego Guidi wrote:

remove document.ready, with jqm all you need is pageinit.
use /$('#mapd').height(302) instead of css method
try call invalidateSize when pageinit is fired.

Diego Guidi

[Fabien Nicollet]

Hi,

Did you make sure the leaflet CSS file is loaded in the page? If not, you get randomly placed tiles

Fabien

[tom]

Hi Fabien

Yes its loaded. As I mentioned, if I use document.ready() everything is absolutely 100% fine and works as it should. There are no problems. The issue is strictly that Leaflet is having an issue, I am guessing, with all the virtual divs that are being loaded by jqm, which are coming in the pageinit event (I have also tried pagecreate and pagebeforecreate)

I found this: http://forum.jquery.com/topic/google-maps-inside-jquery-mobile which is the EXACT problem I am having, albeit with Leaflet. In the second or third post there is a call to

google.maps.event.trigger(map, 'resize');

Which apparently fixed the issue, and I was hoping invalidateSize would do the same thing, but it doesn't seem to fire.

[Fabien Nicollet]

It would be a lot easier to help you if you could get your example online for us to see

Fabien

[Yuvi Panda]

I have the same problem in my project (jQuery Mobile + Leaflet).

You can view it online here: http://yuvi.in/POSM. I don't have exact
repro steps, but usually going to the login screen (top right icon)
and coming back seems to cause the issue.

--
Yuvi Panda T
http://yuvi.in/blog

[tom]

Ask and ye shall recieve :)

http://ntbti.com/test/z.html

[Fabien Nicollet]

Could reproduce the issue. First resize of the page (say you open the console) will make it better. And if you save the HTML webpage and play it locally (even with scripts online), you won't get the issue because the DOM is created and not created on demand like with JQM.

Although, if you call invalidateSize with a tiny timeout (1ms, just a frame delay), it does the trick

$('#map').live('pageinit',function() {

lf = new L.Map('themap');

var tiles = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution:'woot!'})

lf.addLayer(tiles);

//map.locateAndSetView(16);

var mark = new L.Marker(new L.LatLng(30.603296,-87.902758));

lf.addLayer(mark);

lf.setView(new L.LatLng(30.603296,-87.902758),18);

setTimeout(function(){

lf.invalidateSize();

}, 1);

});

Oh and find a way to pass a reference to your map not using the global object, there are different ways, use the one that you prefer ;)

Fabien

[tom]

Brilliant! Absolutely brilliant Fabien that completely solved my issue. Thank so very much for the help.

[Fabien Nicollet]

ahah glad i could help. Make sure you clean the code before you leave :)

Fabien

[Yuvi Panda]

Fixed it for me too! Thanks!

/me sends Fabien a virtual beer

[Manuel Gonzalez]

Thanks Fabien. you've really help out. Cookies 4 u :)

[Yuraï K-Turba]

Thanks a lot, really many thnx ;-)

My solution based on your tip :-)

<button onclick="myFunction()">Show Map</button>

<div id="map"></div>

<script>

function myFunction(){

        setTimeout(function(){

        var elephants = new L.LatLng(45.5665839, 5.9228969);

        var map = L.map('map', {center: elephants, zoomControl: false, zoom: 16, setView: true});

        // add an OpenStreetMap tile layer

            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {

                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

            }).addTo(map);

            // add a marker in the given location, attach some popup content to it and open the popup

            L.marker([45.5665839, 5.9228969]).addTo(map);

            }, 1);

            }

<script>

[Mohamadreza Rezaei]

Api Contnent Current Post

[Ryan Francisco]

THANK YOU SO MUCH FOR THIS!  This fixed my map for my mobile app.  I was looking for this solution for days~