OpenLayers OpenLayers

Ticket #816: dragGMaps.patch

File dragGMaps.patch, 4.4 kB (added by euzuro, 1 year ago)

smooth dragging in gmaps! hoorah cr5!

  • lib/OpenLayers/Layer/Google.js

    old new  
    119119            termsOfUse.style.right = ""; 
    120120            termsOfUse.style.bottom = ""; 
    121121 
     122            //can we do smooth panning? (some versions don't) 
     123            if ( !this.mapObject.G || !this.mapObject.G.qb || 
     124                 (typeof this.mapObject.G.qb != "function") ) { 
     125 
     126                this.dragPanMapObject = null; 
     127            } 
     128 
    122129        } catch (e) { 
    123130            // do not crash 
    124131        } 
    …… 
    335342    }, 
    336343    
    337344    /** 
     345     * APIMethod: dragPanMapObject 
     346     *  
     347     * Parameters: 
     348     * dX - {Integer} 
     349     * dY - {Integer} 
     350     */ 
     351    dragPanMapObject: function(dX, dY) { 
     352        var newX = this.mapObject.G.left - dX; 
     353        var newY = this.mapObject.G.top + dY; 
     354        this.mapObject.G.qb(newX, newY); 
     355    }, 
     356    
     357    /** 
    338358     * APIMethod: getMapObjectCenter 
    339359     *  
    340360     * Returns:  

  • lib/OpenLayers/Layer/EventPane.js

    old new  
    225225                     !(newZoom == oldZoom) ) { 
    226226 
    227227                    var center = this.getMapObjectLonLatFromOLLonLat(newCenter); 
    228                     var zoom = this.getMapObjectZoomFromOLZoom(newZoom); 
    229                     this.setMapObjectCenter(center, zoom); 
     228 
     229                    if (dragging && this.dragPanMapObject) { 
     230                        var res = this.map.resolution; //readability 
     231                        var dX = (newCenter.lon - oldCenter.lon) / res; 
     232                        var dY = (newCenter.lat - oldCenter.lat) / res; 
     233                        this.dragPanMapObject(dX, dY); 
     234                    } else { 
     235                        var zoom = this.getMapObjectZoomFromOLZoom(newZoom); 
     236                        this.setMapObjectCenter(center, zoom, dragging); 
     237                    } 
    230238                } 
    231239            } 
    232240        } 

  • examples/draggingGoogle.html

    old new  
     1<html xmlns="http://www.w3.org/1999/xhtml"> 
     2  <head> 
     3    <style type="text/css"> 
     4        #map { 
     5            width: 100%; 
     6            height: 512px; 
     7            border: 1px solid gray; 
     8        } 
     9    </style> 
     10 
     11    <script src='http://maps.google.com/maps?file=api&amp;v=2.82&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhQtCjFYhdtNUZyqZQW2mFbq_dOIHBSGvjZ-C7_tXAXYdB-ehlOacmC_xA'></script> 
     12 
     13    <script src="../lib/OpenLayers.js"></script> 
     14    <script type="text/javascript"> 
     15  
     16        // make map available for easy debugging 
     17        var map; 
     18 
     19        // avoid pink tiles 
     20        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3; 
     21        OpenLayers.Util.onImageLoadErrorColor = "transparent"; 
     22 
     23        function init(){ 
     24            var options = { 
     25                projection: "EPSG:900913", 
     26                units: "m", 
     27                maxResolution: 156543.0339, 
     28                maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 
     29                                                 20037508, 20037508.34) 
     30            }; 
     31            map = new OpenLayers.Map('map', options); 
     32 
     33            // create Google Mercator layers 
     34            var gmap = new OpenLayers.Layer.Google( 
     35                "Google Streets", 
     36                {'sphericalMercator': true} 
     37            ); 
     38 
     39            // create WMS layer 
     40            var wms = new OpenLayers.Layer.WMS( 
     41                "World Map", 
     42                "http://world.freemap.in/tiles/", 
     43                {'layers': 'factbook-overlay', 'format':'png'}, 
     44                { 
     45                    'opacity': 0.4, 
     46                    'isBaseLayer': false,'wrapDateLine': true 
     47                } 
     48            ); 
     49 
     50            map.addLayers([gmap, wms]); 
     51            map.addControl(new OpenLayers.Control.LayerSwitcher()); 
     52            map.zoomToMaxExtent() 
     53        } 
     54 
     55    </script> 
     56  </head> 
     57  <body onload="init()"> 
     58    <h2>OpenLayers With Responsive Google Dragging</h3> 
     59    <h3>Uses Google Maps v2.82</h2> 
     60    <div id="map"></div> 
     61  </body> 
     62</html>