8d6bddf0ac
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).
69 lines
2.3 KiB
HTML
69 lines
2.3 KiB
HTML
<!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>
|