[OpenLayers-Commits] r11620 - sandbox/cmoullet/openlayers/examples

Sun Mar 6 01:41:20 EST 2011

Author: cmoullet
Date: 2011-03-05 22:41:19 -0800 (Sat, 05 Mar 2011)
New Revision: 11620

Added:
   sandbox/cmoullet/openlayers/examples/3DTransformation.html
   sandbox/cmoullet/openlayers/examples/navigator.html
   sandbox/cmoullet/openlayers/examples/navigator.js
Log:
Playing with 3D transformation. 

Added: sandbox/cmoullet/openlayers/examples/3DTransformation.html
===================================================================

--- sandbox/cmoullet/openlayers/examples/3DTransformation.html	                        (rev 0)
+++ sandbox/cmoullet/openlayers/examples/3DTransformation.html	2011-03-06 06:41:19 UTC (rev 11620)
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+        "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title>CSS 3D transformation</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"/>
+    <script type="text/javascript" src="../lib/OpenLayers.js"></script>
+    <style type="text/css">
+        body {
+            -webkit-transform-style: preserve-3d;
+            -webkit-perspective: 250;
+        }
+    </style>
+    <script type="text/javascript">
+        function init() {
+            var map = new OpenLayers.Map({
+                div: "map",
+                theme: null,
+                controls: [
+                    new OpenLayers.Control.TouchNavigation({
+                        dragPanOptions: {
+                            interval: 100,
+                            enableKinetic: true
+                        }
+                    })
+                ],
+                layers: [
+                    new OpenLayers.Layer.OSM("OpenStreetMap", null, {
+                        transitionEffect: 'resize'
+                    })
+                ],
+                center: new OpenLayers.LonLat(771595.97057525, 5912284.7041793),
+                zoom: 16
+            });
+
+        }
+    </script>
+</head>
+<body onload="init()">
+
+<div id="map" style="
+    -webkit-transform: rotateX(30deg);
+    transform: rotateX(30deg);
+    height: 600px;
+    width: 100%;"></div>
+
+</body>
+</html>
\ No newline at end of file

Added: sandbox/cmoullet/openlayers/examples/navigator.html
===================================================================
--- sandbox/cmoullet/openlayers/examples/navigator.html	                        (rev 0)
+++ sandbox/cmoullet/openlayers/examples/navigator.html	2011-03-06 06:41:19 UTC (rev 11620)
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+        "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title>Navigator example</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"/>
+    <script type="text/javascript" src="../lib/OpenLayers.js"></script>
+    <script type="text/javascript" src="navigator.js"></script>
+    <style type="text/css">
+        body {
+            -webkit-transform-style: preserve-3d;
+            -webkit-perspective: 200;
+        }
+        #title, #tags, #shortdesc {
+            display: none;
+        }
+    </style>
+</head>
+<body onload="init()">
+
+<h1 id="title">Navigator Mobile Example</h1>
+
+<div id="tags">
+    mobile, navigator
+</div>
+<p id="shortdesc">
+    An example of a navigator using accelerometer and direction.
+</p>
+
+<div id="map" style="
+    -webkit-transform: rotateX(30deg);
+    transform: rotateX(30deg);
+    height: 600px;
+    width: 100%;"></div>
+
+</body>
+</html>

Added: sandbox/cmoullet/openlayers/examples/navigator.js
===================================================================
--- sandbox/cmoullet/openlayers/examples/navigator.js	                        (rev 0)
+++ sandbox/cmoullet/openlayers/examples/navigator.js	2011-03-06 06:41:19 UTC (rev 11620)
@@ -0,0 +1,55 @@
+// initialize map when page ready
+var map;
+
+var init = function () {
+    // create map
+    map = new OpenLayers.Map({
+        div: "map",
+        theme: null,
+        controls: [
+            new OpenLayers.Control.TouchNavigation({
+                dragPanOptions: {
+                    interval: 100,
+                    enableKinetic: true
+                }
+            })
+        ],
+        layers: [
+            new OpenLayers.Layer.OSM("OpenStreetMap", null, {
+                transitionEffect: 'resize'
+            })
+        ],
+        center: new OpenLayers.LonLat(742000, 5881000),
+        zoom: 3
+    });
+
+    // Create a GeoLocation API Control
+    var geolocate = new OpenLayers.Control.Geolocate({
+        watch: true,
+        geolocationOptions: {
+            enableHighAccuracy: false,
+            maximumAge: 0,
+            timeout: 10000
+        }
+
+    });
+    map.addControl(geolocate);
+    
+    geolocate.events.register("locationupdated", this, function(e) {
+    });
+
+    geolocate.events.register("locationuncapable", this, function(e) {
+        alert("Your browser doesn't support geolocation. Please update to a modern browser.");
+    });
+
+    geolocate.events.register("locationfailed", this, function(e) {
+        switch (e.error.code) {
+            case 0: alert(OpenLayers.i18n("There was an error while retrieving your location: ") + e.error.message); break;
+            case 1: alert(OpenLayers.i18n("The user didn't accept to provide the location: ")); break;
+            case 2: alert(OpenLayers.i18n("The browser was unable to determine your location: ") + e.error.message); break;
+            case 3: alert(OpenLayers.i18n("The browser timed out before retrieving the location.")); break;
+        }
+    });
+
+    geolocate.activate();
+};

