[OpenLayers-Commits] r11230 - trunk/openlayers/examples

Tue Feb 22 07:08:31 EST 2011

Author: erilem
Date: 2011-02-22 04:08:30 -0800 (Tue, 22 Feb 2011)
New Revision: 11230

Added:
   trunk/openlayers/examples/mobile-navigation.js
Modified:
   trunk/openlayers/examples/mobile-navigation.html
Log:
mobile-navigation example - place the JS code in a separate file, no functional change

Modified: trunk/openlayers/examples/mobile-navigation.html
===================================================================

--- trunk/openlayers/examples/mobile-navigation.html	2011-02-22 12:06:12 UTC (rev 11229)
+++ trunk/openlayers/examples/mobile-navigation.html	2011-02-22 12:08:30 UTC (rev 11230)
@@ -6,25 +6,8 @@
     <title>OpenLayers TouchNavigation Control</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css" />
-    <script src="../lib/OpenLayers.js"></script>
-    <script type="text/javascript">
-        var map, layer;
-        function init() {
-            map = new OpenLayers.Map( 'map', { controls: [
-                new OpenLayers.Control.TouchNavigation({
-                    dragPanOptions: {
-                        interval: 0, // non-zero kills performance on some mobile phones
-                        enableKinetic: true
-                    }
-                })
-            ] });
-            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
-                    "http://vmap0.tiles.osgeo.org/wms/vmap0",
-                    {layers: 'basic'} );
-            map.addLayer(layer);
-            map.setCenter(new OpenLayers.LonLat(5, 40), 2);
-        }
-    </script>
+    <script type="text/javascript" src="../lib/OpenLayers.js"></script>
+    <script type="text/javascript" src="mobile-navigation.js"></script>
   </head>
   <body onload="init()">
     <h1 id="title">TouchNavigation Control</h1>
@@ -37,9 +20,15 @@
 
     <div id="map" class="smallmap"></div>
     <div id="docs">
-        This example demonstrates a couple features of the TouchNavigation
-        control. The TouchNavigation control controls most map dragging,
-        movement, zooming, etc, optimized for mobile devices.
+        <p>
+            This example demonstrates a couple features of the TouchNavigation
+            control. The TouchNavigation control controls most map dragging,
+            movement, zooming, etc, optimized for mobile devices.
+        </p> 
+        <p>
+            See the <a href="mobile-navigation.js" target="_blank">mobile-navigation.js
+            source</a> to see how this is done.
+        </p> 
     </div>
   </body>
 </html>

Added: trunk/openlayers/examples/mobile-navigation.js
===================================================================
--- trunk/openlayers/examples/mobile-navigation.js	                        (rev 0)
+++ trunk/openlayers/examples/mobile-navigation.js	2011-02-22 12:08:30 UTC (rev 11230)
@@ -0,0 +1,17 @@
+var map, layer;
+function init() {
+    map = new OpenLayers.Map('map', { controls: [
+        new OpenLayers.Control.TouchNavigation({
+            dragPanOptions: {
+                interval: 0, // non-zero kills performance on some mobile phones
+                enableKinetic: true
+            }
+        }),
+        new OpenLayers.Control.ZoomPanel()
+    ] });
+    layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
+            "http://vmap0.tiles.osgeo.org/wms/vmap0",
+            {layers: 'basic'} );
+    map.addLayer(layer);
+    map.setCenter(new OpenLayers.LonLat(5, 40), 2);
+}

