ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #291 from tschaub/zoom

Browse Source 
Zoom Control
This commit is contained in:
Tim Schaub
2012-03-05 23:02:55 -08:00
parent d5da1130b5 8d6bddf0ac
commit 83fe251ef6
7 changed files with 362 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/zoom.html
+68
View 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>
examples/zoom.js
+34
View 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
});
lib/OpenLayers.js
+1
View File
@@ -204,6 +204,7 @@
"OpenLayers/Control/Graticule.js", "OpenLayers/Control/Graticule.js",
"OpenLayers/Control/TransformFeature.js", "OpenLayers/Control/TransformFeature.js",
"OpenLayers/Control/SLDSelect.js", "OpenLayers/Control/SLDSelect.js",
"OpenLayers/Control/Zoom.js",
"OpenLayers/Geometry.js", "OpenLayers/Geometry.js",
"OpenLayers/Geometry/Collection.js", "OpenLayers/Geometry/Collection.js",
"OpenLayers/Geometry/Point.js", "OpenLayers/Geometry/Point.js",
lib/OpenLayers/Control/Zoom.js
+139
View 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"
});
tests/Control/Zoom.html
+81
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>
tests/list-tests.html
+1
View File
@@ -45,6 +45,7 @@
<li>Control/WMTSGetFeatureInfo.html</li> <li>Control/WMTSGetFeatureInfo.html</li>
<li>Control/PanPanel.html</li> <li>Control/PanPanel.html</li>
<li>Control/SLDSelect.html</li> <li>Control/SLDSelect.html</li>
<li>Control/Zoom.html</li>
<li>Events.html</li> <li>Events.html</li>
<li>Events/buttonclick.html</li> <li>Events/buttonclick.html</li>
<li>Extras.html</li> <li>Extras.html</li>
theme/default/style.css
+38
View File
@@ -429,6 +429,44 @@ span.olGoogleAttribution.hybrid a, span.olGoogleAttribution.satellite a {
background-position: -26px -24px; 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 * Animations
*/ */