mobile-navigation example - place the JS code in a separate file, no functional change

git-svn-id: http://svn.openlayers.org/trunk/openlayers@11230 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Éric Lemoine
2011-02-22 12:08:30 +00:00
parent 36f5232dd6
commit ab309197e2
2 changed files with 28 additions and 22 deletions

View File

@@ -6,25 +6,8 @@
<title>OpenLayers TouchNavigation Control</title> <title>OpenLayers TouchNavigation Control</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" />
<script src="../lib/OpenLayers.js"></script> <script type="text/javascript" src="../lib/OpenLayers.js"></script>
<script type="text/javascript"> <script type="text/javascript" src="mobile-navigation.js"></script>
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>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">TouchNavigation Control</h1> <h1 id="title">TouchNavigation Control</h1>
@@ -37,9 +20,15 @@
<div id="map" class="smallmap"></div> <div id="map" class="smallmap"></div>
<div id="docs"> <div id="docs">
This example demonstrates a couple features of the TouchNavigation <p>
control. The TouchNavigation control controls most map dragging, This example demonstrates a couple features of the TouchNavigation
movement, zooming, etc, optimized for mobile devices. 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> </div>
</body> </body>
</html> </html>

View File

@@ -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);
}