OpenLayers OpenLayers

Ticket #104: overviewmap.2.patch

File overviewmap.2.patch, 28.9 kB (added by crschmidt, 2 years ago)

no conflicts against r1702

  • build/docs.sh

    old new  
    11#!/bin/sh 
    22 
    33rm ../doc/reference.html 
    4 CLASSES="Map Layer Layer.HTTPRequest Layer.Grid Layer.WMS Layer.KaMap Layer.EventPane Layer.Google Layer.VirtualEarth Layer.Markers Layer.Text Layer.GeoRSS Layer.Boxes Icon Marker Marker.Box Tile Tile.Image Tile.WFS Control Control.LayerSwitcher Control.MouseDefaults Control.MousePosition Control.MouseToolbar Control.OverviewMap Control.PanZoom Control.PanZoomBar Control.Permalink Control.Scale LonLat Size Pixel Bounds Util Ajax" 
     4CLASSES="Map Layer Layer.HTTPRequest Layer.Grid Layer.WMS Layer.KaMap Layer.EventPane Layer.Google Layer.VirtualEarth Layer.Markers Layer.Text Layer.GeoRSS Layer.Boxes Icon Marker Marker.Box Tile Tile.Image Tile.WFS Control Control.LayerSwitcher Control.MouseDefaults Control.MousePosition Control.MouseToolbar Control.PanZoom Control.PanZoomBar Control.Permalink Control.Scale LonLat Size Pixel Bounds Util Ajax" 
    55echo "<html> 
    66  <head> 
    77    <title>OpenLayers Class Reference Documentation</title> 

  • tests/list-tests.html

    old new  
    2424    <li>test_Tile.html</li> 
    2525    <li>test_Tile_Image.html</li> 
    2626    <li>test_Control.html</li> 
    27     <li>test_Control_OverviewMap.html</li> 
    2827    <li>test_Control_MouseToolbar.html</li> 
    2928    <li>test_Control_LayerSwitcher.html</li> 
    3029    <li>test_Control_PanZoom.html</li> 

  • tests/test_Control_OverviewMap.html

    old new  
    1 <html> 
    2 <head> 
    3   <script src="../lib/OpenLayers.js"></script> 
    4   <script type="text/javascript"><!-- 
    5     var map;  
    6     function test_01_Control_PanZoom_constructor (t) { 
    7         t.plan( 1 ); 
    8      
    9         control = new OpenLayers.Control.OverviewMap(); 
    10         t.ok( control instanceof OpenLayers.Control.OverviewMap, "new OpenLayers.Control.OverviewMap returns object" ); 
    11     } 
    12     function test_02_Control_PanZoom_addControl (t) { 
    13         t.plan( 6 ); 
    14         map = new OpenLayers.Map('map'); 
    15         control = new OpenLayers.Control.OverviewMap(); 
    16         t.ok( control instanceof OpenLayers.Control.OverviewMap, "new OpenLayers.Control.OverviewMap returns object" ); 
    17         t.ok( map instanceof OpenLayers.Map, "new OpenLayers.Map creates map" ); 
    18         map.addControl(control); 
    19         t.ok( control.map === map, "Control.map is set to the map object" ); 
    20         t.ok( map.controls[3] === control, "map.controls contains control" ); 
    21         t.eq( parseInt(control.div.style.zIndex), map.Z_INDEX_BASE['Control'] + 4, "Control div zIndexed properly" ); 
    22         t.eq( parseInt(map.viewPortDiv.lastChild.style.zIndex), map.Z_INDEX_BASE['Control'] + 4, "Viewport div contains control div" ); 
    23  
    24     } 
    25     function test_03_Control_PanZoom_control_events (t) { 
    26         t.plan( 10 ); 
    27         var evt = {which: 1}; // control expects left-click 
    28         map = new OpenLayers.Map('map'); 
    29         var layer = new OpenLayers.Layer.WMS("Test Layer",  
    30             "http://octo.metacarta.com/cgi-bin/mapserv?", 
    31             {map: "/mapdata/vmap_wms.map", layers: "basic"}); 
    32         map.addLayer(layer); 
    33  
    34         control = new OpenLayers.Control.OverviewMap(); 
    35         map.addControl(control, new OpenLayers.Pixel(20,20)); 
    36  
    37         var centerLL = new OpenLayers.LonLat(-71,42);  
    38         map.setCenter(centerLL, 11); 
    39  
    40         var overviewCenter = control.ovmap.getCenter(); 
    41         var overviewZoom = control.ovmap.getZoom(); 
    42         t.eq(overviewCenter.lon, -71, "Overviewmap center lon correct"); 
    43         t.eq(overviewCenter.lat, 42, "Overviewmap center lat correct"); 
    44         t.eq(overviewZoom, 8, "Overviewmap zoomcorrect"); 
    45          
    46         control.mapDivClick({'xy':new OpenLayers.Pixel(5,5)}); 
    47          
    48         var cent = map.getCenter(); 
    49         t.eq(cent.lon, -71.3515625, "Clicking on the Overview Map has the correct effect on map lon"); 
    50         t.eq(cent.lat, 42.17578125, "Clicking on the Overview Map has the correct effect on map lat"); 
    51  
    52         control.rectMouseDown({'xy':new OpenLayers.Pixel(5,5), 'which':1}); 
    53         control.rectMouseMove({'xy':new OpenLayers.Pixel(15,15), 'which':1}); 
    54         control.rectMouseUp({'xy':new OpenLayers.Pixel(15,15), 'which':1}); 
    55          
    56         var cent = map.getCenter(); 
    57         t.eq(cent.lon, -71.2734375, "Dragging on the Overview Map has the correct effect on map lon"); 
    58         t.eq(cent.lat, 42.09765625, "Dragging on the Overview Map has the correct effect on map lat"); 
    59          
    60         map.setCenter(new OpenLayers.LonLat(0,0), 0); 
    61         var overviewCenter = control.ovmap.getCenter(); 
    62         var overviewZoom = control.ovmap.getZoom(); 
    63         t.eq(overviewCenter.lon, 0, "Overviewmap center lon correct -- second zoom"); 
    64         t.eq(overviewCenter.lat, 0, "Overviewmap center lat correct -- second zoom"); 
    65         t.eq(overviewZoom, 0, "Overviewmap zoomcorrect -- second zoom"); 
    66          
    67  
    68     } 
    69   // --> 
    70   </script> 
    71 </head> 
    72 <body> 
    73     <div id="map" style="width: 1024px; height: 512px;"/> 
    74 </body> 
    75 </html> 

  • theme/default/style.css

    old new  
    2626    font-family: Arial; 
    2727    font-size: smaller; 
    2828} 
    29 .olControlOverviewMapContainer { 
    30     position: absolute; 
    31     bottom: 0px; 
    32     right: 0px; 
    33 } 
    34  
    35 .olControlOverviewMapElement { 
    36     padding: 10px 18px 10px 10px; 
    37     background-color: #00008B; 
    38     -moz-border-radius: 1em 0 0 0; 
    39 } 
    40  
    41 .olControlOverviewMapMinimizeButton { 
    42     right: 0px; 
    43     bottom: 80px; 
    44 }     
    45  
    46 .olControlOverviewMapMaximizeButton { 
    47     right: 0px; 
    48     bottom: 80px; 
    49 } 
    50  
    51 .olControlOverviewMapExtentRectangle { 
    52     border: 2px dotted red; 
    53 } 

  • doc/Control.OverviewMap.txt

    old new  
    1 OpenLayers.Control.OverviewMap 
    2  
    3 This control adds a small icon to the layer. When expanded, a 160x80 pixel map object, zoomed out from the main map, is made visible in the lower right hand corner of the viewport. <b>This control does not currently work in Safari.</b>  
    4  
    5 * Constructor 
    6   OpenLayers.Control.OverviewMap({Object|options}) -- Creates a new Overview Map control. 
    7  
    8 * Options 
    9   layers -- An array of layers to use. If there are no layers passed in the options, then the base layer of the map at the time the control is added is used. If no base layer is set on the map at the time the control is added, the first base layer to be added to the map is used.  
    10   minRatio -- The ratio of the overview map resolution to the main map resolution at which to zoom farther out on the overview map.    
    11   maxRatio -- The ratio of the overview map resolution to the main map resolution at which to zoom farther in on the overview map. 

  • lib/OpenLayers/Control/OverviewMap.js

    old new  
    1 /** 
    2  * @fileoverview Locator Map Control 
    3  * @author Tim Schaub 
    4  */ 
    5  
    6 // @require: OpenLayers/Control.js 
    7  
    8 /**  
    9 * @class 
    10 */ 
    11 OpenLayers.Control.OverviewMap = OpenLayers.Class.create(); 
    12  
    13 OpenLayers.Control.OverviewMap.prototype =  
    14   OpenLayers.Util.extend( new OpenLayers.Control(), { 
    15  
    16     /** For div.id 
    17      * @type String */ 
    18     id:  "OverviewMap", 
    19  
    20     /** @type DOMElement */ 
    21     element: null, 
    22      
    23     /** 
    24      * The overvew map itself. 
    25      * @type OpenLayers.Map 
    26      */ 
    27     ovmap: null, 
    28          
    29     /** 
    30      * Ordered list of layers in the overview map.  If none are sent at 
    31      * construction, then the default below is used. 
    32      *  
    33      * @type Array(OpenLayers.Layer) 
    34      */ 
    35     layers: [], 
    36  
    37     /** 
    38      * The ratio of the overview map resolution to the main map resolution 
    39      * at which to zoom farther out on the overview map. 
    40      * @type Float 
    41      */ 
    42     minRatio: 8, 
    43  
    44     /** 
    45      * The ratio of the overview map resolution to the main map resolution 
    46      * at which to zoom farther in on the overview map. 
    47      * @type Float 
    48      */ 
    49     maxRatio: 32, 
    50  
    51     /** 
    52      * @constructor 
    53      * @param {Object} options Hashtable of options to set on the overview map 
    54      */ 
    55     initialize: function(options) { 
    56         OpenLayers.Control.prototype.initialize.apply(this, [options]); 
    57     }, 
    58  
    59     /** 
    60      * @type DOMElement 
    61      */     
    62     draw: function() { 
    63         OpenLayers.Control.prototype.draw.apply(this, arguments); 
    64  
    65         if(!(this.layers.length > 0)) { 
    66             if (this.map.baseLayer) { 
    67                 var layer = this.map.baseLayer.clone(); 
    68                 this.layers = [layer]; 
    69             } else { 
    70                 this.map.events.register("changebaselayer", this, this.baseLayerDraw); 
    71                 return this.div; 
    72             } 
    73         } 
    74  
    75         // create overview map DOM elements 
    76         this.element = document.createElement('div'); 
    77         this.element.className = 'olControlOverviewMapElement'; 
    78         this.element.style.display = 'none'; 
    79  
    80         this.mapDiv = document.createElement('div'); 
    81         this.mapDiv.style.width = '180px'; 
    82         this.mapDiv.style.height = '90px'; 
    83         this.mapDiv.style.position = 'relative'; 
    84         this.mapDiv.style.overflow = 'hidden'; 
    85         this.mapDiv.id = OpenLayers.Util.createUniqueID('overviewMap'); 
    86          
    87         this.extentRectangle = document.createElement('div'); 
    88         this.extentRectangle.style.position = 'absolute'; 
    89         this.extentRectangle.style.zIndex = 1000;  //HACK 
    90         this.extentRectangle.style.backgroundImage = 'url(' + 
    91                                         OpenLayers.Util.getImagesLocation() + 
    92                                         '/blank.png)'; 
    93         this.extentRectangle.className = 'olControlOverviewMapExtentRectangle'; 
    94         this.mapDiv.appendChild(this.extentRectangle); 
    95                  
    96         this.element.appendChild(this.mapDiv);   
    97  
    98         this.div.appendChild(this.element); 
    99         this.div.className = 'olControlOverviewMapContainer'; 
    100  
    101         this.map.events.register('moveend', this, this.update); 
    102          
    103         // Set up events.  The image div recenters the map on click. 
    104         // The extent rectangle can be dragged to recenter the map. 
    105         // If the mousedown happened elsewhere, then mousemove and mouseup 
    106         // should slip through. 
    107         this.elementEvents = new OpenLayers.Events(this, this.element); 
    108         this.elementEvents.register('mousedown', this, function(e) { 
    109             OpenLayers.Event.stop(e); 
    110         }); 
    111         this.elementEvents.register('click', this, function(e) { 
    112             OpenLayers.Event.stop(e); 
    113         }); 
    114         this.elementEvents.register('dblclick', this, function(e) { 
    115             OpenLayers.Event.stop(e); 
    116         }); 
    117         this.rectEvents = new OpenLayers.Events(this, this.extentRectangle); 
    118         this.rectEvents.register('mouseover', this, this.rectMouseOver); 
    119         this.rectEvents.register('mouseout', this, this.rectMouseOut); 
    120         this.rectEvents.register('mousedown', this, this.rectMouseDown); 
    121         this.rectEvents.register('mousemove', this, this.rectMouseMove); 
    122         this.rectEvents.register('mouseup', this, this.rectMouseUp); 
    123         this.rectEvents.register('click', this, function(e) { 
    124             OpenLayers.Event.stop(e); 
    125         }); 
    126         this.rectEvents.register('dblclick', this, this.rectDblClick ); 
    127         this.mapDivEvents = new OpenLayers.Events(this, this.mapDiv); 
    128         this.mapDivEvents.register('click', this, this.mapDivClick); 
    129  
    130         // There should be an option to place the control outside of the 
    131         // map viewport.  This would make these buttons optional. 
    132         var imgLocation = OpenLayers.Util.getImagesLocation(); 
    133         // maximize button div 
    134         var img = imgLocation + 'layer-switcher-maximize.png'; 
    135         this.maximizeDiv = OpenLayers.Util.createAlphaImageDiv( 
    136                                     'olControlOverviewMapMaximizeButton',  
    137                                     null,  
    138                                     new OpenLayers.Size(18,18),  
    139                                     img,  
    140                                     'absolute'); 
    141         this.maximizeDiv.style.display = 'none'; 
    142         this.maximizeDiv.className = 'olControlOverviewMapMaximizeButton'; 
    143         OpenLayers.Event.observe(this.maximizeDiv,  
    144                       'click',  
    145                       this.maximizeControl.bindAsEventListener(this)); 
    146         this.div.appendChild(this.maximizeDiv); 
    147  
    148         // minimize button div 
    149         var img = imgLocation + 'layer-switcher-minimize.png'; 
    150         this.minimizeDiv = OpenLayers.Util.createAlphaImageDiv( 
    151                                     'OpenLayers_Control_minimizeDiv',  
    152                                     null,  
    153                                     new OpenLayers.Size(18,18),  
    154                                     img,  
    155                                     'absolute'); 
    156         this.minimizeDiv.style.display = 'none'; 
    157         this.minimizeDiv.className = 'olControlOverviewMapMinimizeButton'; 
    158         OpenLayers.Event.observe(this.minimizeDiv,  
    159                       'click',  
    160                       this.minimizeControl.bindAsEventListener(this)); 
    161  
    162         this.div.appendChild(this.minimizeDiv); 
    163          
    164         this.minimizeControl(); 
    165  
    166         return this.div; 
    167     }, 
    168      
    169     baseLayerDraw: function() { 
    170         this.draw(); 
    171         this.map.events.unregister("changebaselayer", this, this.baseLayerDraw); 
    172     }, 
    173  
    174     /** 
    175     * @param {OpenLayers.Event} evt 
    176     */ 
    177     rectMouseOver: function (evt) { 
    178         this.extentRectangle.style.cursor = 'move'; 
    179     }, 
    180  
    181     /** 
    182     * @param {OpenLayers.Event} evt 
    183     */ 
    184     rectMouseOut: function (evt) { 
    185         this.extentRectangle.style.cursor = 'default'; 
    186         if(this.rectDragStart != null) { 
    187             if(this.performedRectDrag) { 
    188                 this.updateMapToRect(); 
    189             }         
    190             document.onselectstart = null; 
    191             this.rectDragStart = null; 
    192         } 
    193     }, 
    194  
    195     /** 
    196     * @param {OpenLayers.Event} evt 
    197     */ 
    198     rectMouseDown: function (evt) { 
    199         if(!OpenLayers.Event.isLeftClick(evt)) return; 
    200         this.rectDragStart = evt.xy.clone(); 
    201         this.performedRectDrag = false; 
    202         OpenLayers.Event.stop(evt); 
    203     }, 
    204  
    205     /** 
    206     * @param {OpenLayers.Event} evt 
    207     */ 
    208     rectMouseMove: function(evt) { 
    209         if(this.rectDragStart != null) { 
    210             var deltaX = this.rectDragStart.x - evt.xy.x; 
    211             var deltaY = this.rectDragStart.y - evt.xy.y; 
    212             var rectPxBounds = this.getRectPxBounds(); 
    213             var rectTop = rectPxBounds.top; 
    214             var rectLeft = rectPxBounds.left; 
    215             var rectHeight = Math.abs(rectPxBounds.getHeight()); 
    216             var rectWidth = rectPxBounds.getWidth(); 
    217             // don't allow dragging off of parent element 
    218             var newTop = Math.max(0, (rectTop - deltaY)); 
    219             newTop = Math.min(newTop, 
    220                               this.ovmap.size.h - this.hComp - rectHeight); 
    221             var newLeft = Math.max(0, (rectLeft - deltaX)); 
    222             newLeft = Math.min(newLeft, 
    223                                this.ovmap.size.w - this.wComp - rectWidth); 
    224             this.setRectPxBounds(new OpenLayers.Bounds(newLeft, 
    225                                                        newTop + rectHeight, 
    226                                                        newLeft + rectWidth, 
    227                                                        newTop)); 
    228             this.rectDragStart = evt.xy.clone(); 
    229             this.performedRectDrag = true; 
    230             OpenLayers.Event.stop(evt); 
    231         } 
    232     }, 
    233  
    234     /** 
    235     * @param {OpenLayers.Event} evt 
    236     */ 
    237     rectMouseUp: function(evt) { 
    238         if(!OpenLayers.Event.isLeftClick(evt)) return; 
    239         if(this.performedRectDrag) { 
    240             this.updateMapToRect(); 
    241             OpenLayers.Event.stop(evt); 
    242         }         
    243         document.onselectstart = null; 
    244         this.rectDragStart = null; 
    245     }, 
    246      
    247     /** 
    248     * @param {OpenLayers.Event} evt 
    249     */ 
    250     rectDblClick: function(evt) { 
    251         this.performedRectDrag = false; 
    252         OpenLayers.Event.stop(evt); 
    253         this.updateOverview(); 
    254     }, 
    255  
    256     /** 
    257     * @param {OpenLayers.Event} evt 
    258     */ 
    259     mapDivClick: function(evt) { 
    260         var pxBounds = this.getRectPxBounds(); 
    261         var pxCenter = pxBounds.getCenterPixel(); 
    262         var deltaX = evt.xy.x - pxCenter.x; 
    263         var deltaY = evt.xy.y - pxCenter.y; 
    264         var top = pxBounds.top; 
    265         var left = pxBounds.left; 
    266         var height = Math.abs(pxBounds.getHeight()); 
    267         var width = pxBounds.getWidth(); 
    268         var newTop = Math.max(0, (top + deltaY)); 
    269         newTop = Math.min(newTop, this.ovmap.size.h - height); 
    270         var newLeft = Math.max(0, (left + deltaX)); 
    271         newLeft = Math.min(newLeft, this.ovmap.size.w - width); 
    272         this.setRectPxBounds(new OpenLayers.Bounds(newLeft, 
    273                                                    newTop + height, 
    274                                                    newLeft + width, 
    275                                                    newTop)); 
    276         this.updateMapToRect(); 
    277         OpenLayers.Event.stop(evt); 
    278     }, 
    279  
    280     /** Set up the labels and divs for the control 
    281      *  
    282      * @param {OpenLayers.Event} e 
    283      */ 
    284     maximizeControl: function(e) { 
    285         this.element.style.display = ''; 
    286         this.showToggle(false); 
    287         if (e != null) { 
    288             OpenLayers.Event.stop(e);                                             
    289         } 
    290     }, 
    291  
    292     /** Hide all the contents of the control, shrink the size,  
    293      *   add the maximize icon 
    294      *  
    295      * @param {OpenLayers.Event} e 
    296      */ 
    297     minimizeControl: function(e) { 
    298         this.element.style.display = 'none'; 
    299         this.showToggle(true); 
    300         if (e != null) { 
    301             OpenLayers.Event.stop(e);                                             
    302         } 
    303     }, 
    304  
    305     /** Hide/Show all LayerSwitcher controls depending on whether we are 
    306      *   minimized or not 
    307      *  
    308      * @private 
    309      *  
    310      * @param {Boolean} minimize 
    311      */ 
    312     showToggle: function(minimize) { 
    313         this.maximizeDiv.style.display = minimize ? '' : 'none'; 
    314         this.minimizeDiv.style.display = minimize ? 'none' : ''; 
    315     }, 
    316  
    317     /** 
    318      * Update the overview map after layers move. 
    319      */ 
    320     update: function() { 
    321         if(this.ovmap == null) { 
    322             this.createMap(); 
    323         } 
    324          
    325         if(!this.isSuitableOverview()) { 
    326             this.updateOverview(); 
    327         } 
    328          
    329         // update extent rectangle 
    330         this.updateRectToMap(); 
    331     }, 
    332      
    333     /** 
    334      * Determines if the overview map is suitable given the extent and 
    335      * resolution of the main map. 
    336      */ 
    337     isSuitableOverview: function() { 
    338         var mapExtent = this.map.getExtent(); 
    339         var maxExtent = this.map.maxExtent; 
    340         var testExtent = new OpenLayers.Bounds( 
    341                                 Math.max(mapExtent.left, maxExtent.left), 
    342                                 Math.max(mapExtent.bottom, maxExtent.bottom), 
    343                                 Math.min(mapExtent.right, maxExtent.right), 
    344                                 Math.min(mapExtent.top, maxExtent.top));         
    345         var resRatio = this.ovmap.getResolution() / this.map.getResolution(); 
    346         return ((resRatio > this.minRatio) && 
    347                 (resRatio <= this.maxRatio) && 
    348                 (this.ovmap.getExtent().containsBounds(testExtent))); 
    349     }, 
    350      
    351     updateOverview: function() { 
    352         var mapRes = this.map.getResolution(); 
    353         var targetRes = this.ovmap.getResolution(); 
    354         var resRatio = targetRes / mapRes; 
    355         if(resRatio > this.maxRatio) { 
    356             // zoom in overview map 
    357             targetRes = this.minRatio * mapRes;             
    358         } else if(resRatio <= this.minRatio) { 
    359             // zoom out overview map 
    360             targetRes = this.maxRatio * mapRes; 
    361         } 
    362         this.ovmap.setCenter(this.map.center, 
    363                             this.ovmap.getZoomForResolution(targetRes)); 
    364         this.updateRectToMap(); 
    365     }, 
    366      
    367     createMap: function() { 
    368         // create the overview map 
    369         this.ovmap = new OpenLayers.Map(this.mapDiv.id, {controls: [], maxResolution: 'auto'}); 
    370         this.ovmap.addLayers(this.layers); 
    371         this.ovmap.zoomToMaxExtent(); 
    372         // check extent rectangle border width 
    373         this.wComp = parseInt(OpenLayers.Element.getStyle(this.extentRectangle, 
    374                                                'border-left-width')) + 
    375                      parseInt(OpenLayers.Element.getStyle(this.extentRectangle, 
    376                                                'border-right-width')); 
    377         this.wComp = (this.wComp) ? this.wComp : 2; 
    378         this.hComp = parseInt(OpenLayers.Element.getStyle(this.extentRectangle, 
    379                                                'border-top-width')) + 
    380                      parseInt(OpenLayers.Element.getStyle(this.extentRectangle, 
    381                                                'border-bottom-width')); 
    382         this.hComp = (this.hComp) ? this.hComp : 2; 
    383     }, 
    384          
    385     /** 
    386      * Updates the extent rectangle position and size to match the map extent 
    387      */ 
    388     updateRectToMap: function() { 
    389         if(this.map.units != 'degrees') { 
    390             if(this.map.projection != this.ovmap.map.projection) { 
    391                 alert('The overview map only works when it is in the same projection as the main map'); 
    392             } 
    393         } 
    394         var pxBounds = this.getRectBoundsFromMapBounds(this.map.getExtent()); 
    395         this.setRectPxBounds(pxBounds); 
    396     }, 
    397      
    398     /** 
    399      * Updates the map extent to match the extent rectangle position and size 
    400      */ 
    401     updateMapToRect: function() { 
    402         var pxBounds = this.getRectPxBounds(); 
    403         var lonLatBounds = this.getMapBoundsFromRectBounds(pxBounds); 
    404         this.map.setCenter(lonLatBounds.getCenterLonLat(), this.map.zoom); 
    405     }, 
    406      
    407     /** 
    408      * Get extent rectangle pixel bounds 
    409      * @returns An OpenLayers.Bounds wich is the extent rectangle's pixel 
    410      *          bounds (relative to the parent element) 
    411      */ 
    412     getRectPxBounds: function() { 
    413         var top = parseInt(this.extentRectangle.style.top); 
    414         var left = parseInt(this.extentRectangle.style.left); 
    415         var height = parseInt(this.extentRectangle.style.height); 
    416         var width = parseInt(this.extentRectangle.style.width); 
    417         return new OpenLayers.Bounds(left, top + height, left + width, top); 
    418     }, 
    419  
    420     /** 
    421      * Set extent rectangle pixel bounds.   
    422      * @param {OpenLayers.Bounds} pxBounds 
    423      */ 
    424     setRectPxBounds: function(pxBounds) { 
    425         var top = Math.max(pxBounds.top, 0); 
    426         var left = Math.max(pxBounds.left, 0); 
    427         var bottom = Math.min(pxBounds.top + Math.abs(pxBounds.getHeight()), 
    428                               this.ovmap.size.h - this.hComp); 
    429         var right = Math.min(pxBounds.left + pxBounds.getWidth(), 
    430                              this.ovmap.size.w - this.wComp); 
    431         this.extentRectangle.style.top = parseInt(top) + 'px'; 
    432         this.extentRectangle.style.left = parseInt(left) + 'px'; 
    433         this.extentRectangle.style.height = parseInt(bottom - top)+ 'px'; 
    434         this.extentRectangle.style.width = parseInt(right - left) + 'px'; 
    435     }, 
    436  
    437     /** 
    438     * @param {OpenLayers.Bounds} lonLatBounds 
    439     * 
    440     * @returns An OpenLayers.Bounds which is the passed-in map lon/lat extent 
    441     *          translated into pixel bounds for the overview map 
    442     * @type OpenLayers.Bounds 
    443     */ 
    444     getRectBoundsFromMapBounds: function(lonLatBounds) { 
    445         var leftBottomLonLat = new OpenLayers.LonLat(lonLatBounds.left, 
    446                                                      lonLatBounds.bottom); 
    447         var rightTopLonLat = new OpenLayers.LonLat(lonLatBounds.right, 
    448                                                    lonLatBounds.top); 
    449         var leftBottomPx = this.getOverviewPxFromLonLat(leftBottomLonLat); 
    450         var rightTopPx = this.getOverviewPxFromLonLat(rightTopLonLat); 
    451         return new OpenLayers.Bounds(leftBottomPx.x, leftBottomPx.y, 
    452                                      rightTopPx.x, rightTopPx.y); 
    453     }, 
    454  
    455     /** 
    456     * @param {OpenLayers.Bounds} pxBounds 
    457     * 
    458     * @returns An OpenLayers.Bounds which is the passed-in overview rect bounds 
    459     *          translated into lon/lat bounds for the overview map 
    460     * @type OpenLayers.Bounds 
    461     */ 
    462     getMapBoundsFromRectBounds: function(pxBounds) { 
    463         var leftBottomPx = new OpenLayers.Pixel(pxBounds.left, 
    464                                                 pxBounds.bottom); 
    465         var rightTopPx = new OpenLayers.Pixel(pxBounds.right, 
    466                                               pxBounds.top); 
    467         var leftBottomLonLat = this.getLonLatFromOverviewPx(leftBottomPx); 
    468         var rightTopLonLat = this.getLonLatFromOverviewPx(rightTopPx); 
    469         return new OpenLayers.Bounds(leftBottomLonLat.lon, leftBottomLonLat.lat, 
    470                                      rightTopLonLat.lon, rightTopLonLat.lat); 
    471     }, 
    472  
    473     /** 
    474     * @param {OpenLayers.Pixel} overviewMapPx 
    475     * 
    476     * @returns An OpenLayers.LonLat which is the passed-in overview map 
    477     *          OpenLayers.Pixel, translated into lon/lat by the overview map 
    478     * @type OpenLayers.LonLat 
    479     */ 
    480     getLonLatFromOverviewPx: function(overviewMapPx) { 
    481         var size = this.ovmap.size; 
    482         var res  = this.ovmap.getResolution(); 
    483         var center = this.ovmap.getExtent().getCenterLonLat(); 
    484      
    485         var delta_x = overviewMapPx.x - (size.w / 2); 
    486         var delta_y = overviewMapPx.y - (size.h / 2); 
    487          
    488         return new OpenLayers.LonLat(center.lon + delta_x * res , 
    489                                      center.lat - delta_y * res);  
    490     }, 
    491  
    492     /** 
    493     * @param {OpenLayers.LonLat} lonlat 
    494     * 
    495     * @returns An OpenLayers.Pixel which is the passed-in OpenLayers.LonLat,  
    496     *          translated into overview map pixels 
    497     * @type OpenLayers.Pixel 
    498     */ 
    499     getOverviewPxFromLonLat: function(lonlat) { 
    500         var res  = this.ovmap.getResolution(); 
    501         var extent = this.ovmap.getExtent(); 
    502         return new OpenLayers.Pixel( 
    503                        Math.round(1/res * (lonlat.lon - extent.left)), 
    504                        Math.round(1/res * (extent.top - lonlat.lat)) 
    505                        ); 
    506     }, 
    507  
    508     /** @final @type String */ 
    509     CLASS_NAME: 'OpenLayers.Control.OverviewMap' 
    510      
    511 }); 

  • lib/OpenLayers.js

    old new  
    9090        "OpenLayers/Control/MouseDefaults.js", 
    9191        "OpenLayers/Control/MouseToolbar.js", 
    9292        "OpenLayers/Control/MousePosition.js", 
    93         "OpenLayers/Control/OverviewMap.js", 
    9493        "OpenLayers/Control/KeyboardDefaults.js", 
    9594        "OpenLayers/Control/PanZoom.js", 
    9695        "OpenLayers/Control/PanZoomBar.js", 

  • examples/controls.html

    old new  
    1818            map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false})); 
    1919            map.addControl(new OpenLayers.Control.Permalink()); 
    2020            map.addControl(new OpenLayers.Control.Permalink($('permalink'))); 
    21             map.addControl(new OpenLayers.Control.OverviewMap()); 
     21            map.addControl(new OpenLayers.Control.MousePosition()); 
    2222            var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",  
    2323                "http://labs.metacarta.com/wms/vmap0", 
    2424                {layers: 'basic'} );