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

A simple zoom control with zoom in/out links.

Browse Source 
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).
This commit is contained in:
Tim Schaub
2012-03-05 22:11:36 -07:00
parent d5da1130b5
commit 8d6bddf0ac
7 changed files with 362 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
examples/zoom.html Normal file
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>