Add new ZoomPanel and PanPanel, a step towards a more easily customizable look for OpenLayers. Work on this ticket was done by a slew of contributors, and reviews as well. Thanks especially to tschaub for the ie6 trick and concomittant non-alpha images. (Closes #1400).

git-svn-id: http://svn.openlayers.org/trunk/openlayers@7950 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2008-09-04 19:21:59 +00:00
parent d2ac6cacfd
commit 5084ea6a91
14 changed files with 320 additions and 5 deletions
--- a/examples/pan-zoom-panels.html
+++ b/examples/pan-zoom-panels.html
@@ -0,0 +1,49 @@
+<html>
+<head>
+    <title>Pan and Zoom Panels</title>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+
+    <!--[if IE]>
+        <link rel="stylesheet" href="../theme/default/ie6-style.css" type="text/css" />
+    <![endif]-->
+
+    <link rel="stylesheet" href="style.css" type="text/css" />
+    <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("map", {
+            controls: [
+                new OpenLayers.Control.Navigation(),
+                new OpenLayers.Control.PanPanel(),
+                new OpenLayers.Control.ZoomPanel()
+            ]
+        });
+        
+        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);
+    }
+    </script>
+</head>
+<body onload='init();'>
+    <h1 id="title">Pan and Zoom Panels</h1>
+    <div id="tags"></div>
+    <p id="shortdesc">Customizable pan and zoom panels</p>
+    </p>
+    <div id="map" class="smallmap"></div>
+    <p id="docs">
+        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>
--- a/lib/OpenLayers.js
+++ b/lib/OpenLayers.js
@@ -221,6 +221,11 @@
            "OpenLayers/Layer/WFS.js",
            "OpenLayers/Control/MouseToolbar.js",
            "OpenLayers/Control/NavToolbar.js",
+            "OpenLayers/Control/PanPanel.js",
+            "OpenLayers/Control/Pan.js",
+            "OpenLayers/Control/ZoomIn.js",
+            "OpenLayers/Control/ZoomOut.js",
+            "OpenLayers/Control/ZoomPanel.js",
            "OpenLayers/Control/EditingToolbar.js",
            "OpenLayers/Lang.js",
            "OpenLayers/Lang/en.js"
--- a/lib/OpenLayers/Control/Pan.js
+++ b/lib/OpenLayers/Control/Pan.js
@@ -0,0 +1,76 @@
+/**
+ * @requires OpenLayers/Control.js
+ */
+
+/**
+ * Class: OpenLayers.Control.Pan
+ */
+OpenLayers.Control.Pan = 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.Pan 
+     * Control which handles the panning (in any of the cardinal directions)
+     *     of the map by a set px distance. 
+     *
+     * 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(direction, options) {
+    
+        this.direction = direction;
+        this.CLASS_NAME += this.direction;
+        
+        OpenLayers.Control.prototype.initialize.apply(this, [options]);
+    },
+    
+    /**
+     * Method: trigger
+     */
+    trigger: function(){
+    
+        switch (this.direction) {
+            case OpenLayers.Control.Pan.NORTH: 
+                this.map.pan(0, -this.slideFactor);
+                break;
+            case OpenLayers.Control.Pan.SOUTH: 
+                this.map.pan(0, this.slideFactor);
+                break;
+            case OpenLayers.Control.Pan.WEST: 
+                this.map.pan(-this.slideFactor, 0);
+                break;
+            case OpenLayers.Control.Pan.EAST: 
+                this.map.pan(this.slideFactor, 0);
+                break;
+        }
+    },
+
+    CLASS_NAME: "OpenLayers.Control.Pan"
+});
+
+OpenLayers.Control.Pan.NORTH = "North";
+OpenLayers.Control.Pan.SOUTH = "South";
+OpenLayers.Control.Pan.EAST = "East";
+OpenLayers.Control.Pan.WEST = "West";
--- a/lib/OpenLayers/Control/PanPanel.js
+++ b/lib/OpenLayers/Control/PanPanel.js
@@ -0,0 +1,30 @@
+/**
+ * @requires OpenLayers/Control/Panel.js
+ * @requires OpenLayers/Control/Pan.js
+ */
+
+/**
+ * Class: OpenLayers.Control.PanPanel
+ */
+OpenLayers.Control.PanPanel = OpenLayers.Class(OpenLayers.Control.Panel, {
+
+    /**
+     * Constructor: OpenLayers.Control.PanPanel 
+     * Add the four directional pan buttons.
+     *
+     * 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.Pan(OpenLayers.Control.Pan.NORTH),
+            new OpenLayers.Control.Pan(OpenLayers.Control.Pan.SOUTH),
+            new OpenLayers.Control.Pan(OpenLayers.Control.Pan.EAST),
+            new OpenLayers.Control.Pan(OpenLayers.Control.Pan.WEST)
+        ]);
+    },
+
+    CLASS_NAME: "OpenLayers.Control.PanPanel"
+});
--- a/lib/OpenLayers/Control/ZoomIn.js
+++ b/lib/OpenLayers/Control/ZoomIn.js
@@ -0,0 +1,26 @@
+/**
+ * @requires OpenLayers/Control.js
+ */
+
+/**
+ * Class: OpenLayers.Control.ZoomIn
+ */
+OpenLayers.Control.ZoomIn = 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.ZoomIn"
+});
--- a/lib/OpenLayers/Control/ZoomOut.js
+++ b/lib/OpenLayers/Control/ZoomOut.js
@@ -0,0 +1,26 @@
+/**
+ * @requires OpenLayers/Control.js
+ */
+
+/**
+ * Class: OpenLayers.Control.ZoomOut
+ */
+OpenLayers.Control.ZoomOut = 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.ZoomOut"
+});
--- a/lib/OpenLayers/Control/ZoomPanel.js
+++ b/lib/OpenLayers/Control/ZoomPanel.js
@@ -0,0 +1,31 @@
+/**
+ * @requires OpenLayers/Control/Panel.js
+ * @requires OpenLayers/Control/ZoomIn.js
+ * @requires OpenLayers/Control/ZoomOut.js
+ * @requires OpenLayers/Control/ZoomToMaxExtent.js
+ */
+
+/**
+ * Class: OpenLayers.Control.ZoomPanel
+ */
+OpenLayers.Control.ZoomPanel = OpenLayers.Class(OpenLayers.Control.Panel, {
+
+    /**
+     * Constructor: OpenLayers.Control.ZoomPanel 
+     * Add the three zooming 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.ZoomIn(),
+            new OpenLayers.Control.ZoomToMaxExtent(),
+            new OpenLayers.Control.ZoomOut()
+        ]);
+    },
+
+    CLASS_NAME: "OpenLayers.Control.ZoomPanel"
+});
--- a/lib/OpenLayers/Control/ZoomToMaxExtent.js
+++ b/lib/OpenLayers/Control/ZoomToMaxExtent.js
@@ -15,9 +15,12 @@
 *  - <OpenLayers.Control>
 */
 OpenLayers.Control.ZoomToMaxExtent = OpenLayers.Class(OpenLayers.Control, {
+
    /**
     * Property: type
-     * TYPE_BUTTON.
+     * {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,
    
--- a/theme/default/ie6-style.css
+++ b/theme/default/ie6-style.css
@@ -0,0 +1,7 @@
+.olControlZoomPanel div {
+    background-image: url(img/zoom-panel-NOALPHA.png);
+}
+.olControlPanPanel div {
+    background-image: url(img/pan-panel-NOALPHA.png);
+}
+
--- a/theme/default/img/pan-panel-NOALPHA.png
+++ b/theme/default/img/pan-panel-NOALPHA.png
--- a/theme/default/img/pan-panel.png
+++ b/theme/default/img/pan-panel.png
--- a/theme/default/img/zoom-panel-NOALPHA.png
+++ b/theme/default/img/zoom-panel-NOALPHA.png
--- a/theme/default/img/zoom-panel.png
+++ b/theme/default/img/zoom-panel.png
--- a/theme/default/style.css
+++ b/theme/default/style.css
@@ -241,10 +241,72 @@ div.olControlMousePosition {
    filter: alpha(opacity=50);
 }   

-/* 
- * Due to current limitations in the OpenLayers code, you can only
- * replace this image with another image which is 17px x 17px. 
- */   
+.olControlPanPanel {
+    top: 10px;
+    left: 5px;
+}  
+
+.olControlPanPanel div {
+    background-image: url(img/pan-panel.png);
+    height: 18px;
+    width: 18px;
+    cursor: pointer;
+    position: absolute;
+}
+
+.olControlPanPanel .olControlPanNorthItemInactive {
+    top: 0px;
+    left: 9px;
+    background-position: 0px 0px;
+}
+.olControlPanPanel .olControlPanSouthItemInactive {
+    top: 36px;
+    left: 9px;
+    background-position: 18px 0px;
+}
+.olControlPanPanel .olControlPanWestItemInactive {
+    position: absolute;
+    top: 18px;
+    left: 0px;
+    background-position: 0px 18px;
+}
+.olControlPanPanel .olControlPanEastItemInactive {
+    top: 18px;
+    left: 18px;
+    background-position: 18px 18px;
+}
+
+.olControlZoomPanel {
+    top: 71px;
+    left: 14px;
+} 
+
+.olControlZoomPanel div {
+    background-image: url(img/zoom-panel.png);
+    position: absolute;
+    height: 18px;
+    width: 18px;
+    cursor: pointer;
+}
+
+.olControlZoomPanel .olControlZoomInItemInactive {
+    top: 0px;
+    left: 0px;
+    background-position: 0px 0px;
+}
+
+.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
+    top: 18px;
+    left: 0px;
+    background-position: 0px -18px;
+}
+
+.olControlZoomPanel .olControlZoomOutItemInactive {
+    top: 36px;
+    left: 0px;
+    background-position: 0px 18px;
+}
+
 .olPopupCloseBox {
  background: url("img/close.gif") no-repeat;
  cursor: pointer;