title: Leaflet & jQuery Mobile - Resizing Issue
body: <p>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. </p>
  
  <p>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</p>
  
  <pre><code>&lt;div data-role="page" data-theme="d" id="eventMap" data-add-back-btn="true"&gt;
  
          &lt;div data-role="header" data-position="fixed" data-id="pageheader"&gt;
              &lt;h1&gt;Find Events&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div data-role="content" class="ui-content"&gt;    
  
              &lt;div id="mapcanvas"&gt;&lt;/div&gt;
  
          &lt;/div&gt;
  
  
          &lt;div data-role="footer" data-position="fixed" data-id="pagefooter"&gt;
  
              &lt;div data-role="navbar"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="eventmap.php" class="ui-btn-active"&gt;Map&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="eventlist.php"&gt;List&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;script type="text/javascript"&gt;
  
          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+'&amp;long='+e.latlng.lng+'&amp;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('&lt;div style="text-align: center; margin-left: auto; margin-right: auto;"&gt;&lt;h3&gt;' + event.name + '&lt;/h3&gt; &lt;p&gt;&lt;a href="event.php?eid='+event.id+'"&gt;Event Link&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;', {maxWidth: '360'});
  
                          map.addLayer(marker);
  
                      });
  
                  });
  
              }
  
             // Remake Map
              setTimeout(function(){ 
                      map.invalidateSize(); 
              }, 1); 
          });
          &lt;/script&gt;
  
  
      &lt;/div&gt;
  </code></pre>
  
  <p>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!</p>
  
  <p>Sean</p>