OpenLayers OpenLayers

Ticket #110: animated_panning.patch

File animated_panning.patch, 17.4 kB (added by crschmidt, 1 year ago)

  • tests/test_Map.html

    old new  
    681681        map.zoomToMaxExtent(); 
    682682        map.setBaseLayer(tmsLayer); 
    683683        map.zoomIn(); 
    684         map.pan(0, -200); 
     684        map.pan(0, -200, {immediate:true}); 
    685685        map.setBaseLayer(wmsLayer); 
    686686        t.eq(map.layerContainerDiv.style.top, "0px", "layerContainer is recentered after setBaseLayer"); 
    687687    } 

  • tests/Control/test_Permalink.html

    old new  
    3838        layer.setVisibility(true); 
    3939        if (!map.getCenter())  map.zoomToMaxExtent(); 
    4040        map.addControl(control); 
    41         map.pan(5, 0); 
     41        map.pan(5, 0, {immediate:true}); 
    4242        t.ok(OpenLayers.Util.isEquivalentUrl(OpenLayers.Util.getElement('permalink').href, location+"?zoom=2&lat=0&lon=1.75781&layers=BT"), 'pan sets permalink'); 
    4343         
    4444        map.layers[1].setVisibility(false); 
    …… 
    5555        map.addLayer(layer); 
    5656        if (!map.getCenter())  map.zoomToMaxExtent(); 
    5757        map.addControl(control); 
    58         map.pan(5, 0); 
     58        map.pan(5, 0, {immediate:true}); 
    5959        OpenLayers.Util.getElement('edit_permalink').href = './edit.html?zoom=2&lat=0&lon=1.75781&layers=B'; 
    6060        t.eq(OpenLayers.Util.getElement('permalink').href, OpenLayers.Util.getElement('edit_permalink').href, "Panning sets permalink with base"); 
    6161  } 
    …… 
    7676      map.addLayer(layer); 
    7777      if (!map.getCenter())  map.zoomToMaxExtent(); 
    7878      map.addControl(control); 
    79       map.pan(5, 0); 
     79      map.pan(5, 0, {immediate:true}); 
    8080      OpenLayers.Util.getElement('edit_permalink').href = './edit.html?foo=bar&zoom=2&lat=0&lon=1.75781&layers=B'; 
    8181      t.eq(OpenLayers.Util.getElement('permalink').href, OpenLayers.Util.getElement('edit_permalink').href, "Panning sets permalink with base and querystring"); 
    8282       
    8383      control = new OpenLayers.Control.Permalink('permalink', "./edit.html?foo=bar&" ); 
    8484      map.addControl(control); 
    85       map.pan(0, 0); 
     85      map.pan(0, 0, {immediate:true}); 
    8686      t.eq(OpenLayers.Util.getElement('permalink').href, OpenLayers.Util.getElement('edit_permalink').href, "Panning sets permalink with base and querystring ending with '&'"); 
    8787       
    8888      control = new OpenLayers.Control.Permalink('permalink', "./edit.html?" ); 
    8989      OpenLayers.Util.getElement('edit_permalink').href = './edit.html?zoom=2&lat=0&lon=1.75781&layers=B'; 
    9090      map.addControl(control); 
    91       map.pan(5, 0); 
    92       map.pan(-5, 0); 
     91      map.pan(5, 0, {immediate:true}); 
     92      map.pan(-5, 0, {immediate:true}); 
    9393      t.eq(OpenLayers.Util.getElement('permalink').href, OpenLayers.Util.getElement('edit_permalink').href, "Panning sets permalink with base and querystring ending with '?'"); 
    9494 
    9595  } 
    …… 
    104104        map.addLayer(layer); 
    105105        if (!map.getCenter())  map.zoomToMaxExtent(); 
    106106        map.addControl(control); 
    107         map.pan(5, 0); 
     107        map.pan(5, 0, {immediate:true}); 
    108108        OpenLayers.Util.getElement('edit_permalink').href = './edit.html?zoom=2&lat=0&lon=1.75781&layers=B'; 
    109109        t.eq(OpenLayers.Util.getElement('permalink').href, OpenLayers.Util.getElement('edit_permalink').href, "Panning sets permalink with existing zoom in base"); 
    110110  } 

  • tests/Control/test_PanZoom.html

    old new  
    6161                    wnd.mapper.events.register("dblclick", mapper, setFlag); 
    6262                     
    6363                    simulateClick(wnd, wnd.control.buttons[0]); 
    64                     t.ok( wnd.mapper.getCenter().lat > wnd.centerLL.lat, "Pan up works correctly" ); 
    65                     t.ok(!flag.mousedown, "mousedown does not get to the map"); 
    66                     t.ok(flag.mouseup, "mouseup does get to the map"); 
    67                     t.ok(!flag.click, "click does not get to the map"); 
    68                     t.ok(!flag.dblclick, "dblclick does not get to the map"); 
    69                     resetFlags(); 
     64                    t.delay_call(2, function() { 
     65                        t.ok( wnd.mapper.getCenter().lat > wnd.centerLL.lat, "Pan up works correctly" ); 
     66                        t.ok(!flag.mousedown, "mousedown does not get to the map"); 
     67                        t.ok(flag.mouseup, "mouseup does get to the map"); 
     68                        t.ok(!flag.click, "click does not get to the map"); 
     69                        t.ok(!flag.dblclick, "dblclick does not get to the map"); 
     70                        resetFlags(); 
    7071 
    71                     simulateClick(wnd, wnd.control.buttons[1]); 
     72                        simulateClick(wnd, wnd.control.buttons[1]); 
     73                    }, 2, function() {     
    7274                    t.ok( wnd.mapper.getCenter().lon < wnd.centerLL.lon, "Pan left works correctly" ); 
    7375                    t.ok(!flag.mousedown, "mousedown does not get to the map"); 
    7476                    t.ok(flag.mouseup, "mouseup does get to the map"); 
    …… 
    7779                    resetFlags(); 
    7880 
    7981                    simulateClick(wnd, wnd.control.buttons[2]); 
     82                    }, 2, function() { 
    8083                    t.ok( wnd.mapper.getCenter().lon == wnd.centerLL.lon, "Pan right works correctly" ); 
    8184                    t.ok(!flag.mousedown, "mousedown does not get to the map"); 
    8285                    t.ok(flag.mouseup, "mouseup does get to the map"); 
    …… 
    8588                    resetFlags(); 
    8689 
    8790                    simulateClick(wnd, wnd.control.buttons[3]); 
     91                    }, 2, function() { 
    8892                    t.ok( wnd.mapper.getCenter().lat == wnd.centerLL.lat, "Pan down works correctly" ); 
    8993                    t.ok(!flag.mousedown, "mousedown does not get to the map"); 
    9094                    t.ok(flag.mouseup, "mouseup does get to the map"); 
    …… 
    9397                    resetFlags(); 
    9498 
    9599                    simulateClick(wnd, wnd.control.buttons[4]); 
     100                    }, 2, function() { 
    96101                    t.eq( wnd.mapper.getZoom(), 6, "zoomin works correctly" ); 
    97102                    t.ok(!flag.mousedown, "mousedown does not get to the map"); 
    98103                    t.ok(flag.mouseup, "mouseup does get to the map"); 
    …… 
    101106                    resetFlags(); 
    102107 
    103108                    simulateClick(wnd, wnd.control.buttons[6]); 
     109                    }, 2, function() { 
    104110                    t.eq( wnd.mapper.getZoom(), 5, "zoomout works correctly" ); 
    105111                    t.ok(!flag.mousedown, "mousedown does not get to the map"); 
    106112                    t.ok(flag.mouseup, "mouseup does get to the map"); 
    …… 
    109115                    resetFlags(); 
    110116 
    111117                    simulateClick(wnd, wnd.control.buttons[5]); 
     118                    }, 2, function() { 
    112119                    t.eq( wnd.mapper.getZoom(), 2, "zoomworld works correctly" ); 
    113120                    t.ok(!flag.mousedown, "mousedown does not get to the map"); 
    114121                    t.ok(flag.mouseup, "mouseup does get to the map"); 
    115122                    t.ok(!flag.click, "click does not get to the map"); 
    116123                    t.ok(!flag.dblclick, "dblclick does not get to the map"); 
    117124                    resetFlags(); 
    118                      
     125                    }); 
    119126                }); 
    120127            }); 
    121128        } 
    …… 
    146153         
    147154     
    148155        var layer = new OpenLayers.Layer.WMS("Test Layer",  
    149             "http://octo.metacarta.com/cgi-bin/mapserv?", 
    150             {map: "/mapdata/vmap_wms.map", layers: "basic"}); 
     156            "http://labs.metacarta.com/wms-c/Basic.py?", 
     157            {layers: "basic"}); 
    151158        mapper.addLayer(layer); 
    152159     
    153160        centerLL = new OpenLayers.LonLat(0,0);  

  • tests/Control/test_OverviewMap.html

    old new  
    3838 
    3939        var centerLL = new OpenLayers.LonLat(-71,42);  
    4040        map.setCenter(centerLL, 11); 
    41  
     41        t.delay_call(1, function() { 
    4242        var overviewCenter = control.ovmap.getCenter(); 
    4343        var overviewZoom = control.ovmap.getZoom(); 
    4444        t.eq(overviewCenter.lon, -71, "Overviewmap center lon correct"); 
    …… 
    4646        t.eq(overviewZoom, 8, "Overviewmap zoomcorrect"); 
    4747         
    4848        control.mapDivClick({'xy':new OpenLayers.Pixel(5,5)}); 
    49          
     49        }, 2, function() { 
    5050        var cent = map.getCenter(); 
    5151        t.eq(cent.lon, -71.3515625, "Clicking on the Overview Map has the correct effect on map lon"); 
    5252        t.eq(cent.lat, 42.17578125, "Clicking on the Overview Map has the correct effect on map lat"); 
    …… 
    5757        }; 
    5858        control.rectDrag(new OpenLayers.Pixel(15, 15)); 
    5959        control.updateMapToRect(); 
    60          
     60        }, 2, function() { 
    6161        var cent = map.getCenter(); 
    6262        t.eq(cent.lon, -71.2734375, "Dragging on the Overview Map has the correct effect on map lon"); 
    6363        t.eq(cent.lat, 42.09765625, "Dragging on the Overview Map has the correct effect on map lat"); 
    …… 
    6868        t.eq(overviewCenter.lon, 0, "Overviewmap center lon correct -- second zoom"); 
    6969        t.eq(overviewCenter.lat, 0, "Overviewmap center lat correct -- second zoom"); 
    7070        t.eq(overviewZoom, 0, "Overviewmap zoomcorrect -- second zoom"); 
    71          
    7271        map.destroy(); 
    73  
     72        }); 
    7473    } 
    7574 
    7675  </script> 

  • tests/Layer/test_Grid.html

    old new  
    542542        map.zoomIn(); 
    543543        var bounds = layer.getTileBounds(new OpenLayers.Pixel(200,200)); 
    544544        t.eq(bounds.toBBOX(), "-180,-90,0,90", "get tile bounds returns correct bounds");  
    545         map.pan(200,0); 
     545        map.pan(200,0, {immediate:true}); 
    546546        var bounds = layer.getTileBounds(new OpenLayers.Pixel(200,200)); 
    547547        t.eq(bounds.toBBOX(), "0,-90,180,90", "get tile bounds returns correct bounds after pan");  
    548548    } 

  • tests/Layer/test_KaMap.html

    old new  
    245245        map.zoomIn(); 
    246246        var bounds = layer.getTileBounds(new OpenLayers.Pixel(200,200)); 
    247247        t.eq(bounds.toBBOX(), "-180,0,0,180", "get tile bounds returns correct bounds");  
    248         map.pan(200,0); 
     248        map.pan(200,0,{immediate:true}); 
    249249        var bounds = layer.getTileBounds(new OpenLayers.Pixel(200,200)); 
    250250        t.eq(bounds.toBBOX(), "0,0,180,180", "get tile bounds returns correct bounds after pan");  
    251251        map.destroy(); 

  • lib/OpenLayers/Map.js

    old new  
    12291229     * Parameters: 
    12301230     * dx - {Integer} 
    12311231     * dy - {Integer} 
     1232     * options - {Object} Only one at this time: "immediate", does not use 
     1233     *    panTo, but uses setCenter instead. 
    12321234     */ 
    1233     pan: function(dx, dy) { 
    1234  
     1235    pan: function(dx, dy, options) { 
     1236         
     1237        if (!options) { 
     1238            options = {} 
     1239        }     
    12351240        // getCenter 
    12361241        var centerPx = this.getViewPortPxFromLonLat(this.getCenter()); 
    12371242 
    …… 
    12411246        // only call setCenter if there has been a change 
    12421247        if (!newCenterPx.equals(centerPx)) { 
    12431248            var newCenterLonLat = this.getLonLatFromViewPortPx(newCenterPx); 
    1244             this.setCenter(newCenterLonLat); 
     1249            if (options.immediate) { 
     1250                this.setCenter(newCenterLonLat); 
     1251            } else { 
     1252                this.panTo(newCenterLonLat); 
     1253            }     
    12451254        } 
    12461255 
    12471256   }, 
     1257    
     1258   /**  
     1259     * APIMethod: panTo 
     1260     * Allows user to pan to a new lonlat 
     1261     * If the new lonlat is in the current extent the map will slide smoothly 
     1262     *  
     1263     * Parameters: 
     1264     * lonlat - {<OpenLayers.Lonlat>} 
     1265     */ 
     1266    panTo: function(lonlat) { 
     1267        if (this.getExtent().containsLonLat(lonlat)) { 
     1268            if (!this.panTween) { 
     1269                this.panTween = new OpenLayers.Tween(OpenLayers.Easing.Expo.easeOut); 
     1270            } 
     1271            var center = this.getCenter(); 
     1272            var from = { 
     1273                lon: center.lon, 
     1274                lat: center.lat 
     1275            }; 
     1276            var to = { 
     1277                lon: lonlat.lon, 
     1278                lat: lonlat.lat 
     1279            }; 
     1280            this.panTween.start(from, to, 50, { 
     1281                callbacks: { 
     1282                    start: OpenLayers.Function.bind(function(lonlat) { 
     1283                        this.events.triggerEvent("movestart"); 
     1284                    }, this), 
     1285                    eachStep: OpenLayers.Function.bind(function(lonlat) { 
     1286                        var lonlat = new OpenLayers.LonLat(lonlat.lon, lonlat.lat); 
     1287                        this.moveTo(lonlat, this.zoom, true); 
     1288                    }, this), 
     1289                    done: OpenLayers.Function.bind(function(lonlat) { 
     1290                        this.events.triggerEvent("moveend"); 
     1291                    }, this) 
     1292                } 
     1293            }); 
     1294        } else { 
     1295            this.setCenter(lonlat); 
     1296        } 
     1297    }, 
    12481298 
    12491299    /** 
    12501300     * APIMethod: setCenter 
    …… 
    12851335        var forceZoomChange = options.forceZoomChange; 
    12861336        // noEvent is false by default 
    12871337        var noEvent = options.noEvent; 
     1338 
     1339        if (this.panTween && options.caller == "setCenter") { 
     1340            this.panTween.stop(); 
     1341        }     
    12881342              
    12891343        if (!this.center && !this.isValidLonLat(lonlat)) { 
    12901344            lonlat = this.maxExtent.getCenterLonLat(); 

  • lib/OpenLayers/Control/OverviewMap.js

    old new  
    511511     */ 
    512512    updateMapToRect: function() { 
    513513        var lonLatBounds = this.getMapBoundsFromRectBounds(this.rectPxBounds); 
    514         this.map.setCenter(lonLatBounds.getCenterLonLat(), this.map.zoom); 
     514        this.map.panTo(lonLatBounds.getCenterLonLat()); 
    515515    }, 
    516516 
    517517    /** 

  • examples/animated_panning.html

    old new  
     1<html xmlns="http://www.w3.org/1999/xhtml"> 
     2  <head> 
     3    <title>Animated Panning of the Map via map.panTo</title> 
     4    <style type="text/css"> 
     5        #map { 
     6            width: 512px; 
     7            height: 256px; 
     8            border: 1px solid black; 
     9        } 
     10    </style> 
     11    <script src="../lib/OpenLayers.js"></script> 
     12    <script type="text/javascript"> 
     13        var map, layer, running = false; 
     14 
     15        OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                 
     16            defaultHandlerOptions: { 
     17                'single': true, 
     18                'delay': 200 
     19            }, 
     20 
     21            initialize: function(options) { 
     22                this.handlerOptions = OpenLayers.Util.extend( 
     23                    {}, this.defaultHandlerOptions 
     24                ); 
     25                OpenLayers.Control.prototype.initialize.apply( 
     26                    this, arguments 
     27                );  
     28                this.handler = new OpenLayers.Handler.Click( 
     29                    this, { 
     30                        'click': this.onClick  
     31                    }, this.handlerOptions 
     32                ); 
     33            },  
     34 
     35            onClick: function(evt) {   
     36                map.panTo(map.getLonLatFromPixel(evt.xy)); 
     37            }    
     38 
     39        }); 
     40 
     41        function init(){ 
     42            map = new OpenLayers.Map('map'); 
     43            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",  
     44                "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); 
     45                 
     46            map.addLayer(layer); 
     47            map.zoomToMaxExtent(); 
     48            var click = new OpenLayers.Control.Click(); 
     49            map.addControl(click); 
     50            click.activate(); 
     51            map.addControl(new OpenLayers.Control.OverviewMap()); 
     52        } 
     53 
     54        function setCenterInterval() { 
     55            if (!running) { 
     56                setCenter(); 
     57                running = setInterval('setCenter()', 500); 
     58            } else { 
     59                clearInterval(running); 
     60                running = false; 
     61            }     
     62        } 
     63         
     64        function setCenter() { 
     65            var lon = Math.random() * 360 - 180; 
     66            var lat = Math.random() * 180 - 90; 
     67            var lonlat = new OpenLayers.LonLat(lon, lat); 
     68            map.panTo(lonlat); 
     69        } 
     70    </script> 
     71  </head> 
     72  <body onload="init()"> 
     73    <h1 id="title">map.panTo Example</h1> 
     74    <div id="tags">map.panTo</div> 
     75    <div id="shortdesc">Show animated panning effects in the map</div> 
     76    <div id="map"></div> 
     77    <div id="docs"> 
     78        This is an example of transition effects. If the new random center is in the current extent, the map will pan smoothly. <br /> 
     79        The random selection will continue until you press it again. Additionally, you can single click in the map to pan smoothly 
     80        to that area, or use the pan control to pan smoothly. 
     81 
     82    </div> 
     83    <button onclick="setCenterInterval()">Start/stop random recenter</button> 
     84  </body> 
     85</html>