Ticket #110: patch-110-r5555-A0.diff

lib/OpenLayers/Map.js

@@ -1206 +1206 @@
-        }
-
-   },
+   
+   /** 
+     * APIMethod: panTo
+     * Allows user to pan to a new lonlat
+     * If the new lonlat is in the current extent the map will slide smoothly
+     * 
+     * Parameters:
+     * lonlat - {<OpenLayers.Lonlat>}
+     */
+    panTo: function(lonlat) {
+        if (this.getExtent().containsLonLat(lonlat)) {
+            if (!this.panTween) {
+                this.panTween = new OpenLayers.Tween(OpenLayers.Easing.Expo.easeOut);
+            }
+            var center = map.getCenter();
+            var from = {
+                lon: center.lon,
+                lat: center.lat
+            };
+            var to = {
+                lon: lonlat.lon,
+                lat: lonlat.lat
+            };
+            this.panTween.start(from, to, 50, function(lonlat){
+                var lonlat = new OpenLayers.LonLat(lonlat.lon, lonlat.lat);
+                map.setCenter(lonlat);
+            });
+        } else {
+            map.setCenter(lonlat);
+        }
+    },
-
-    /**
-     * APIMethod: setCenter

lib/OpenLayers/Tween.js

@@ +1 @@
+/* Copyright (c) 2006-2007 MetaCarta, Inc., published under the Clear BSD
+ * license.  See http://svn.openlayers.org/trunk/openlayers/license.txt for the
+ * full text of the license. */
+
+/**
+ * Namespace: OpenLayers.Tween
+ */
+OpenLayers.Tween = OpenLayers.Class({
+    
+    /**
+     * Constant: INTERVAL
+     * Interval in milliseconds between 2 steps
+     */
+    INTERVAL: 10,
+    
+    /**
+     * 
+     * Params:
+     * easing - {<OpenLayers.Easing>(Function)} easing function method to use
+     */ 
+    initialize: function(easing) {
+        this.easing = easing;
+    },
+    
+    /**
+     * APIMethod: start
+     * Plays the Tween, and calls the callback method on each step
+     * 
+     * begin - {Object} begin value 
+     * finish - {Object} finish value (should have the same properties as begin)
+     * duration - {int} duration of the tween (number of steps)
+     * callback - {Function} callback called on each step
+     */
+    start: function(begin, finish, duration, callback) {
+        this.begin = begin;
+        this.finish = finish;
+        this.duration = duration;
+        this.time = 0;
+        if (this.interval) {
+            window.clearInterval(this.interval);
+            this.interval = null;
+        }
+        this.interval = window.setInterval(
+            OpenLayers.Function.bind(this.ease, this, callback), this.INTERVAL);
+    },
+    
+    /**
+     * Method: ease
+     * Calls the appropriate easing method
+     * 
+     * callback - {Function} callback
+     */
+    ease: function(callback) {
+        if (this.time >= this.duration) {
+            window.clearInterval(this.interval);
+            this.interval = null;
+        }
+        
+        var value = {};
+        for (var i in this.begin) {
+            var b = this.begin[i];
+            var f = this.finish[i];
+            if (b == null || f == null || isNaN(b) || isNaN(f)) {
+                OpenLayers.Console.error('invalid value for Tween');
+            }
+            
+            var c = f - b;
+            value[i] = this.easing.apply(this, [this.time, b, c, this.duration]);
+        }
+        this.time++;
+        callback.call(this, value);
+    },
+    
+    /**
+     * Create empty functions for all easing methods.
+     */
+    CLASS_NAME: "OpenLayers.Tween"
+});
+
+/**
+ * Namespace: OpenLayers.Easing
+ * 
+ * Credits:
+ *      Easing Equations by Robert Penner, <http://www.robertpenner.com/easing/>
+ */
+OpenLayers.Easing = {
+    /**
+     * Create empty functions for all easing methods.
+     */
+    CLASS_NAME: "OpenLayers.Easing"
+}
+
+/**
+ * Namespace: OpenLayers.Easing.Linear
+ */
+OpenLayers.Easing.Linear = {
+    
+    /**
+     * APIFunction: easeIn
+     * 
+     * Parameters:
+     * t - {Float} time
+     * b - {Float} beginning position
+     * c - {Float} total change
+     * d - {Float} duration of the transition
+     */
+    easeIn: function(t, b, c, d) {
+        return c*t/d + b;
+    },
+    
+    /**
+     * APIFunction: easeOut
+     * 
+     * Parameters:
+     * t - {Float} time
+     * b - {Float} beginning position
+     * c - {Float} total change
+     * d - {Float} duration of the transition
+     */
+    easeOut: function(t, b, c, d) {
+        return c*t/d + b;
+    },
+    
+    /**
+     * APIFunction: easeInOut
+     * 
+     * Parameters:
+     * t - {Float} time
+     * b - {Float} beginning position
+     * c - {Float} total change
+     * d - {Float} duration of the transition
+     */
+    easeInOut: function(t, b, c, d) {
+        return c*t/d + b;
+    },
+
+    CLASS_NAME: "OpenLayers.Easing.Linear"
+};
+
+/**
+ * Namespace: OpenLayers.Easing.Expo
+ */
+OpenLayers.Easing.Expo = {
+    
+    /**
+     * APIFunction: easeIn
+     * 
+     * Parameters:
+     * t - {Float} time
+     * b - {Float} beginning position
+     * c - {Float} total change
+     * d - {Float} duration of the transition
+     */
+    easeIn: function(t, b, c, d) {
+        return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
+    },
+    
+    /**
+     * APIFunction: easeOut
+     * 
+     * Parameters:
+     * t - {Float} time
+     * b - {Float} beginning position
+     * c - {Float} total change
+     * d - {Float} duration of the transition
+     */
+    easeOut: function(t, b, c, d) {
+        return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
+    },
+    
+    /**
+     * APIFunction: easeInOut
+     * 
+     * Parameters:
+     * t - {Float} time
+     * b - {Float} beginning position
+     * c - {Float} total change
+     * d - {Float} duration of the transition
+     */
+    easeInOut: function(t, b, c, d) {
+        if (t==0) return b;
+        if (t==d) return b+c;
+        if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
+        return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
+    },
+
+    CLASS_NAME: "OpenLayers.Easing.Expo"
+};

lib/OpenLayers.js

@@ -74 +74 @@
-            "OpenLayers/BaseTypes/Pixel.js",
-            "OpenLayers/BaseTypes/Size.js",
-            "OpenLayers/Console.js",
+            "OpenLayers/Tween.js",
-            "Rico/Corner.js",
-            "Rico/Color.js",
-            "OpenLayers/Ajax.js",

examples/tween.html

@@ +1 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>Markers Layer Example</title>
+    <style type="text/css">
+        #map {
+            width: 512px;
+            height: 256px;
+            border: 1px solid black;
+        }
+    </style>
+    <script src="../lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        var map, layer;
+
+        function init(){
+            OpenLayers.ProxyHost="/proxy/?url=";
+            map = new OpenLayers.Map('map');
+            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
+                "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
+                
+            map.addLayer(layer);
+            map.setCenter(new OpenLayers.LonLat(0, 0), 0);
+
+            map.zoomToMaxExtent();
+            
+            var tween = new OpenLayers.Tween(OpenLayers.Easing.Expo.easeOut);
+            
+            map.events.register("click", map, function(e) {
+                
+                function moveMap(lonlat) {
+                    var lonlat = new OpenLayers.LonLat(lonlat.lon, lonlat.lat);
+                    map.setCenter(lonlat, map.getZoom());
+                };
+                
+                var click = map.getLonLatFromViewPortPx(e.xy);
+                var to = {
+                    lon: click.lon,
+                    lat: click.lat
+                };
+                
+                var center = map.getCenter();
+                var from = {
+                    lon: center.lon,
+                    lat: center.lat
+                };
+                tween.start(from, to, 50, moveMap);
+            });
+        }
+        
+        function setCenter() {
+            var lon = Math.random() * 360 - 180;
+            var lat = Math.random() * 180 - 90;
+            var lonlat = new OpenLayers.LonLat(lon, lat);
+            map.panTo(lonlat);
+        }
+    </script>
+  </head>
+  <body onload="init()">
+    <div id="title">Tween Example</div>
+    <div id="tags"></div>
+    <div id="shortdesc">Show transition effects</div>
+    <div id="map"></div>
+    <div id="docs">
+        This is an example of transition effects. One single click on the map should recenter it with a smooth slide.
+    </div>
+    <button onclick="setCenter()">recenter to random lonlat</button>
+  </body>
+</html>