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">
<p>
This example demonstrates a couple features of the TouchNavigation This example demonstrates a couple features of the TouchNavigation
control. The TouchNavigation control controls most map dragging, control. The TouchNavigation control controls most map dragging,
movement, zooming, etc, optimized for mobile devices. 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);
}