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

Update zoom example to demonstrate custom style.

Browse Source
This commit is contained in:
Tim Schaub
2012-03-02 23:51:39 -07:00
parent f45043967b
commit c6650087cc
3 changed files with 56 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
examples/zoom.html
View File

@@ -12,6 +12,31 @@
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>
@@ -21,6 +46,14 @@
<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>

20
examples/zoom.js
View File

@@ -7,8 +7,28 @@ var map = new OpenLayers.Map({
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
});

7
lib/OpenLayers/Control/Zoom.js
View File

@@ -54,8 +54,7 @@ OpenLayers.Control.Zoom = OpenLayers.Class(OpenLayers.Control, {
* Method: draw
*
* Returns:
* {DOMElement} A reference to the DIV DOMElement containing the
* switcher tabs.
* {DOMElement} A reference to the DOMElement containing the zoom links.
*/
draw: function() {
var div = OpenLayers.Control.prototype.draw.apply(this),
@@ -81,7 +80,8 @@ OpenLayers.Control.Zoom = OpenLayers.Class(OpenLayers.Control, {
* {Object} Object with zoomIn and zoomOut properties referencing links.
*/
getOrCreateLinks: function(el) {
var zoomIn = document.getElementById(this.zoomInId);
var zoomIn = document.getElementById(this.zoomInId),
zoomOut = document.getElementById(this.zoomOutId);
if (!zoomIn) {
zoomIn = document.createElement("a");
zoomIn.href = "#zoomIn";
@@ -89,7 +89,6 @@ OpenLayers.Control.Zoom = OpenLayers.Class(OpenLayers.Control, {
zoomIn.className = "olControlZoomIn";
el.appendChild(zoomIn);
}
var zoomOut = document.getElementById(this.zoomOutId);
if (!zoomOut) {
zoomOut = document.createElement("a");
zoomOut.href = "#zoomOut";