From 8d6bddf0acb6608a6f5d402e2ccfb9deb3d59ddc Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 5 Mar 2012 22:11:36 -0700 Subject: [PATCH] A simple zoom control with zoom in/out links. The zoom control allows for zoom in/out links that can be styled with CSS. Note: This change was originally captured in #269. It involves nice additions thanks @ahocevar. The changes were unintentionally merged and then reverted with fb3caf1561f9db9c4516b12cd712217a04910cf8, so the history of commits is not immediately apparent (though still likely there somewhere due to the magic of git). --- examples/zoom.html | 68 ++++++++++++++++ examples/zoom.js | 34 ++++++++ lib/OpenLayers.js | 1 + lib/OpenLayers/Control/Zoom.js | 139 +++++++++++++++++++++++++++++++++ tests/Control/Zoom.html | 81 +++++++++++++++++++ tests/list-tests.html | 1 + theme/default/style.css | 38 +++++++++ 7 files changed, 362 insertions(+) create mode 100644 examples/zoom.html create mode 100644 examples/zoom.js create mode 100644 lib/OpenLayers/Control/Zoom.js create mode 100644 tests/Control/Zoom.html diff --git a/examples/zoom.html b/examples/zoom.html new file mode 100644 index 0000000000..7b15297d05 --- /dev/null +++ b/examples/zoom.html @@ -0,0 +1,68 @@ + + + + + + + OpenLayers Zoom Example + + + + + +

Zoom Control Example

+
zoom control
+ +
Shows how to use a simple zoom control.
+ +
+

The map above uses the default control configuration and style.

+

The map below uses the custom zoom elements and styling.

+
+
+ in + out +
+
+ +
+

This example demonstrates the use of a Zoom control.

+

+ See the zoom.js source + for details. +

+
+ + + + diff --git a/examples/zoom.js b/examples/zoom.js new file mode 100644 index 0000000000..08694ccad4 --- /dev/null +++ b/examples/zoom.js @@ -0,0 +1,34 @@ +var map = new OpenLayers.Map({ + div: "map", + layers: [new OpenLayers.Layer.OSM()], + controls: [ + new OpenLayers.Control.Navigation({ + dragPanOptions: { + enableKinetic: true + } + }), + new OpenLayers.Control.Attribution(), + new OpenLayers.Control.Zoom() + ], + center: [0, 0], + zoom: 1 +}); + +var map2 = new OpenLayers.Map({ + div: "map2", + layers: [new OpenLayers.Layer.OSM()], + controls: [ + new OpenLayers.Control.Navigation({ + dragPanOptions: { + enableKinetic: true + } + }), + new OpenLayers.Control.Attribution(), + new OpenLayers.Control.Zoom({ + zoomInId: "customZoomIn", + zoomOutId: "customZoomOut" + }) + ], + center: [0, 0], + zoom: 1 +}); diff --git a/lib/OpenLayers.js b/lib/OpenLayers.js index b67381d4b5..fdc91bd366 100644 --- a/lib/OpenLayers.js +++ b/lib/OpenLayers.js @@ -204,6 +204,7 @@ "OpenLayers/Control/Graticule.js", "OpenLayers/Control/TransformFeature.js", "OpenLayers/Control/SLDSelect.js", + "OpenLayers/Control/Zoom.js", "OpenLayers/Geometry.js", "OpenLayers/Geometry/Collection.js", "OpenLayers/Geometry/Point.js", diff --git a/lib/OpenLayers/Control/Zoom.js b/lib/OpenLayers/Control/Zoom.js new file mode 100644 index 0000000000..eb212eeb83 --- /dev/null +++ b/lib/OpenLayers/Control/Zoom.js @@ -0,0 +1,139 @@ +/* Copyright (c) 2006-2012 by OpenLayers Contributors (see authors.txt for + * full list of contributors). Published under the Clear BSD license. + * See http://svn.openlayers.org/trunk/openlayers/license.txt for the + * full text of the license. */ + +/** + * @requires OpenLayers/Control.js + * @requires OpenLayers/Events/buttonclick.js + */ + +/** + * Class: OpenLayers.Control.Zoom + * The Zoom control is a pair of +/- links for zooming in and out. + * + * Inherits from: + * - + */ +OpenLayers.Control.Zoom = OpenLayers.Class(OpenLayers.Control, { + + /** + * APIProperty: zoomInText + * {String} + * Text for zoom-in link. Default is "+". + */ + zoomInText: "+", + + /** + * APIProperty: zoomInId + * {String} + * Instead of having the control create a zoom in link, you can provide + * the identifier for an anchor element already added to the document. + * By default, an element with id "olZoomInLink" will be searched for + * and used if it exists. + */ + zoomInId: "olZoomInLink", + + /** + * APIProperty: zoomOutText + * {String} + * Text for zoom-out link. Default is "-". + */ + zoomOutText: "-", + + /** + * APIProperty: zoomOutId + * {String} + * Instead of having the control create a zoom out link, you can provide + * the identifier for an anchor element already added to the document. + * By default, an element with id "olZoomOutLink" will be searched for + * and used if it exists. + */ + zoomOutId: "olZoomOutLink", + + /** + * Method: draw + * + * Returns: + * {DOMElement} A reference to the DOMElement containing the zoom links. + */ + draw: function() { + var div = OpenLayers.Control.prototype.draw.apply(this), + links = this.getOrCreateLinks(div), + zoomIn = links.zoomIn, + zoomOut = links.zoomOut, + bind = OpenLayers.Function.bind, + eventsInstance = this.map.events; + + if (zoomOut.parentNode !== div) { + eventsInstance = this.events; + eventsInstance.attachToElement(zoomOut.parentNode); + } + eventsInstance.register("buttonclick", this, this.onZoomClick); + + this.zoomInLink = zoomIn; + this.zoomOutLink = zoomOut; + return div; + }, + + /** + * Method: getOrCreateLinks + * + * Parameters: + * el - {DOMElement} + * + * Return: + * {Object} Object with zoomIn and zoomOut properties referencing links. + */ + getOrCreateLinks: function(el) { + var zoomIn = document.getElementById(this.zoomInId), + zoomOut = document.getElementById(this.zoomOutId); + if (!zoomIn) { + zoomIn = document.createElement("a"); + zoomIn.href = "#zoomIn"; + zoomIn.appendChild(document.createTextNode(this.zoomInText)); + zoomIn.className = "olControlZoomIn"; + el.appendChild(zoomIn); + } + OpenLayers.Element.addClass(zoomIn, "olButton"); + if (!zoomOut) { + zoomOut = document.createElement("a"); + zoomOut.href = "#zoomOut"; + zoomOut.appendChild(document.createTextNode(this.zoomOutText)); + zoomOut.className = "olControlZoomOut"; + el.appendChild(zoomOut); + } + OpenLayers.Element.addClass(zoomOut, "olButton"); + return { + zoomIn: zoomIn, zoomOut: zoomOut + }; + }, + + /** + * Method: onZoomClick + * Called when zoomin/out link is clicked. + */ + onZoomClick: function(evt) { + var button = evt.buttonElement; + if (button === this.zoomInLink) { + this.map.zoomIn(); + } else if (button === this.zoomOutLink) { + this.map.zoomOut(); + } + }, + + /** + * Method: destroy + * Clean up. + */ + destroy: function() { + if (this.map) { + this.map.events.unregister("buttonclick", this, this.onZoomClick); + } + delete this.zoomInLink; + delete this.zoomOutLink; + OpenLayers.Control.prototype.destroy.apply(this); + }, + + CLASS_NAME: "OpenLayers.Control.Zoom" +}); diff --git a/tests/Control/Zoom.html b/tests/Control/Zoom.html new file mode 100644 index 0000000000..c27161dab8 --- /dev/null +++ b/tests/Control/Zoom.html @@ -0,0 +1,81 @@ + + + + + + + +
+
in
out + + diff --git a/tests/list-tests.html b/tests/list-tests.html index 92ebdec19a..7c4cb1d402 100644 --- a/tests/list-tests.html +++ b/tests/list-tests.html @@ -45,6 +45,7 @@
  • Control/WMTSGetFeatureInfo.html
  • Control/PanPanel.html
  • Control/SLDSelect.html
    • +
  • Control/Zoom.html
  • Events.html
  • Events/buttonclick.html
  • Extras.html
    • diff --git a/theme/default/style.css b/theme/default/style.css index c695689ff7..179b3c2ada 100644 --- a/theme/default/style.css +++ b/theme/default/style.css @@ -429,6 +429,44 @@ span.olGoogleAttribution.hybrid a, span.olGoogleAttribution.satellite a { background-position: -26px -24px; } +div.olControlZoom { + position: absolute; + top: 8px; + left: 8px; +} +div.olControlZoom a { + display: block; + margin: 2px; + padding: 0 4px; + color: white; + font-size: 18px; + font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif; + font-weight: bold; + text-decoration: none; + text-align: center; + height: 22px; + width: 15px; + line-height: 22px; + background: #666666; /* fallback for IE - IE6 requires background shorthand*/ + background: rgba(0, 0, 0, 0.3); + border: 1px solid; + border-color: #ffffff; /* fallback for IE */ + border-color: rgba(255, 255, 255, 0.6); + filter: alpha(opacity=60); +} +div.olControlZoom a:hover { + background: #444444; /* fallback for IE */ + background: rgba(0, 0, 0, 0.5); + filter: alpha(opacity=80); +} +a.olControlZoomIn { + border-radius: 5px 5px 0 0; +} +a.olControlZoomOut { + border-radius: 0 0 5px 5px; +} + + /** * Animations */