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
2012-03-05 22:11:36 -07:00
parent d5da1130b5
commit 8d6bddf0ac
7 changed files with 362 additions and 0 deletions

81
tests/Control/Zoom.html Normal file
View 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>

View File

@@ -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>