OpenLayers OpenLayers

Ticket #104: overviewmap.3.patch

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

previous patch was reversed

  • 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.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.OverviewMap 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/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> 

  • 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> 
    2728    <li>test_Control_MouseToolbar.html</li> 
    2829    <li>test_Control_LayerSwitcher.html</li> 
    2930    <li>test_Control_PanZoom.html</li> 

  • 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  
     1OpenLayers.Control.OverviewMap 
     2 
     3This 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*/ 
     11OpenLayers.Control.OverviewMap = OpenLayers.Class.create(); 
     12 
     13OpenLayers.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", 
    9394        "OpenLayers/Control/KeyboardDefaults.js", 
    9495        "OpenLayers/Control/PanZoom.js", 
    9596        "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.MousePosition()); 
     21            map.addControl(new OpenLayers.Control.OverviewMap()); 
    2222            var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",  
    2323                "http://labs.metacarta.com/wms/vmap0", 
    2424                {layers: 'basic'} );