From 0ce7674be656d8eb3724e84bd45d3c6d9d768b1d Mon Sep 17 00:00:00 2001 From: tschaub Date: Fri, 2 Mar 2012 15:45:30 -0700 Subject: [PATCH] Adding a simple zoom control. This control generates simple zoom in/out links that can be styled with CSS. --- examples/zoom.html | 35 +++++++++ examples/zoom.js | 14 ++++ lib/OpenLayers.js | 1 + lib/OpenLayers/Control/Zoom.js | 140 +++++++++++++++++++++++++++++++++ theme/default/style.css | 32 ++++++++ 5 files changed, 222 insertions(+) create mode 100644 examples/zoom.html create mode 100644 examples/zoom.js create mode 100644 lib/OpenLayers/Control/Zoom.js diff --git a/examples/zoom.html b/examples/zoom.html new file mode 100644 index 0000000000..1e197dff80 --- /dev/null +++ b/examples/zoom.html @@ -0,0 +1,35 @@ + + + + + + + OpenLayers Zoom Example + + + + + +

Zoom Links Example

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

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..e3dc2a8b45 --- /dev/null +++ b/examples/zoom.js @@ -0,0 +1,14 @@ +var map = new OpenLayers.Map({ + div: "map", + layers: [new OpenLayers.Layer.OSM()], + controls: [ + new OpenLayers.Control.Navigation({ + dragPanOptions: { + enableKinetic: true + } + }), + new OpenLayers.Control.Zoom() + ], + 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..e7657a27b3 --- /dev/null +++ b/lib/OpenLayers/Control/Zoom.js @@ -0,0 +1,140 @@ +/* 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 + */ + +/** + * 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 DIV DOMElement containing the + * switcher tabs. + */ + draw: function() { + var div = OpenLayers.Control.prototype.draw.apply(this), + links = this.getOrCreateLinks(div), + zoomIn = links.zoomIn, + zoomOut = links.zoomOut, + bind = OpenLayers.Function.bind; + + zoomIn.onclick = bind(this.onZoomInClick, this); + zoomOut.onclick = bind(this.onZoomOutClick, this); + 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); + if (!zoomIn) { + zoomIn = document.createElement("a"); + zoomIn.href = "#zoomIn"; + zoomIn.appendChild(document.createTextNode(this.zoomInText)); + zoomIn.className = "olControlZoomIn"; + el.appendChild(zoomIn); + } + var zoomOut = document.getElementById(this.zoomOutId); + if (!zoomOut) { + zoomOut = document.createElement("a"); + zoomOut.href = "#zoomOut"; + zoomOut.appendChild(document.createTextNode(this.zoomOutText)); + zoomOut.className = "olControlZoomOut"; + el.appendChild(zoomOut); + } + return { + zoomIn: zoomIn, zoomOut: zoomOut + }; + }, + + /** + * Method: onZoomInClick + * Called when zoom-in link is clicked. + */ + onZoomInClick: function() { + this.map.zoomIn(); + return false; + }, + + /** + * Method: onZoomOutClick + * Called when zoom-out link is clicked. + */ + onZoomOutClick: function() { + this.map.zoomOut(); + return false; + }, + + /** + * Method: destroy + * Clean up. + */ + destroy: function() { + if (this.zoomInLink) { + delete this.zoomInLink.onclick; + delete this.zoomInLink; + } + if (this.zoomOutLink) { + delete this.zoomOutLink.onclick; + delete this.zoomOutLink; + } + OpenLayers.Control.prototype.destroy.apply(this); + }, + + CLASS_NAME: "OpenLayers.Control.Zoom" +}); diff --git a/theme/default/style.css b/theme/default/style.css index c695689ff7..8d7a410a12 100644 --- a/theme/default/style.css +++ b/theme/default/style.css @@ -429,6 +429,38 @@ 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; + line-height: 22px; + background-color: #4d4d4d; /* fallback for IE */ + background-color: rgba(0, 0, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.6); +} +div.olControlZoom a:hover { + background-color: #7f7f7f; /* fallback for IE */ + background-color: rgba(0, 0, 0, 0.5); +} +a.olControlZoomIn { + border-radius: 5px 5px 0 0; +} +a.olControlZoomOut { + border-radius: 0 0 5px 5px; +} + /** * Animations */