Archive for March, 2011

HTML5 geolocation with Openstreetmap and OpenLayers for Android, iPhone, iPAD and iPod

Wednesday, March 30th, 2011

Since I am very interested in the HTML5 geolocation feature and Openstreetmap (with the help of the great Openlayers project), I have coded a minimal solution for Android and iPhone in july 2010 (my blog in German language). Because of the large amount of Google hits I have embedded the example in an iframe into my blog now:

Try this link to use the map directly on your Android/IOS phone.

This example realizes a simple map with a marker at the users position in a webkit-based smartphone web browser. It can easily be extended to a simple moving map. It’s like Google maps mobile without Google (not really, runs on Android too and the embedded location provider in your Firefox PC browser is also Google. Believe me, just open about:config and filter for geo.wifi) ;-) And it is platform independent! Works perfectly on Android, iPhone, iPod touch and iPad too.

Here is the minimal source code for the example:

 
<html>
  <head>
    <title>HTML5 geolocation with Openstreetmap and OpenLayers</title>
    <style type="text/css">
      html, body, #basicMap {
          width: 240;
          height: 320;
          margin: 10;
      }
    </style>


    <script src="OpenLayers.js"></script>
    <script>
      function init() {
        map = new OpenLayers.Map("basicMap");
        var mapnik = new OpenLayers.Layer.OSM();
        map.addLayer(mapnik);
                        

        navigator.geolocation.getCurrentPosition(function(position) {       
            document.getElementById('anzeige').innerHTML="Latitude: " + position.coords.latitude + "   Longitude: " +
            position.coords.longitude + "<p>";
            var lonLat = new OpenLayers.LonLat(position.coords.longitude,
                                    position.coords.latitude)
                      .transform(
                                  new OpenLayers.Projection("EPSG:4326"), //transform from WGS 1984
                                              map.getProjectionObject() //to Spherical Mercator Projection
                                            );
                                            
            markers.addMarker(new OpenLayers.Marker(lonLat));
           
            map.setCenter(lonLat, 14 // Zoom level
            );
           
        });
        //map = new OpenLayers.Map("basicMap");
        //var mapnik = new OpenLayers.Layer.OSM();
        //map.addLayer(mapnik);
        map.setCenter(new
        OpenLayers.LonLat(3,3) // Center of the map
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
          ), 15 // Zoom level
         );
        var markers = new OpenLayers.Layer.Markers( "Markers" );
        map.addLayer(markers);
                             
            
      
      }
    </script>

  </head>

  <body onload="init();">
<center>
HTML5 geolocation: 
<br>
    <div id="basicMap"></div>
<br>HTML5 geolocation<br>
<br>with Openstreetmap and OpenLayers<br>
For Android Froyo,iPhone,iPAD,iPod
<br>
Your position estimated by browser geolocation API:<p>

<div id="anzeige">(will be displayed here)<p></div>
<a href="http://www.dr-bischoff.de">Andreas Bischoff</a>

<br>(view source to see how it works ;-)
</center>
  </body>
</html>

Update: There is a new version with moving map available, view the source code on my German blog.

Posted in Android, html5, iPad, iPhone, location based services | 1 Comment »