summaryrefslogtreecommitdiff
path: root/misc/openlayers/examples/mobile-jq.html
diff options
context:
space:
mode:
authorChris Schlaeger <chris@linux.com>2014-08-12 21:56:44 +0200
committerChris Schlaeger <chris@linux.com>2014-08-12 21:56:44 +0200
commitea346a785dc1b3f7c156f6fc33da634e1f1a627b (patch)
treeaf67530553d20b6e82ad60fd79593e9c4abf5565 /misc/openlayers/examples/mobile-jq.html
parent59741cd535c47f25971bf8c32b25da25ceadc6d5 (diff)
downloadpostrunner-fb1989bda5d3e0a5472ba7644d57cae197733a8f.zip
Adding jquery, flot and openlayers to be included with the GEM.v0.0.4
Diffstat (limited to 'misc/openlayers/examples/mobile-jq.html')
-rw-r--r--misc/openlayers/examples/mobile-jq.html76
1 files changed, 76 insertions, 0 deletions
diff --git a/misc/openlayers/examples/mobile-jq.html b/misc/openlayers/examples/mobile-jq.html
new file mode 100644
index 0000000..5e16caa
--- /dev/null
+++ b/misc/openlayers/examples/mobile-jq.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+ <title>OpenLayers with jQuery Mobile</title>
+ <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">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
+ <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+ <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
+ <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css">
+ <link rel="stylesheet" href="style.mobile-jq.css" type="text/css">
+ <script src="../lib/OpenLayers.js?mobile"></script>
+ <script src="mobile-base.js"></script>
+ <script src="mobile-jq.js"></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="#searchpage" data-icon="search" data-role="button">Search</a>
+ <a href="#" id="locate" data-icon="locate" data-role="button">Locate</a>
+ <a href="#layerspage" data-icon="layers" data-role="button">Layers</a>
+ </div>
+ <div id="navigation" data-role="controlgroup" data-type="vertical">
+ <a href="#" data-role="button" data-icon="plus" id="plus"
+ data-iconpos="notext"></a>
+ <a href="#" data-role="button" data-icon="minus" id="minus"
+ data-iconpos="notext"></a>
+ </div>
+ </div>
+
+ <div data-role="page" id="searchpage">
+ <div data-role="header">
+ <h1>Search</h1>
+ </div>
+ <div data-role="fieldcontain">
+ <input type="search" name="query" id="query"
+ value="" placeholder="Search for places"
+ autocomplete="off"/>
+ </div>
+ <ul data-role="listview" data-inset="true" id="search_results"></ul>
+ </div>
+
+ <div data-role="page" id="layerspage">
+ <div data-role="header">
+ <h1>Layers</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="c" id="layerslist">
+ </ul>
+ </div>
+ </div>
+
+ <div id="popup" data-role="dialog">
+ <div data-position="inline" data-theme="d" data-role="header">
+ <h1>Details</h1>
+ </div>
+ <div data-theme="c" data-role="content">
+ <ul id="details-list" data-role="listview">
+ </ul>
+ </div>
+ </div>
+ </body>
+</html>