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 fb3caf1561, so the history of commits is not immediately apparent (though still likely there somewhere due to the magic of git).
This commit is contained in:
Tim Schaub
68
examples/zoom.html
Normal file
68
examples/zoom.html
Normal file
@@ -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>
|
||||
34
examples/zoom.js
Normal file
34
examples/zoom.js
Normal file
@@ -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
|
||||
});
|
||||
@@ -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",
|
||||
|
||||
139
lib/OpenLayers/Control/Zoom.js
Normal file
139
lib/OpenLayers/Control/Zoom.js
Normal file
@@ -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"
|
||||
});
|
||||
81
tests/Control/Zoom.html
Normal file
81
tests/Control/Zoom.html
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user