Adding a simple zoom control.

This control generates simple zoom in/out links that can be styled with CSS.
2012-03-02 15:45:30 -07:00
parent 39962a6179
commit 0ce7674be6
5 changed files with 222 additions and 0 deletions
--- a/examples/zoom.html
+++ b/examples/zoom.html
@@ -0,0 +1,35 @@
+<!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;
+            }
+        </style>
+    </head>
+    <body>
+        <h1 id="title">Zoom Links 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>
+
+        <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>
--- a/examples/zoom.js
+++ b/examples/zoom.js
@@ -0,0 +1,14 @@
+var map = new OpenLayers.Map({
+    div: "map",
+    layers: [new OpenLayers.Layer.OSM()],
+    controls: [
+        new OpenLayers.Control.Navigation({
+            dragPanOptions: {
+                enableKinetic: true
+            }
+        }),
+        new OpenLayers.Control.Zoom()
+    ],
+    center: [0, 0],
+    zoom: 1
+});