forked from openlayers/ol2
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request openlayers#291 from tschaub/zoom
Zoom Control
- Loading branch information
Showing
7 changed files
with
362 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters