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>