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
});