javascript - jQuery Mobile won't load OpenLayers Map -
i'm starting jquerymobile , wanted display map using openlayers. i'm having weird issue. here working code. sorry couldn't make fiddle, can test copy/paste on notepad or whatever.
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script src="http://www.openlayers.org/api/openlayers.js"></script> <style type="text/css"> html ,body { margin: 0; padding: 0; height: 100%; } .ui-content { padding: 0; } #pageone, #pageone .ui-content, #basicmap { width: 100%; height: 100%; } </style> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <div id="basicmap"></div> </div> </div> <script> function init() { map = new openlayers.map("basicmap", { controls: [ new openlayers.control.navigation(), new openlayers.control.argparser(), new openlayers.control.attribution() ] }); var mapnik = new openlayers.layer.osm(); var fromprojection = new openlayers.projection("epsg:4326"); // transform wgs 1984 var toprojection = new openlayers.projection("epsg:900913"); // spherical mercator projection var position = new openlayers.lonlat(7.55785346031189,50.3625329673905).transform( fromprojection, toprojection); var zoom = 3; map.addlayer(mapnik); map.setcenter(position, zoom ); var markers = new openlayers.layer.markers( "markers" ); map.addlayer(markers); var marker = new openlayers.marker(position); marker.events.register("click", map , function(e){ alert("click"); }); markers.addmarker(marker); } $(document).on("pagecreate","#pageone",init()); </script> </body> </html>
this code doesn't show map.
now if take off following line :
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
you can see map showing.
any idea on how can solve ? because think can solved can't see how.
thank you.
i knew stupid, if can interest , css should :
#pageone, #pageone .ui-content, #basicmap { width: 100%; height: 100%; display : block; }
and call js :
$(document).ready(init());
don't know why works.
Comments
Post a Comment