<!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 light</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="#customZoomOut" 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>