[OpenLayers-Commits] r11321 - trunk/openlayers/examples

Wed Feb 23 09:08:32 EST 2011

Author: fredj
Date: 2011-02-23 06:08:32 -0800 (Wed, 23 Feb 2011)
New Revision: 11321

Modified:
   trunk/openlayers/examples/geolocation.html
   trunk/openlayers/examples/geolocation.js
Log:
add some fancy move to geolocation accuracy. p=aabt, r=me (closes #1885)

Modified: trunk/openlayers/examples/geolocation.html
===================================================================

--- trunk/openlayers/examples/geolocation.html	2011-02-23 14:00:19 UTC (rev 11320)
+++ trunk/openlayers/examples/geolocation.html	2011-02-23 14:08:32 UTC (rev 11321)
@@ -13,7 +13,7 @@
             }
         </style>
     </head>
-    <body onload="init()">
+    <body>
         <h1 id="title">Geolocation Example</h1>
 
         <div id="tags">

Modified: trunk/openlayers/examples/geolocation.js
===================================================================
--- trunk/openlayers/examples/geolocation.js	2011-02-23 14:00:19 UTC (rev 11320)
+++ trunk/openlayers/examples/geolocation.js	2011-02-23 14:08:32 UTC (rev 11321)
@@ -1,8 +1,7 @@
 var style = {
+    fillColor: '#000',
     fillOpacity: 0.1,
-    fillColor: '#000',
-    strokeColor: '#f00',
-    strokeOpacity: 0.6
+    strokeWidth: 0
 }
 
 var map = new OpenLayers.Map('map');
@@ -17,6 +16,34 @@
     ), 12
 );
 
+var pulsate = function(feature) {
+    var point = feature.geometry.getCentroid(),
+        bounds = feature.geometry.getBounds(),
+        radius = Math.abs((bounds.right - bounds.left)/2),
+        count = 0,
+        grow = 'up';
+
+    var resize = function(){
+        if (count>16) clearInterval(window.resizeInterval);
+        var interval = radius * 0.03;
+        var ratio = interval/radius;
+        switch(count) {
+            case 4:
+            case 12:
+                grow = 'down'; break;
+            case 8:
+                grow = 'up'; break;
+        }
+        if (grow!=='up') {
+            ratio = - Math.abs(ratio);
+        }
+        feature.geometry.resize(1+ratio, point);
+        vector.drawFeature(feature);
+        count++;
+    }
+    window.resizeInterval = window.setInterval(resize, 50, point, radius);
+};
+
 var geolocate = new OpenLayers.Control.Geolocate({
     geolocationOptions: {
         enableHighAccuracy: false,
@@ -27,6 +54,16 @@
 map.addControl(geolocate);
 geolocate.events.register("locationupdated",this,function(e) {
     vector.removeAllFeatures();
+    var circle = new OpenLayers.Feature.Vector(
+        OpenLayers.Geometry.Polygon.createRegularPolygon(
+            new OpenLayers.Geometry.Point(e.point.x, e.point.y),
+            e.position.coords.accuracy/2,
+            40,
+            0
+        ),
+        {},
+        style
+    );
     vector.addFeatures([
         new OpenLayers.Feature.Vector(
             e.point,
@@ -39,34 +76,28 @@
                 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
-        )
+        circle
     ]);
     map.zoomToExtent(vector.getDataExtent());
+    pulsate(circle);
 });
 geolocate.events.register("locationfailed",this,function() {
     OpenLayers.Console.log('Location detection failed');
 });
 
 $('locate').onclick = function() {
+    vector.removeAllFeatures();
     geolocate.deactivate();
     $('track').checked = false;
     geolocate.watch = false;
     geolocate.activate();
 };
 $('track').onclick = function() {
+    vector.removeAllFeatures();
     geolocate.deactivate();
     if (this.checked) {
         geolocate.watch = true;
         geolocate.activate();
     }
 };
-$('track').checked = false;
\ No newline at end of file
+$('track').checked = false;

