Opis działania mapy na urządzenia mobile i stacjonarne

Głównym celem mojego programu jest możliwość wyświetlenia mapy w telefonie. Program ten został przetestowany dla telefonu: Samsung Galaxy S Advance, Firefox 19 z systemem Android. Dodatkowo program jest w stanie zlokalizować położenie za pomocą gps-u wbudowanego w telefon. W moim przypadku czasami muszę długo czekać na ustanowienie lokalizacji. Pobrać lokalizację można także przez wi-fi łącząc się z Internetem, w tym przypadku pobranie lokalizacji jest bezproblemowe.

W moim przykładzie mapy są pobierane z serwera: a.tile.openstreetmap.org i ograniczam się do poziomu 6 i 7 oraz określonego obszaru. Może to być przydatne na przykład, gdy serwer z kafelkami mapy ma ograniczone zasoby.

Program ten korzysta także z biblioteki "OpenLayers" dostępnej na stronie: http://openlayers.org. Bibiotekę tą należy dołączyć do kodu źródłowego programu wraz z obrazami oraz stylami dostępnymi z tą biblioteką. Następnie należy uruchomić index.html w przeglądarce internetowej, rekomendowane przeglądarki to najnowszy: Firefox oraz Chrome.

Poniżej przedstawiam kod programu wraz z komentarzami (pliki: osm.js oraz index.html):

Plik: 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);

Plik: 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>