leaflet cloudmade and live pageinit

leaflet cloudmade and live pageinit

I use maps from the leaflet cloudmade ​​and for them to be displayed correctly when I load the page, I get to use $ ('# MyLocation'). Live ("pageinit", function () {, the first map is loaded properly but I can not get the second map to display correctly, it just gets a little bit visible. Looks like $ ('# mylocation1'). live ("pageinit", function () {does not work the second time.

Grateful for the tip!
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <title>Kartfunktioner</title> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <meta name="viewport" content="width=device-width, initial-scale=1"> 
  7. <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
  8. <link rel="shortcut icon" href="favicon.ico" />
  9. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
  10. <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  11. <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
  12. <link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.css" />
  13. <!--[if lte IE 8]><link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.ie.css" /><![endif]-->
  14. <script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>
  15. <style>
  16. body {
  17. padding: 0;
  18. margin: 0;
  19. }
  20. html, body, #map, #map1 {
  21. height: 500px;
  22. }
  23. </style>


  24. </head> 
  25. <body> 


  26. <div data-role="page" data-theme="c" id="hem">
  27. <div data-role="header" data-theme="b">
  28. <h1>Kartor</h1>
  29. </div><!-- /header -->
  30. <div data-role="content">
  31. <ul data-role="listview" data-inset="true" data-filter="false"  data-theme="c">
  32. <li><a data-transition="slide" href="#mylocation">Nuvarande plats</a></li>
  33. <li><a data-transition="slide" href="#mylocation1">Markeringar på karta</a></li>
  34. </ul>
  35. </div><!-- /content -->


  36. </div><!-- /page -->

  37. <div data-role="page" data-theme="c" id="mylocation">


  38. <div data-role="header" data-theme="b">
  39. <a href="#hem"  data-ajax="false" data-direction="reverse" data-transition="slide" data-theme="c">Tillbaka</a>
  40. <h1>Nuvarande plats</h1>
  41. </div><!-- /header -->
  42. <div data-role="content"  id="map">
  43. <script>
  44. jQuery(document).on('pageinit', '#mylocation', function() {
  45. var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/d116731b41464275bb37693a2f8cfe89/997/256/{z}/{x}/{y}.png');
  46. var map = L.map('map');


  47. L.tileLayer('http://{s}.tile.cloudmade.com/d116731b41464275bb37693a2f8cfe89/997/256/{z}/{x}/{y}.png', {
  48. maxZoom: 18,
  49. attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
  50. }).addTo(map);


  51. function onLocationFound(e) {
  52. var radius = e.accuracy / 2;


  53. L.marker(e.latlng).addTo(map)
  54. .bindPopup("Du är " + radius + " meter från den här platsen").openPopup();


  55. L.circle(e.latlng, radius).addTo(map);
  56. }


  57. function onLocationError(e) {
  58. alert(e.message);
  59. }


  60. map.on('locationfound', onLocationFound);
  61. map.on('locationerror', onLocationError);


  62. map.locate({setView: true, maxZoom: 16});
  63. });
  64. </script>
  65. </div><!-- /content -->


  66.     <div data-role="footer" data-position="fixed" data-theme="b" class="classFooter">
  67.         <h1>Copyright © 2012</h1> 
  68.     </div>
  69. </div><!-- /page -->

  70. <div data-role="page" data-theme="c" id="mylocation1">


  71. <div data-role="header" data-theme="b">
  72. <a href="#hem"  data-ajax="false" data-direction="reverse" data-transition="slide" data-theme="c">Tillbaka</a>
  73. <h1>Nuvarande plats</h1>
  74. </div><!-- /header -->
  75. <div data-role="content"  id="map1">
  76. <script>




  77. $('#mylocation1').live('pagecreate',function(event){
  78. var map1 = L.map('map1').setView([51.505, -0.09], 13);
  79. L.tileLayer('http://{s}.tile.cloudmade.com/d116731b41464275bb37693a2f8cfe89/997/256/{z}/{x}/{y}.png', {
  80.    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
  81.    maxZoom: 18
  82. }).addTo(map1);
  83. });
  84. </script>
  85. </div><!-- /content -->


  86.     <div data-role="footer" data-position="fixed" data-theme="b" class="classFooter">
  87.         <h1>Copyright © 2012</h1> 
  88.     </div>
  89. </div><!-- /page -->


  90. </body>
  91. </html>