Ticket #1400: panels.3.patch

theme/default/style.css

@@ -223 +223 @@
-    filter: alpha(opacity=50);
-}   
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-.olPopupCloseBox {
-  background: url("img/close.gif") no-repeat;
-  cursor: pointer;

lib/OpenLayers/Control/ZoomPanel.js

@@ +1 @@
+/**
+ * @requires OpenLayers/Control/Panel.js
+ * @requires OpenLayers/Control/ZoomInButton.js
+ * @requires OpenLayers/Control/ZoomOutButton.js
+ * @requires OpenLayers/Control/ZoomToMaxExtent.js
+ */
+
+/**
+ * Class: OpenLayers.Control.ZoomPanel
+ */
+OpenLayers.Control.ZoomPanel = OpenLayers.Class(OpenLayers.Control.Panel, {
+
+    /**
+     * Constructor: OpenLayers.Control.ZoomPanel 
+     * Add our two mousedefaults controls.
+     *
+     * Parameters:
+     * options - {Object} An optional object whose properties will be used
+     *     to extend the control.
+     */
+    initialize: function(options) {
+        OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);
+        this.addControls([
+          new OpenLayers.Control.ZoomInButton(),
+          new OpenLayers.Control.ZoomToMaxExtent(),
+          new OpenLayers.Control.ZoomOutButton()
+        ]);
+    },
+
+    /**
+     * Method: draw 
+     * calls the default draw, and then activates mouse defaults.
+     */
+    draw: function() {
+        var div = OpenLayers.Control.Panel.prototype.draw.apply(this, arguments);
+        return div;
+    },
+
+    CLASS_NAME: "OpenLayers.Control.ZoomPanel"
+});

lib/OpenLayers/Control/ZoomInButton.js

@@ +1 @@
+/**
+ * 
+ * @requires OpenLayers/Control.js
+ */
+
+/**
+ * Class: OpenLayers.Control.ZoomInButton
+ */
+OpenLayers.Control.ZoomInButton = OpenLayers.Class(OpenLayers.Control, {
+
+    /* Property: type
+     * {String} The type of <OpenLayers.Control> -- When added to a 
+     *     <Control.Panel>, 'type' is used by the panel to determine how to 
+     *     handle our events.
+     */
+     type: OpenLayers.Control.TYPE_BUTTON,
+    
+    /**
+     * Method: trigger
+     */
+    trigger: function(){
+        this.map.zoomIn();
+    },
+
+    CLASS_NAME: "OpenLayers.Control.ZoomInButton"
+});

lib/OpenLayers/Control/ZoomOutButton.js

@@ +1 @@
+/**
+ * 
+ * @requires OpenLayers/Control.js
+ */
+
+/**
+ * Class: OpenLayers.Control.ZoomInButton
+ */
+OpenLayers.Control.ZoomOutButton = OpenLayers.Class(OpenLayers.Control, {
+
+    /* Property: type
+     * {String} The type of <OpenLayers.Control> -- When added to a 
+     *     <Control.Panel>, 'type' is used by the panel to determine how to 
+     *     handle our events.
+     */
+    type: OpenLayers.Control.TYPE_BUTTON,
+    
+    /**
+     * Method: trigger
+     */
+    trigger: function(){
+        this.map.zoomOut();
+    },
+
+    CLASS_NAME: "OpenLayers.Control.ZoomOutButton"
+});

lib/OpenLayers/Control/PanButton.js

@@ +1 @@
+/**
+ * 
+ * @requires OpenLayers/Control.js
+ */
+
+/**
+ * Class: OpenLayers.Control.PanButton
+ */
+OpenLayers.Control.PanButton = OpenLayers.Class(OpenLayers.Control, {
+
+    /** 
+     * APIProperty: slideFactor
+     * {Integer} Number of pixels by which we'll pan the map in any direction 
+     *     on clicking the arrow buttons. 
+     */
+    slideFactor: 50,
+
+    /** 
+     * Property: direction
+     * {String} in {'North', 'South', 'East', 'West'}
+     */
+    direction: null,
+
+    /* Property: type
+     * {String} The type of <OpenLayers.Control> -- When added to a 
+     *     <Control.Panel>, 'type' is used by the panel to determine how to 
+     *     handle our events.
+     */
+     type: OpenLayers.Control.TYPE_BUTTON,
+
+    /**
+     * Constructor: OpenLayers.Control.PanButton 
+     * Add our two mousedefaults controls.
+     *
+     * Parameters:
+     * direction - {String} The direction this button should pan
+     * options - {Object} An optional object whose properties will be used
+     *     to extend the control.
+     */
+    initialize: function(dir, options) {
+    
+        this.direction = dir;
+        this.CLASS_NAME += this.direction;
+        
+        OpenLayers.Control.prototype.initialize.apply(this, [options]);
+        
+        if(options && options.displayClass){
+            this.displayClass = options.displayClass;
+        }
+    },
+    
+    /**
+     * Method: trigger
+     */
+    trigger: function(){
+    
+        switch (this.direction) {
+            case OpenLayers.Control.PanButton.NORTH: 
+                this.map.pan(0, -this.slideFactor);
+                break;
+            case OpenLayers.Control.PanButton.SOUTH: 
+                this.map.pan(0, this.slideFactor);
+                break;
+            case OpenLayers.Control.PanButton.WEST: 
+                this.map.pan(-this.slideFactor, 0);
+                break;
+            case OpenLayers.Control.PanButton.EAST: 
+                this.map.pan(this.slideFactor, 0);
+                break;
+        }
+    },
+
+    CLASS_NAME: "OpenLayers.Control.PanButton"
+});
+
+OpenLayers.Control.PanButton.NORTH = "North";
+OpenLayers.Control.PanButton.SOUTH = "South";
+OpenLayers.Control.PanButton.EAST = "East";
+OpenLayers.Control.PanButton.WEST = "West";

lib/OpenLayers/Control/PanPanel.js

@@ +1 @@
+/**
+ * @requires OpenLayers/Control/Panel.js
+ * @requires OpenLayers/Control/PanButton.js
+ */
+
+/**
+ * Class: OpenLayers.Control.PanPanel
+ */
+OpenLayers.Control.PanPanel = OpenLayers.Class(OpenLayers.Control.Panel, {
+
+    /**
+     * Constructor: OpenLayers.Control.PanPanel 
+     * Add our two mousedefaults controls.
+     *
+     * Parameters:
+     * options - {Object} An optional object whose properties will be used
+     *     to extend the control.
+     */
+    initialize: function(options) {
+        OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);
+        this.addControls([
+          new OpenLayers.Control.PanButton(OpenLayers.Control.PanButton.NORTH),
+          new OpenLayers.Control.PanButton(OpenLayers.Control.PanButton.SOUTH),
+          new OpenLayers.Control.PanButton(OpenLayers.Control.PanButton.EAST),
+          new OpenLayers.Control.PanButton(OpenLayers.Control.PanButton.WEST)
+        ]);
+    },
+
+    /**
+     * Method: draw 
+     * calls the default draw, and then activates mouse defaults.
+     */
+    draw: function() {
+        var div = OpenLayers.Control.Panel.prototype.draw.apply(this, arguments);
+        return div;
+    },
+
+    CLASS_NAME: "OpenLayers.Control.PanPanel"
+});

lib/OpenLayers.js

@@ -210 +210 @@
-            "OpenLayers/Layer/WFS.js",
-            "OpenLayers/Control/MouseToolbar.js",
-            "OpenLayers/Control/NavToolbar.js",
+            "OpenLayers/Control/PanPanel.js",
+            "OpenLayers/Control/PanButton.js",
+            "OpenLayers/Control/ZoomInButton.js",
+            "OpenLayers/Control/ZoomOutButton.js",
+            "OpenLayers/Control/ZoomPanel.js",
-            "OpenLayers/Control/EditingToolbar.js",
-            "OpenLayers/Lang.js",
-            "OpenLayers/Lang/en.js"

examples/pan-zoom-panels.html

@@ +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+    "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title>Pan and Zoom Panels</title>
+    <style>
+    #mapDiv {
+        height: 256px;
+        width: 512px;
+    }
+    </style>
+    <script type="text/javascript" src="../lib/OpenLayers.js"></script>
+    <script>
+    var map;
+    var lon = 5;
+    var lat = 40;
+    var zoom = 5;
+    function init(){
+        map = new OpenLayers.Map( 'mapDiv', {controls: []} );
+        
+        var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
+                  "http://labs.metacarta.com/wms/vmap0",
+                  {layers: 'basic'} );
+        map.addLayers([wms]);
+        
+        map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
+        map.addControl( new OpenLayers.Control.PanPanel() );
+        map.addControl( new OpenLayers.Control.ZoomPanel() );
+    }
+    </script>
+</head>
+<body onload='init();'>
+<h1>Pan and Zoom Panels</h1>
+<div id="mapDiv"></div>
+<p>The pan and zoom panels allow you to use CSS styling to change the
+   look and feel of the panels, including changing their position
+   and their icons without needing to change any code.
+</p>   
+</body>
+</html>