[Commits] r2813 - sandbox/gxm/geoext/gxm/examples

[commits at geoext.org]

Author: marcjansen
Date: 2011-08-17 15:36:22 +0200 (Wed, 17 Aug 2011)
New Revision: 2813

Modified:
   sandbox/gxm/geoext/gxm/examples/buttons.js
Log:
[gxm] add a geolocation button to the example

Modified: sandbox/gxm/geoext/gxm/examples/buttons.js
===================================================================
--- sandbox/gxm/geoext/gxm/examples/buttons.js	2011-08-17 10:16:52 UTC (rev 2812)
+++ sandbox/gxm/geoext/gxm/examples/buttons.js	2011-08-17 13:36:22 UTC (rev 2813)
@@ -25,8 +25,8 @@
                 attribution: 'Metacarta WMS hosted on <a href="http://www.osgeo.org/" target="_blank">osgeo.org<a>'
             }
         );
-        
-        map.addLayers([ol_wms]);
+        var geolocationVector = new OpenLayers.Layer.Vector("Geolocation");
+        map.addLayers([ol_wms,geolocationVector]);
 
         var btnClickCallback = function(btn){
             Ext.Msg.alert(
@@ -129,6 +129,59 @@
             ]
         };
         
+        var ctrlGeolocation = new OpenLayers.Control.Geolocate({
+            bind: false,
+            watch: false,
+            geolocationOptions: {
+                enableHighAccuracy: false,
+                maximumAge: 0,
+                timeout: 7000
+            } 
+        });
+        ctrlGeolocation.events.register('locationupdated', geolocationVector, function(e) {
+            this.removeAllFeatures();
+            
+            var oneDeegreeLongAtEquatorInMeters = 111200,
+                oneDeegreeLongAtCurrentLatitude = oneDeegreeLongAtEquatorInMeters * (Math.cos(e.point.y / (180 / Math.PI))),
+                accuracyMeters = e.position.coords.accuracy,
+                accuracyDeegrees = accuracyMeters / oneDeegreeLongAtCurrentLatitude,
+                circle = new OpenLayers.Feature.Vector(
+                    OpenLayers.Geometry.Polygon.createRegularPolygon(
+                        new OpenLayers.Geometry.Point(e.point.x, e.point.y),
+                        accuracyDeegrees,
+                        50,
+                        0
+                    ),
+                    {},
+                    {
+                        fillColor: '#e00',
+                        fillOpacity: 0.1,
+                        strokeColor: '#f00',
+                        fillOpacity: 0.2,
+                        strokeWidth: 2
+                    }
+                );
+            this.addFeatures([
+                new OpenLayers.Feature.Vector(
+                    e.point,
+                    {},
+                    {
+                        graphicName: 'cross',
+                        strokeColor: '#f00',
+                        strokeWidth: 2,
+                        fillOpacity: 0,
+                        pointRadius: 10
+                    }
+                ),
+                circle
+            ]);
+            this.map.zoomToExtent(this.getDataExtent());
+        });
+        ctrlGeolocation.events.register('deactivate', geolocationVector, function(e) {
+            this.removeAllFeatures();
+        });
+        
+        
         viewport  = new Ext.Panel({
             fullscreen: true,
             layout: 'fit',
@@ -146,7 +199,20 @@
                 xtype: 'toolbar',
                 dock: 'bottom',
                 items: [
-                    digGroup
+                    digGroup,
+                    {
+                        xtype: 'spacer'
+                    },
+                    {
+                        xtype: 'segmentedbutton',
+                        items: [{
+                            text: 'Locate me',
+                            control: ctrlGeolocation,
+                            xtype: "gxm_button",
+                            exclusiveGroup: 'geolocation',
+                            map: map
+                        }]
+                    }
                 ]
             }],
             items: [