Enhancing the sencha touch example, p=mjansen,bartvde,fredj,pgiraud, (Closes #3101)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@11483 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

examples/mobile.js

@@ -1,16 +1,27 @@
+// API key for http://openlayers.org. Please get your own at
+// http://bingmapsportal.com/ and use that instead.
+var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
 
 // initialize map when page ready
 var map;
 var gg = new OpenLayers.Projection("EPSG:4326");
 var sm = new OpenLayers.Projection("EPSG:900913");
-function init() {
-    
-    // layer for drawn features
-    var vector = new OpenLayers.Layer.Vector();
+var init = function () {
 
+    var vector = new OpenLayers.Layer.Vector("Vector Layer", {});
+
+    var geolocate = new OpenLayers.Control.Geolocate({
+        id: 'locate-control',
+        geolocationOptions: {
+            enableHighAccuracy: false,
+            maximumAge: 0,
+            timeout: 7000
+        }
+    });
     // create map
     map = new OpenLayers.Map({
         div: "map",
+        theme: null,
         projection: sm,
         units: "m",
         numZoomLevels: 18,
@@ -19,59 +30,78 @@ function init() {
             -20037508.34, -20037508.34, 20037508.34, 20037508.34
         ),
         controls: [
+            new OpenLayers.Control.Attribution(),
             new OpenLayers.Control.TouchNavigation({
                 dragPanOptions: {
                     interval: 0, // non-zero kills performance on some mobile phones
                     enableKinetic: true
                 }
             }),
-            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"}),
-            new OpenLayers.Control.ZoomPanel()
+            geolocate
         ],
-        layers: [new OpenLayers.Layer.OSM(), vector],
-        center: new OpenLayers.LonLat(0, 0),
-        zoom: 1
+        layers: [
+            new OpenLayers.Layer.OSM("OpenStreetMap", null, {
+                transitionEffect: 'resize'
+            }),
+            new OpenLayers.Layer.Bing({
+                key: apiKey,
+                type: "Road",
+                // custom metadata parameter to request the new map style - only useful
+                // before May 1st, 2011
+                metadataParams: {
+                    mapVersion: "v1"
+                },
+                name: "Bing Road",
+                transitionEffect: 'resize'
+            }),
+            new OpenLayers.Layer.Bing({
+                key: apiKey,
+                type: "Aerial",
+                name: "Bing Aerial",
+                transitionEffect: 'resize'
+            }),
+            new OpenLayers.Layer.Bing({
+                key: apiKey,
+                type: "AerialWithLabels",
+                name: "Bing Aerial + Labels",
+                transitionEffect: 'resize'
+            }), 
+            vector
+        ]
     });
+    map.zoomToMaxExtent();
 
-    // attempt to get position
-    if (window.navigator && navigator.geolocation) {
-        navigator.geolocation.getCurrentPosition(
-            updatePosition,
-            function failure(error) {
-                OpenLayers.Console.log(error.message);
-            },
-            {
-                enableHighAccuracy: true
-            }
-        );
-    }
-
+    var style = {
+        fillOpacity: 0.1,
+        fillColor: '#000',
+        strokeColor: '#f00',
+        strokeOpacity: 0.6
+    };
+    geolocate.events.register("locationupdated",this,function(e) {
+        vector.removeAllFeatures();
+        vector.addFeatures([
+            new OpenLayers.Feature.Vector(
+                e.point,
+                {},
+                {
+                    graphicName: 'cross',
+                    strokeColor: '#f00',
+                    strokeWidth: 2,
+                    fillOpacity: 0,
+                    pointRadius: 10
+                }
+            ),
+            new OpenLayers.Feature.Vector(
+                OpenLayers.Geometry.Polygon.createRegularPolygon(
+                    new OpenLayers.Geometry.Point(e.point.x, e.point.y),
+                    e.position.coords.accuracy/2,
+                    50,
+                    0
+                ),
+                {},
+                style
+            )
+        ]);
+        map.zoomToExtent(vector.getDataExtent());
+    });
 };
-
-// get position if possible
-var position;
-function updatePosition(pos) {
-    position = pos;
-    var lon =  position.coords.longitude;
-    var lat = position.coords.latitude;
-    OpenLayers.Console.log("position: lon " + lon + ", lat " + lat);
-    map.setCenter(
-        new OpenLayers.LonLat(lon, lat).transform(gg, sm)
-    );
-}
-
-function pan(fx, fy) {
-    var size = map.getSize();
-    map.pan(size.w * fx, size.h * fy);
-}
-