1 files changed, 68 insertions, 0 deletions
diff --git a/misc/openlayers/examples/zoom.html b/misc/openlayers/examples/zoom.html
new file mode 100644
index 0000000..8ca11bf
--- /dev/null
+++ b/misc/openlayers/examples/zoom.html
@@ -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 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>