From 0ce7674be656d8eb3724e84bd45d3c6d9d768b1d Mon Sep 17 00:00:00 2001 From: tschaub Date: Fri, 2 Mar 2012 15:45:30 -0700 Subject: [PATCH 1/4] 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 */ From 45b9c48c4388c51efc74a2b9965ce3139c784a79 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Fri, 2 Mar 2012 22:11:40 -0700 Subject: [PATCH 2/4] Accommodations for IE. --- examples/zoom.html | 2 +- theme/default/style.css | 15 ++++++++++----- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/examples/zoom.html b/examples/zoom.html index 1e197dff80..e5a579e11e 100644 --- a/examples/zoom.html +++ b/examples/zoom.html @@ -15,7 +15,7 @@ -

Zoom Links Example

+

Zoom Control Example

zoom control
Shows how to use a simple zoom control.
diff --git a/theme/default/style.css b/theme/default/style.css index 8d7a410a12..aa0a2c6bb6 100644 --- a/theme/default/style.css +++ b/theme/default/style.css @@ -445,14 +445,19 @@ div.olControlZoom a { text-decoration: none; text-align: center; height: 22px; + width: 15px; 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); + 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-color: #7f7f7f; /* fallback for IE */ - background-color: rgba(0, 0, 0, 0.5); + background: #444444; /* fallback for IE */ + background: rgba(0, 0, 0, 0.5); + filter: alpha(opacity=80); } a.olControlZoomIn { border-radius: 5px 5px 0 0; From f45043967b0828a9d5282f23c34a43e72914e6e0 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Fri, 2 Mar 2012 22:52:18 -0700 Subject: [PATCH 3/4] Zoom control tests. --- lib/OpenLayers/Control/Zoom.js | 4 +- tests/Control/Zoom.html | 74 ++++++++++++++++++++++++++++++++++ tests/list-tests.html | 1 + 3 files changed, 77 insertions(+), 2 deletions(-) create mode 100644 tests/Control/Zoom.html diff --git a/lib/OpenLayers/Control/Zoom.js b/lib/OpenLayers/Control/Zoom.js index e7657a27b3..19ca4532a0 100644 --- a/lib/OpenLayers/Control/Zoom.js +++ b/lib/OpenLayers/Control/Zoom.js @@ -126,11 +126,11 @@ OpenLayers.Control.Zoom = OpenLayers.Class(OpenLayers.Control, { */ destroy: function() { if (this.zoomInLink) { - delete this.zoomInLink.onclick; + this.zoomInLink.onclick = null; delete this.zoomInLink; } if (this.zoomOutLink) { - delete this.zoomOutLink.onclick; + this.zoomOutLink.onclick = null; delete this.zoomOutLink; } OpenLayers.Control.prototype.destroy.apply(this); diff --git a/tests/Control/Zoom.html b/tests/Control/Zoom.html new file mode 100644 index 0000000000..7f329446b9 --- /dev/null +++ b/tests/Control/Zoom.html @@ -0,0 +1,74 @@ + + + + + + + +
+ + diff --git a/tests/list-tests.html b/tests/list-tests.html index 09684ef764..6fe622d95b 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
    • From c6650087cc5758749c1282e2d822cfdc66deb66b Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Fri, 2 Mar 2012 23:51:39 -0700 Subject: [PATCH 4/4] Update zoom example to demonstrate custom style. --- examples/zoom.html | 33 +++++++++++++++++++++++++++++++++ examples/zoom.js | 20 ++++++++++++++++++++ lib/OpenLayers/Control/Zoom.js | 7 +++---- 3 files changed, 56 insertions(+), 4 deletions(-) diff --git a/examples/zoom.html b/examples/zoom.html index e5a579e11e..7b15297d05 100644 --- a/examples/zoom.html +++ b/examples/zoom.html @@ -12,6 +12,31 @@ bottom: 5px; font-size: 9px; } + #customZoom { + z-index: 1001; + position: relative; + top: 10px; + left: 10px; + } + #customZoom a { + text-decoration: none; + position: absolute; + display: block; + width: 50px; + text-align: center; + font-weight: bold; + color: #fff; + background: #369; + border: 1px solid #ccc; + border-radius: 3px; + } + #customZoom a:hover { + background: #036; + } + #customZoomOut { + top: 25px; + } + @@ -21,6 +46,14 @@
    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.

    diff --git a/examples/zoom.js b/examples/zoom.js index e3dc2a8b45..08694ccad4 100644 --- a/examples/zoom.js +++ b/examples/zoom.js @@ -7,8 +7,28 @@ var map = new OpenLayers.Map({ 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/Control/Zoom.js b/lib/OpenLayers/Control/Zoom.js index 19ca4532a0..992693637a 100644 --- a/lib/OpenLayers/Control/Zoom.js +++ b/lib/OpenLayers/Control/Zoom.js @@ -54,8 +54,7 @@ OpenLayers.Control.Zoom = OpenLayers.Class(OpenLayers.Control, { * Method: draw * * Returns: - * {DOMElement} A reference to the DIV DOMElement containing the - * switcher tabs. + * {DOMElement} A reference to the DOMElement containing the zoom links. */ draw: function() { var div = OpenLayers.Control.prototype.draw.apply(this), @@ -81,7 +80,8 @@ OpenLayers.Control.Zoom = OpenLayers.Class(OpenLayers.Control, { * {Object} Object with zoomIn and zoomOut properties referencing links. */ getOrCreateLinks: function(el) { - var zoomIn = document.getElementById(this.zoomInId); + var zoomIn = document.getElementById(this.zoomInId), + zoomOut = document.getElementById(this.zoomOutId); if (!zoomIn) { zoomIn = document.createElement("a"); zoomIn.href = "#zoomIn"; @@ -89,7 +89,6 @@ OpenLayers.Control.Zoom = OpenLayers.Class(OpenLayers.Control, { zoomIn.className = "olControlZoomIn"; el.appendChild(zoomIn); } - var zoomOut = document.getElementById(this.zoomOutId); if (!zoomOut) { zoomOut = document.createElement("a"); zoomOut.href = "#zoomOut";