Merge pull request #291 from tschaub/zoom

Zoom Control
2012-03-05 23:02:55 -08:00
parent d5da1130b5 8d6bddf0ac
commit 83fe251ef6
7 changed files with 362 additions and 0 deletions
--- a/examples/zoom.html
+++ b/examples/zoom.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <title>OpenLayers Zoom Example</title>
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
+        <style>
+            .olControlAttribution {
+                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;
+            }
+            
+        </style>
+    </head>
+    <body>
+        <h1 id="title">Zoom Control Example</h1>
+        <div id="tags">zoom control</div>
+
+        <div id="shortdesc">Shows how to use a simple zoom control.</div>
+
+        <div id="map" class="smallmap"></div>
+        <p>The map above uses the default control configuration and style.</p>
+        <p>The map below uses the custom zoom elements and styling.</p>
+        <div id="map2" class="smallmap">
+            <div id="customZoom">
+                <a href="#customZoomIn" id="customZoomIn">in</a>
+                <a href="#customZoomIn" id="customZoomOut">out</a>
+            </div>
+        </div>
+
+        <div id="docs">
+            <p>This example demonstrates the use of a Zoom control.</p>
+            <p>
+                See the <a href="zoom.js" target="_blank">zoom.js</a> source 
+                for details.
+            </p>
+        </div>
+        <script src="../lib/OpenLayers.js"></script>
+        <script src="zoom.js"></script>
+    </body>
+</html>
--- a/examples/zoom.js
+++ 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
+});
--- 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",
--- a/lib/OpenLayers/Control/Zoom.js
+++ 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>
+ */
+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"
+});
--- a/tests/Control/Zoom.html
+++ b/tests/Control/Zoom.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="../OLLoader.js"></script>
+  <script type="text/javascript">
+
+    function test_constructor(t) {
+        t.plan(5);
+
+        var control = new OpenLayers.Control.Zoom();
+        t.ok(control instanceof OpenLayers.Control, "instance of Control");
+        t.ok(control instanceof OpenLayers.Control.Zoom, "instance of Zoom");
+        t.eq(control.displayClass, "olControlZoom", "displayClass");
+        control.destroy();
+        
+        control = new OpenLayers.Control.Zoom({
+            zoomInText: "zoom in!",
+            zoomOutText: "zoom out!"
+        });
+        t.eq(control.zoomInText, "zoom in!", "zoomInText");
+        t.eq(control.zoomOutText, "zoom out!", "zoomOutText");
+        control.destroy();        
+    }
+
+    function test_addControl(t) {
+        t.plan(3);
+        var map = new OpenLayers.Map("map");
+        var control = new OpenLayers.Control.Zoom();
+        map.addControl(control);
+        t.ok(control.map === map, "Control.map set");
+        t.ok(!!~OpenLayers.Util.indexOf(map.controls, control), "map.controls contains control");
+
+        control = new OpenLayers.Control.Zoom({zoomInId: "in", zoomOutId: "out"});
+        map.addControl(control);
+        var eventsEl = document.getElementById("out").parentNode;
+        t.ok(control.events.element === eventsEl, "Events instance listens to custom div's parentNode");
+
+        map.destroy();
+    }
+    
+    function test_zoomIn(t) {
+        t.plan(2);
+        
+        var map = new OpenLayers.Map({
+            div: "map",
+            layers: [new OpenLayers.Layer(null, {isBaseLayer: true})]
+        });
+        var control = new OpenLayers.Control.Zoom();
+        map.addControl(control);
+        map.setCenter([0, 0], 0);
+        
+        t.eq(map.getZoom(), 0, "initial center");
+        map.events.triggerEvent("buttonclick", {buttonElement: control.zoomInLink});
+        t.eq(map.getZoom(), 1, "after zoom in");
+        map.destroy();
+    }
+
+    function test_zoomOut(t) {
+        t.plan(2);
+        
+        var map = new OpenLayers.Map({
+            div: "map",
+            layers: [new OpenLayers.Layer(null, {isBaseLayer: true})]
+        });
+        var control = new OpenLayers.Control.Zoom();
+        map.addControl(control);
+        map.setCenter([0, 0], 1);
+        
+        t.eq(map.getZoom(), 1, "initial center");
+        map.events.triggerEvent("buttonclick", {buttonElement: control.zoomOutLink});
+        t.eq(map.getZoom(), 0, "after zoom out");
+        map.destroy();
+    }
+
+  </script>
+</head>
+<body>
+    <div id="map" style="width: 512px; height: 256px;"/>
+    <div id="in">in</div><div id="out">out</out>
+</body>
+</html>
--- a/tests/list-tests.html
+++ b/tests/list-tests.html
@@ -45,6 +45,7 @@
    <li>Control/WMTSGetFeatureInfo.html</li>
    <li>Control/PanPanel.html</li>
    <li>Control/SLDSelect.html</li>
+    <li>Control/Zoom.html</li>
    <li>Events.html</li>
    <li>Events/buttonclick.html</li>
    <li>Extras.html</li>
--- 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
 */