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
examples/zoom.html
+33
View File
@@ -12,6 +12,31 @@
bottom: 5px; bottom: 5px;
font-size: 9px; 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> </style>
</head> </head>
<body> <body>
@@ -21,6 +46,14 @@
<div id="shortdesc">Shows how to use a simple zoom control.</div> <div id="shortdesc">Shows how to use a simple zoom control.</div>
<div id="map" class="smallmap"></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"> <div id="docs">
<p>This example demonstrates the use of a Zoom control.</p> <p>This example demonstrates the use of a Zoom control.</p>
examples/zoom.js
+20
View File
@@ -7,8 +7,28 @@ var map = new OpenLayers.Map({
enableKinetic: true enableKinetic: true
} }
}), }),
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.Zoom() new OpenLayers.Control.Zoom()
], ],
center: [0, 0], center: [0, 0],
zoom: 1 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/Control/Zoom.js
+3 -4
View File
@@ -54,8 +54,7 @@ OpenLayers.Control.Zoom = OpenLayers.Class(OpenLayers.Control, {
* Method: draw * Method: draw
* *
* Returns: * Returns:
* {DOMElement} A reference to the DIV DOMElement containing the * {DOMElement} A reference to the DOMElement containing the zoom links.
* switcher tabs.
*/ */
draw: function() { draw: function() {
var div = OpenLayers.Control.prototype.draw.apply(this), 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. * {Object} Object with zoomIn and zoomOut properties referencing links.
*/ */
getOrCreateLinks: function(el) { getOrCreateLinks: function(el) {
var zoomIn = document.getElementById(this.zoomInId); var zoomIn = document.getElementById(this.zoomInId),
zoomOut = document.getElementById(this.zoomOutId);
if (!zoomIn) { if (!zoomIn) {
zoomIn = document.createElement("a"); zoomIn = document.createElement("a");
zoomIn.href = "#zoomIn"; zoomIn.href = "#zoomIn";
@@ -89,7 +89,6 @@ OpenLayers.Control.Zoom = OpenLayers.Class(OpenLayers.Control, {
zoomIn.className = "olControlZoomIn"; zoomIn.className = "olControlZoomIn";
el.appendChild(zoomIn); el.appendChild(zoomIn);
} }
var zoomOut = document.getElementById(this.zoomOutId);
if (!zoomOut) { if (!zoomOut) {
zoomOut = document.createElement("a"); zoomOut = document.createElement("a");
zoomOut.href = "#zoomOut"; zoomOut.href = "#zoomOut";