diff --git a/examples/pan-zoom-panels.html b/examples/pan-zoom-panels.html new file mode 100644 index 0000000000..8c1ec0d479 --- /dev/null +++ b/examples/pan-zoom-panels.html @@ -0,0 +1,49 @@ + + + Pan and Zoom Panels + + + + + + + + + +

Pan and Zoom Panels

+
+

Customizable pan and zoom panels

+

+
+

+ 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. +

+ + diff --git a/lib/OpenLayers.js b/lib/OpenLayers.js index bb367488f9..d52ce17f7b 100644 --- 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" diff --git a/lib/OpenLayers/Control/Pan.js b/lib/OpenLayers/Control/Pan.js new file mode 100644 index 0000000000..f9dfdc06ef --- /dev/null +++ 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 -- When added to a + * , '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"; \ No newline at end of file diff --git a/lib/OpenLayers/Control/PanPanel.js b/lib/OpenLayers/Control/PanPanel.js new file mode 100644 index 0000000000..4a094d1cac --- /dev/null +++ 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" +}); diff --git a/lib/OpenLayers/Control/ZoomIn.js b/lib/OpenLayers/Control/ZoomIn.js new file mode 100644 index 0000000000..375e0d53c5 --- /dev/null +++ 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 -- When added to a + * , '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" +}); \ No newline at end of file diff --git a/lib/OpenLayers/Control/ZoomOut.js b/lib/OpenLayers/Control/ZoomOut.js new file mode 100644 index 0000000000..16bf7c9c82 --- /dev/null +++ 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 -- When added to a + * , '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" +}); \ No newline at end of file diff --git a/lib/OpenLayers/Control/ZoomPanel.js b/lib/OpenLayers/Control/ZoomPanel.js new file mode 100644 index 0000000000..27efa9d736 --- /dev/null +++ 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" +}); diff --git a/lib/OpenLayers/Control/ZoomToMaxExtent.js b/lib/OpenLayers/Control/ZoomToMaxExtent.js index ca3261e5e7..a91fa91ea4 100644 --- a/lib/OpenLayers/Control/ZoomToMaxExtent.js +++ b/lib/OpenLayers/Control/ZoomToMaxExtent.js @@ -15,9 +15,12 @@ * - */ OpenLayers.Control.ZoomToMaxExtent = OpenLayers.Class(OpenLayers.Control, { + /** * Property: type - * TYPE_BUTTON. + * {String} The type of -- When added to a + * , 'type' is used by the panel to determine how to + * handle our events. */ type: OpenLayers.Control.TYPE_BUTTON, diff --git a/theme/default/ie6-style.css b/theme/default/ie6-style.css new file mode 100755 index 0000000000..65f6b192cd --- /dev/null +++ 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); +} + diff --git a/theme/default/img/pan-panel-NOALPHA.png b/theme/default/img/pan-panel-NOALPHA.png new file mode 100755 index 0000000000..2740d8baf2 Binary files /dev/null and b/theme/default/img/pan-panel-NOALPHA.png differ diff --git a/theme/default/img/pan-panel.png b/theme/default/img/pan-panel.png new file mode 100755 index 0000000000..99101219c0 Binary files /dev/null and b/theme/default/img/pan-panel.png differ diff --git a/theme/default/img/zoom-panel-NOALPHA.png b/theme/default/img/zoom-panel-NOALPHA.png new file mode 100755 index 0000000000..cdde6fc7ee Binary files /dev/null and b/theme/default/img/zoom-panel-NOALPHA.png differ diff --git a/theme/default/img/zoom-panel.png b/theme/default/img/zoom-panel.png new file mode 100755 index 0000000000..f2c7c518d5 Binary files /dev/null and b/theme/default/img/zoom-panel.png differ diff --git a/theme/default/style.css b/theme/default/style.css index 7d2f605b30..26b39c07b1 100644 --- 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;