Skip to content

Instantly share code, notes, and snippets.

@pgiraud

pgiraud/layerslist

Created February 23, 2011 18:57
Show Gist options
  • Save pgiraud/840941 to your computer and use it in GitHub Desktop.
Save pgiraud/840941 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
layerslist
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>OpenLayers with jQuery Mobile</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css">
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<style>
</style>
<script type="text/javascript">
$(document).ready(function() {
/*
$('#searchpage').live('pageshow',function(event, ui){
$('#query').bind("change", function(e) {
console.log(e);
$.mobile.pageLoading();
var searchUrl = 'http://ws.geonames.org/searchJSON?featureClass=P&maxRows=10';
searchUrl += '&name_startsWith=' + $('#query')[0].value;
$.getJSON(searchUrl, function(data) {
$.each(data.geonames, function() {
console.log(this.name);
});
$.mobile.pageLoading(true);
});
});
// only listen to the first event triggered
$('#searchpage').die('pageshow', arguments.callee);
});
*/
var layers = [{
name: 'layer0'
}, {
name: 'layer1'
}]
$.each(layers, function() {
$('<a />', {
text: this.name,
"data-role": "button"
}).appendTo('#layerslist');
//$('#layerslist').listview('refresh');
});
});
</script>
</head>
<body>
<h1 id="title">OpenLayers with jQuery Mobile</h1>
<div id="tags">
mobile, jquery
</div>
<p id="shortdesc">
Using jQuery Mobile to display an OpenLayers map.
</p>
<div data-role="page" id="mappage">
<div data-role="content">
<div id="map"></div>
</div>
<div data-role="footer">
<a href="#layerspage" data-icon="search" data-role="button">Layers</a>
</div>
</div>
<div data-role="page" id="layerspage">
<div data-role="content">
<div data-role="controlgroup" id="layerslist"></div>
<!--<ul data-role="listview" data-inset="true" id="layerslist"> -->
<!--</ul> -->
</div>
<!--<fieldset data-role="controlgroup" id="layerslist">-->
<!--<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />-->
<!--<label for="checkbox-1">I agree</label>-->
<!--</fieldset>-->
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment