Ticket #1244: ovmap.patch

theme/default/style.css

@@ -64 +64 @@
-}
-
-.olControlOverviewMapExtentRectangle {
-
+
+
+
-    border: 2px dotted red;
-}
+.olControlOverviewMapRectReplacement {
+    overflow: hidden;
+    cursor: move;
+    background-image: url("img/overview_replacement.gif");
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
-.olLayerGeoRSSDescription {
-    float:left;
-    width:100%;

tests/Control/test_OverviewMap.html

@@ -51 +51 @@
-        t.eq(cent.lon, -71.3515625, "Clicking on the Overview Map has the correct effect on map lon");
-        t.eq(cent.lat, 42.17578125, "Clicking on the Overview Map has the correct effect on map lat");
-
-
-
-
+
+
+
+
+
+
-        
-        var cent = map.getCenter();
-        t.eq(cent.lon, -71.2734375, "Dragging on the Overview Map has the correct effect on map lon");

lib/OpenLayers/Map.js

@@ -53 +53 @@
-     * {DOMElement} The element that contains the map
-     */
-    div: null,
+    
+    /**
+     * Property: dragging
+     * {Boolean} The map is currently being dragged.
+     */
+    dragging: false,
-
-    /**
-     * Property: size
@@ -1221 +1227 @@
-     * TBD: reconsider forceZoomChange in 3.0
-     */
-    setCenter: function (lonlat, zoom, dragging, forceZoomChange) {
-
+
+
-        if (!this.center && !this.isValidLonLat(lonlat)) {
-            lonlat = this.maxExtent.getCenterLonLat();
-        }

lib/OpenLayers/Control/OverviewMap.js

@@ -20 +20 @@
-OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control, {
-
-    /**
-     * Property: id
-     * {String} For div.id
-     */
-    id:  "OverviewMap",
-
-    /**
-     * Property: element
-     * {DOMElement} The DOM element that contains the overview map
-     */
@@ -36 +30 @@
-     * {<OpenLayers.Map>} A reference to the overvew map itself.
-     */
-    ovmap: null,
-
+
-    /**
-     * APIProperty: size
-     * {<OpenLayers.Size>} The overvew map size in pixels.  Note that this is
@@ -52 +46 @@
-     * If none are sent at construction, the base layer for the main map is used.
-     */
-    layers: null,
+    
+    /**
+     * APIProperty: minRectSize
+     * {Integer} The minimum width or height (in pixels) of the extent
+     *     rectangle on the overview map.  When the extent rectangle reaches
+     *     this size, it will be replaced depending on the value of the
+     *     <minRectDisplayClass> property.  Default is 10 pixels.
+     */
+    minRectSize: 15,
+    
+    /**
+     * APIProperty: minRectDisplayClass
+     * {String} Replacement style class name for the extent rectangle when
+     *     <minRectSize> is reached.  This string will be suffixed on to the
+     *     displayClass.  Default is "RectReplacement".
+     *
+     * Example CSS declaration:
+     * (code)
+     * .olControlOverviewMapRectReplacement {
+     *     background-image: url("img/overview_replacement.png");
+     *     background-repeat: no-repeat;
+     *     background-position: center;
+     * }
+     * (end)
+     */
+    minRectDisplayClass: "RectReplacement",
-
-    /**
-     * APIProperty: minRatio
@@ -74 +94 @@
-     * options that the main map was constructed with.
-     */
-    mapOptions: null,
+    
+    /**
+     * Property: dragHandler
+     * {<OpenLayers.Handler.Drag>} A handler for dragging the extent rectangle.
+     */
+    dragHandler: null,
-
-    /**
-     * Constructor: OpenLayers.Control.OverviewMap
@@ -97 +123 @@
-        if (!this.mapDiv) { // we've already been destroyed
-            return;
-        }
+        this.dragHandler.destroy();
+        this.clickHandler.destroy();
+
-        this.mapDiv.removeChild(this.extentRectangle);
-        this.extentRectangle = null;
-        this.rectEvents.destroy();
@@ -107 +136 @@
-        
-        this.element.removeChild(this.mapDiv);
-        this.mapDiv = null;
-        this.mapDivEvents.destroy(); 
-        this.mapDivEvents = null;
-
-        this.div.removeChild(this.element);
-        this.element = null;
-        this.elementEvents.destroy();
-        this.elementEvents = null;
-
-        if (this.maximizeDiv) {
-            OpenLayers.Event.stopObservingElement(this.maximizeDiv);
@@ -165 +190 @@
-        this.extentRectangle = document.createElement('div');
-        this.extentRectangle.style.position = 'absolute';
-        this.extentRectangle.style.zIndex = 1000;  //HACK
-        this.extentRectangle.style.overflow = 'hidden';
-        this.extentRectangle.style.backgroundImage = 'url(' +
-                                        OpenLayers.Util.getImagesLocation() +
-                                        'blank.gif)';
-        this.extentRectangle.className = this.displayClass+'ExtentRectangle';
-        this.mapDiv.appendChild(this.extentRectangle);
-
+
-        this.element.appendChild(this.mapDiv);  
-
-        this.div.appendChild(this.element);
-
-        this.map.events.register('moveend', this, this.update);
-        
-        // Set up events.  The image div recenters the map on click.
-        // The extent rectangle can be dragged to recenter the map.
-        // If the mousedown happened elsewhere, then mousemove and mouseup
-        // should slip through.
-        this.elementEvents = new OpenLayers.Events(this, this.element);
-        this.elementEvents.register('mousedown', this, function(e) {
-            OpenLayers.Event.stop(e);
-        });
-        this.elementEvents.register('click', this, function(e) {
-            OpenLayers.Event.stop(e);
-        });
-        this.elementEvents.register('dblclick', this, function(e) {
-            OpenLayers.Event.stop(e);
-        });
-        this.rectEvents = new OpenLayers.Events(this, this.extentRectangle,
-                                                null, true);
-        this.rectEvents.register('mouseout', this, this.rectMouseOut);
-        this.rectEvents.register('mousedown', this, this.rectMouseDown);
-        this.rectEvents.register('mousemove', this, this.rectMouseMove);
-        this.rectEvents.register('mouseup', this, this.rectMouseUp);
-        this.rectEvents.register('click', this, function(e) {
-            OpenLayers.Event.stop(e);
-        });
-        this.rectEvents.register('dblclick', this, this.rectDblClick );
-        this.mapDivEvents = new OpenLayers.Events(this, this.mapDiv);
-        this.mapDivEvents.register('click', this, this.mapDivClick);
-
-        // Optionally add min/max buttons if the control will go in the
-        // map viewport.
@@ -276 +270 @@
-    },
-
-    /**
-MouseOut
-browser events
+Drag
+extent rectangle drag
-     *
-     * Parameters:
-evt - {<OpenLayers.Event>} evt
+px - {<OpenLayers.Pixel>} The pixel location of the drag.
-     */
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-            // don't allow dragging off of parent element
-            var newTop = Math.max(0, (rectTop - deltaY));
-            newTop = Math.min(newTop,
@@ -345 +295 @@
-                                                       newTop + rectHeight,
-                                                       newLeft + rectWidth,
-                                                       newTop));
-            this.rectDragStart = evt.xy.clone();
-            this.performedRectDrag = true;
-            OpenLayers.Event.stop(evt);
-        }
-    },
-
-    /**
-     * Method: rectMouseUp
-     * Handle browser events
-     *
-     * Parameters:
-     * evt - {<OpenLayers.Event>} evt
-     */
-    rectMouseUp: function(evt) {
-        if(!OpenLayers.Event.isLeftClick(evt)) {
-            return;
-        }
-        if(this.performedRectDrag) {
-            this.updateMapToRect();
-            OpenLayers.Event.stop(evt);
-        }        
-        document.onselectstart = null;
-        this.rectDragStart = null;
-    },
-    
-    /**
-     * Method: rectDblClick
-     * Handle browser events
-     *
-     * Parameters:
-     * evt - {<OpenLayers.Event>} evt
-     */
-    rectDblClick: function(evt) {
-        this.performedRectDrag = false;
-        OpenLayers.Event.stop(evt);
-        this.updateOverview();
-    },
-
-    /**
-     * Method: mapDivClick
-     * Handle browser events
-     *
@@ -391 +306 @@
-     * evt - {<OpenLayers.Event>} evt
-     */
-    mapDivClick: function(evt) {
-
-
+
-        var deltaX = evt.xy.x - pxCenter.x;
-        var deltaY = evt.xy.y - pxCenter.y;
-p
-p
-p
-p
+this.rectP
+this.rectP
+this.rectP
+this.rectP
-        var newTop = Math.max(0, (top + deltaY));
-        newTop = Math.min(newTop, this.ovmap.size.h - height);
-        var newLeft = Math.max(0, (left + deltaX));
@@ -532 +446 @@
-                     parseInt(OpenLayers.Element.getStyle(this.extentRectangle,
-                                               'border-bottom-width'));
-        this.hComp = (this.hComp) ? this.hComp : 2;
+
+        this.dragHandler = new OpenLayers.Handler.Drag(
+            this, {move: this.rectDrag, done: this.updateMapToRect},
+            {map: this.ovmap}
+        );
+        this.clickHandler = new OpenLayers.Handler.Click(
+            this, {
+                "click": this.mapDivClick
+            },{
+                "single": true, "double": false,
+                "stopSingle": true, "stopDouble": true,
+                "pixelTolerance": 1,
+                map: this.ovmap
+            }
+        );
+        this.clickHandler.activate();
+        
+        this.rectEvents = new OpenLayers.Events(this, this.extentRectangle,
+                                                null, true);
+        this.rectEvents.register("mouseover", this, function(e) {
+            if(!this.dragHandler.active && !this.map.dragging) {
+                // this click handler de/activation can be removed when
+                // ticket #1247 is addressed
+                this.clickHandler.deactivate();
+                this.dragHandler.activate();
+                this.clickHandler.activate();
+            }
+        });
+        this.rectEvents.register("mouseout", this, function(e) {
+            if(!this.dragHandler.dragging) {
+                this.dragHandler.deactivate();
+            }
+        });
+
-    },
-        
-    /**
@@ -548 +496 @@
-        }
-        var pxBounds = this.getRectBoundsFromMapBounds(this.map.getExtent());
-        if (pxBounds) {
-
+  
-        }
-    },
-    
@@ -557 +505 @@
-     * Updates the map extent to match the extent rectangle position and size
-     */
-    updateMapToRect: function() {
-
-
+
-        this.map.setCenter(lonLatBounds.getCenterLonLat(), this.map.zoom);
-    },
-    
-    /**
-     * Method: getRectPxBounds
-     * Get extent rectangle pixel bounds
-     *
-     * Returns:
-     * {<OpenLayers.Bounds>} A bounds which is the extent rectangle's pixel
-     * bounds (relative to the parent element)
-     */
-    getRectPxBounds: function() {
-        var top = parseInt(this.extentRectangle.style.top);
-        var left = parseInt(this.extentRectangle.style.left);
-        var height = parseInt(this.extentRectangle.style.height);
-        var width = parseInt(this.extentRectangle.style.width);
-        return new OpenLayers.Bounds(left, top + height, left + width, top);
-    },
-
-    /**
-     * Method: setRectPxBounds
@@ -592 +523 @@
-                              this.ovmap.size.h - this.hComp);
-        var right = Math.min(pxBounds.left + pxBounds.getWidth(),
-                             this.ovmap.size.w - this.wComp);
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-    },
-
-    /**

examples/overviewmap.html

@@ -86 +86 @@
-        map2.addLayers([bos]);
-        map2.addControl(new OpenLayers.Control.LayerSwitcher());
-        
-the 
+non-
-        var controlOptions = {
-            mapOptions: mapOptions
-        }