[OpenLayers-Commits] r11119 - trunk/openlayers/examples
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Tue Feb 15 19:34:16 EST 2011
Author: tschaub
Date: 2011-02-15 16:34:16 -0800 (Tue, 15 Feb 2011)
New Revision: 11119
Added:
trunk/openlayers/examples/mobile-jq.html
trunk/openlayers/examples/mobile.js
Log:
Add example using jQuery mobile (limited functionality).
Added: trunk/openlayers/examples/mobile-jq.html
===================================================================
--- trunk/openlayers/examples/mobile-jq.html (rev 0)
+++ trunk/openlayers/examples/mobile-jq.html 2011-02-16 00:34:16 UTC (rev 11119)
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>OpenLayers with jQuery Mobile</title>
+ <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
+ <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>
+ <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+ <script src="../lib/OpenLayers.js"></script>
+ <script src="mobile.js"></script>
+ <style>
+ html {
+ height: 100%;
+ }
+ body: {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ }
+ .ui-content {
+ padding: 0;
+ }
+ .ui-footer, .ui-header {
+ text-align: center;
+ padding: 5px 0;
+ }
+ #log {
+ display: none;
+ }
+ #map {
+ width: 100%;
+ height: 100%;
+ }
+ .olControlAttribution {
+ font-size: 10px;
+ bottom: 5px;
+ right: 5px;
+ }
+ </style>
+ <script>
+ $(document).ready(function() {
+ // fix height of content to allow for header & footer
+ function fixContentHeight() {
+ var header = $("div[data-role='header']:visible");
+ var footer = $("div[data-role='footer']:visible");
+ var content = $("div[data-role='content']:visible:visible");
+ var viewHeight = $(window).height();
+
+ var contentHeight = viewHeight - header.outerHeight() - footer.outerHeight();
+ if ((content.outerHeight() + header.outerHeight() + footer.outerHeight()) !== viewHeight) {
+ contentHeight -= (content.outerHeight() - content.height());
+ content.height(contentHeight);
+ }
+ if (window.map) {
+ map.updateSize();
+ } else {
+ // initialize map
+ init();
+ }
+ }
+ $(window).bind("orientationchange resize pageshow", fixContentHeight);
+ fixContentHeight();
+
+ // add behavior to navigation buttons
+ $("#west").click(function() {
+ pan(-0.25, 0);
+ });
+ $("#north").click(function() {
+ pan(0, -0.25);
+ });
+ $("#south").click(function() {
+ pan(0, 0.25);
+ });
+ $("#east").click(function() {
+ pan(0.25, 0);
+ });
+
+ // add behavior to drawing controls
+ function deactivateControls() {
+ $.each(map.getControlsByClass(/DrawFeature/), function(index, control) {
+ control.deactivate();
+ });
+ map.getControlsBy("id", "mod-control")[0].deactivate();
+ }
+ $("#nav, #point, #line, #poly, #mod").change(function(event) {
+ deactivateControls();
+ // jquery mobile bug regarding change makes us go through all inputs
+ // https://github.com/jquery/jquery-mobile/issues/issue/1088
+ var val = $("input:radio[name=controls]:checked").val();
+ if (val !== "nav") {
+ map.getControlsBy("id", val + "-control")[0].activate();
+ }
+ });
+
+ $("#nav").click();
+ $("#nav").click(); // jquery mobile bug forces 2 calls to refresh radio ui
+ });
+
+ </script>
+ </head>
+ <body>
+ <div data-role="page">
+ <div data-role="header">
+ <input id="west" type="button" data-icon="arrow-l" value="west">
+ <input id="north" type="button" data-icon="arrow-u" value="north">
+ <input id="south" type="button" data-icon="arrow-d" value="south">
+ <input id="east" type="button" data-icon="arrow-r" value="east">
+ </div>
+
+ <div data-role="content">
+ <div id="map"></div>
+ </div>
+
+ <div data-role="footer">
+ <form id="controls">
+ <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
+ <input id="nav" type="radio" name="controls" value="nav" checked="checked">
+ <label for="nav">navigate</label>
+ <input id="point" type="radio" name="controls" value="point">
+ <label for="point">point</label>
+ <input id="line" type="radio" name="controls" value="line">
+ <label for="line">line</label>
+ <input id="poly" type="radio" name="controls" value="poly">
+ <label for="poly">poly</label>
+ <input id="mod" type="radio" name="controls" value="mod">
+ <label for="mod">modify</label>
+ </fieldset>
+ </form>
+ </div>
+ </div>
+ <div id="log"></div>
+ </body>
+</html>
\ No newline at end of file
Added: trunk/openlayers/examples/mobile.js
===================================================================
--- trunk/openlayers/examples/mobile.js (rev 0)
+++ trunk/openlayers/examples/mobile.js 2011-02-16 00:34:16 UTC (rev 11119)
@@ -0,0 +1,86 @@
+
+// initialize map when page ready
+var map;
+function init() {
+ var gg = new OpenLayers.Projection("EPSG:4326");
+ var sm = new OpenLayers.Projection("EPSG:900913");
+
+ // layer for drawn features
+ var vector = new OpenLayers.Layer.Vector();
+
+ // create map
+ map = new OpenLayers.Map({
+ div: "map",
+ projection: sm,
+ units: "m",
+ numZoomLevels: 18,
+ maxResolution: 156543.0339,
+ maxExtent: new OpenLayers.Bounds(
+ -20037508.34, -20037508.34, 20037508.34, 20037508.34
+ ),
+ controls: [
+ new OpenLayers.Control.Navigation(),
+ new OpenLayers.Control.Attribution(),
+ new OpenLayers.Control.DrawFeature(
+ vector, OpenLayers.Handler.Point, {id: "point-control"}
+ ),
+ new OpenLayers.Control.DrawFeature(
+ vector, OpenLayers.Handler.Path, {id: "line-control"}
+ ),
+ new OpenLayers.Control.DrawFeature(
+ vector, OpenLayers.Handler.Polygon, {id: "poly-control"}
+ ),
+ new OpenLayers.Control.ModifyFeature(vector, {id: "mod-control"}),
+ ],
+ layers: [new OpenLayers.Layer.OSM(), vector],
+ center: new OpenLayers.LonLat(0, 0),
+ zoom: 1
+ });
+
+ // attempt to get position
+ if (window.navigator && navigator.geolocation) {
+ navigator.geolocation.getCurrentPosition(
+ updatePosition,
+ function failure(error) {
+ updateLog(error.message);
+ },
+ {
+ enableHighAccuracy: true
+ }
+ );
+ }
+
+};
+
+// get position if possible
+var position;
+function updatePosition(pos) {
+ position = pos;
+ var lon = position.coords.longitude;
+ var lat = position.coords.latitude;
+ updateLog("position: lon " + lon + ", lat " + lat);
+ map.setCenter(
+ new OpenLayers.LonLat(lon, lat).transform(gg, sm)
+ );
+}
+
+// allow simple logging
+var log = [];
+function updateLog(message) {
+ log.push(message);
+ var div = document.createElement("div");
+ div.appendChild(document.createTextNode(message));
+ document.getElementById("log").appendChild(div);
+ if (window.console) {
+ console.log(message);
+ }
+}
+function clearLog() {
+ log.length = 0;
+ document.getElementById("log").innerHTML = "";
+}
+
+function pan(fx, fy) {
+ var size = map.getSize();
+ map.pan(size.w * fx, size.h * fy);
+}
More information about the Commits
mailing list