Principles of map working for mobile and stationary devices
The main aim of my program is the ability to display a map on my mobile telephone. This program was tested on: Samsung Galaxy S Advance, Firefox 19 with Android system. Additionally the program has got the ability to get geographical position of a user, with the help of embedded GPS on your mobile telephone. In my case I sometimes have to wait long to establish my geographical position, but when I connect to the Internet there is no problem to get this geographical position.
In my example the maps are downloaded from a.tile.openstreetmap.org server and it is restricted to 6 i 7 level and a particular area. It can be useful for example for limited resources on tile server.
You have to add "open layers" library to my program with themes and images supplied to this library. This library is available at http://openlayers.org. Then you can launch index.html in your website browser like Firefox or Chrome and that's all.
Below I show this program code with comments (files: osm.js and index.html):
File: osm.js:
var map; var fromProjection = new OpenLayers.Projection("EPSG:4326"); // transform from WGS 1984 var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
//restrict to define area, data from osm var extent = new OpenLayers.Bounds( 8.5693359375, 46.9502622421856, 28.937988281249996, 56.3774187738762 ).transform(fromProjection,toProjection);
function init() { var map_id = document.getElementById("map_element"); var rect = document.getElementById("map_wrap").getBoundingClientRect();
//match to with device map_id.style.width = rect.width + "px"; var wrap_lacalization = document.getElementById("wrap_lacalization"); wrap_lacalization.style.width = rect.width + "px"; //openlayer property var options = { restrictedExtent : extent, controls: [ new OpenLayers.Control.Attribution(), new OpenLayers.Control.TouchNavigation({ dragPanOptions: { enableKinetic: true } }), new OpenLayers.Control.Zoom() ] }; map = new OpenLayers.Map("map_element", options);
//in my case i presentation map for 6 and 7 level var resolutions_range = OpenLayers.Layer.Bing.prototype.serverResolutions.slice(6,8);
//openlayer object var newLayer = new OpenLayers.Layer.OSM( "New Layer",
//"url_to_tile/${z}/${x}/${y}.png",
"http://a.tile.openstreetmap.org/${z}/${x}/${y}.png", { zoomOffset: 6, resolutions: resolutions_range } ); map.addLayer(newLayer); map.setCenter();
//try to get localization on click event document.getElementById( 'lacalization' ).onclick = function(){ function geo_success(position) { var lonLat = new OpenLayers.LonLat(position.coords.longitude, position.coords.latitude).transform(fromProjection, toProjection ); markers.addMarker(new OpenLayers.Marker(lonLat)); map.setCenter(lonLat, 1 ); //param 2 - Zoom level - reletive to max }; function geo_error( error ) { alert( 'ERROR(' + error.code + '): ' + error.message ); }; var geo_options = { enableHighAccuracy: true, maximumAge : 30000, //timeout : 0 //constantly try to connect timeout : 27000 }; navigator.geolocation.getCurrentPosition( geo_success, geo_error, geo_options ); var markers = new OpenLayers.Layer.Markers( "Markers" ); map.addLayer(markers); };
}//init
window.addEventListener("load", function() { init(); }, false);
File: index.html
<!DOCTYPE html>
<html lang='en'>
<head>
<title>osm</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta charset='utf-8' />
<style type="text/css">
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#map_element {
width: 240px;
height: 520px;
margin: 0px;
}
button{
background-color: #B1CCDD;
border: 1px solid #B1CCDD;
cursor: pointer;
height: 24px;
text-align: justify;
margin-top: 2px;
margin-bottom: 4px;
}
#wrap_lacalization{
height: 30px;
}
</style>
<script type='text/javascript' src='OpenLayers.js'></script>
<script type='text/javascript' src='osm.js'></script>
</head>
<body>
<div class="clearfix" id="wrap_lacalization">
<button id="lacalization">Localization</button>
</div>
<div class="clearfix" id="map_wrap" >
<div id='map_element' ></div>
</div>
</body>
</html>