Question

Currently having an issue with getting jQuery Mobile and Leaflet to play nicely together. I can’t seem to get leaflet to resize the map on ‘pageinit’ and instead it just pops up in a small box in the top left corner.

The zoom level is also incorrect. I’ve tried setting a timeout and the invaidateSize method, but i’m still having issues. I’m also using fixed headers and footers and the controls are obstructed from view by them. This is the page’s code

<div data-role="page" data-theme="d" id="eventMap" data-add-back-btn="true">

        <div data-role="header" data-position="fixed" data-id="pageheader">
            <h1>Find Events</h1>
        </div>

        <div data-role="content" class="ui-content">    

            <div id="mapcanvas"></div>

        </div>


        <div data-role="footer" data-position="fixed" data-id="pagefooter">

            <div data-role="navbar">
                <ul>
                    <li><a href="eventmap.php" class="ui-btn-active">Map</a></li>
                    <li><a href="eventlist.php">List</a></li>
                </ul>
            </div>
        </div>


        <script type="text/javascript">

        function resize() {

            var content, contentHeight, footer, header, viewportHeight;
            window.scroll(0, 0);
            header = $(":jqmData(role='header'):visible");
            footer = $(":jqmData(role='footer'):visible");
            content = $(":jqmData(role='content'):visible");
            viewportHeight = $(window).height();
            contentHeight = viewportHeight - header.outerHeight() - footer.outerHeight();
            $(":jqmData(role='content')").first().height(contentHeight);
            return $("#mapcanvas").height(contentHeight);
        };  

        $('#eventmap').live('pageinit orientationchange resize', resize);



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

            //MAP
            var tiles, map;

            map = new window.L.Map('mapcanvas');

            tiles = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18, attribution: 'Eventi8'});
            map.addLayer(tiles);
            map.locateAndSetView(16);

            map.on('locationfound', onLocationFound);

            function onLocationFound(e) {


                var circle = new L.Circle(e.latlng, 30);

                map.addLayer(circle);

                var url = 'inc/eventdistancejson.php?lat='+e.latlng.lat+'&long='+e.latlng.lng+'&radius=30';

                $.getJSON(url, function (data) {

                    $.each(data.events, function(i, event){

                        var location = new L.LatLng(event.location.lat, event.location.lng);

                        var marker = new L.Marker(location);

                        marker.bindPopup('<div style="text-align: center; margin-left: auto; margin-right: auto;"><h3>' + event.name + '</h3> <p><a href="event.php?eid='+event.id+'">Event Link</a></p></div>', {maxWidth: '360'});

                        map.addLayer(marker);

                    });

                });

            }

           // Remake Map
            setTimeout(function(){ 
                    map.invalidateSize(); 
            }, 1); 
        });
        </script>


    </div>

Thanks for any help you can give. I’m also having issues with JSON being loaded on the wrong page and the pageinit event being fired twice, but thats for a different question!

Sean

Answer 1

The problem is that the DOM has not fully loaded before your leaflet scripts start executing. Put all of your map initialization scripts in a function like initMap() and add an id=”mapPage” to your page and add a pageshow handler to call the function.

    $("#mapPage").live("pageshow",function(event, ui) {
        initMap();
    }