[OpenLayers-Commits] r11333 - sandbox/sbrunner/openlayers/examples

Wed Feb 23 10:23:46 EST 2011

Author: sbrunner
Date: 2011-02-23 07:23:46 -0800 (Wed, 23 Feb 2011)
New Revision: 11333

Modified:
   sandbox/sbrunner/openlayers/examples/geolocation.html
   sandbox/sbrunner/openlayers/examples/geolocation.js
Log:
add device orientation in geolocation example

Modified: sandbox/sbrunner/openlayers/examples/geolocation.html
===================================================================

--- sandbox/sbrunner/openlayers/examples/geolocation.html	2011-02-23 14:59:48 UTC (rev 11332)
+++ sandbox/sbrunner/openlayers/examples/geolocation.html	2011-02-23 15:23:46 UTC (rev 11333)
@@ -11,6 +11,12 @@
             .olControlAttribution {
                 bottom: 3px;
             }
+            #north {
+                position: relative;
+                left: 60px;
+                top: 90px;
+                z-index: 1500;
+            }
         </style>
     </head>
     <body>
@@ -24,7 +30,7 @@
             Track  current position and display it with its accuracy.
         </p>
 
-        <div id="map" class="smallmap"></div>
+        <div id="map" class="smallmap"><div id="north" /><img id="northimg" src="img/mobile-arrow.png" /></div>
         <button id="locate">Locate me!</button>
         <input type="checkbox" name="track" id="track">
         <label for="track">Track my position</label>

Modified: sandbox/sbrunner/openlayers/examples/geolocation.js
===================================================================
--- sandbox/sbrunner/openlayers/examples/geolocation.js	2011-02-23 14:59:48 UTC (rev 11332)
+++ sandbox/sbrunner/openlayers/examples/geolocation.js	2011-02-23 15:23:46 UTC (rev 11333)
@@ -1,3 +1,9 @@
+/* Copyright (c) 2006-2011 by OpenLayers Contributors (see authors.txt for
+ * full list of contributors). Published under the Clear BSD license.
+ * See http://svn.openlayers.org/trunk/openlayers/license.txt for the
+ * full text of the license. */
+
+
 var style = {
     fillColor: '#000',
     fillOpacity: 0.1,
@@ -64,18 +70,20 @@
         {},
         style
     );
+    arrow = new OpenLayers.Feature.Vector(
+        e.point,
+        {},
+        {
+            externalGraphic: "img/mobile-arrow.png",
+            graphicHeight: 19,
+            graphicWidth: 20,
+            graphicXOffset: -10,
+            graphicYOffset: -10,
+            rotation: 15
+        }
+    );
     vector.addFeatures([
-        new OpenLayers.Feature.Vector(
-            e.point,
-            {},
-            {
-                graphicName: 'cross',
-                strokeColor: '#f00',
-                strokeWidth: 2,
-                fillOpacity: 0,
-                pointRadius: 10
-            }
-        ),
+        arrow,
         circle
     ]);
     map.zoomToExtent(vector.getDataExtent());
@@ -101,3 +109,26 @@
     }
 };
 $('track').checked = false;
+
+// Device Orientation
+if (window.DeviceOrientationEvent) {
+    window.addEventListener("deviceorientation", function(event) {
+        if (event.alpha) {
+            var orientation = event.alpha - window.orientation - 90;
+            var img = Openlayers.Util.getElement('northimg');
+            var value = "rotate(" + event.orientation + "deg)";
+            img.style.transform = value;
+            img.style.webkitTransform = value;
+
+            arrow.style.rotation = -event.orientation;
+            arrow.layer.drawFeature(arrow);
+        }
+        else {
+            OpenLayers.Util.getElement('north').style.display = "none";
+        }
+    }, true);
+}
+else {
+    OpenLayers.Util.getElement('north').style.display = "none";
+}
+

