HTML5 geolocation with Openstreetmap and OpenLayers for Android, iPhone, iPAD and iPod
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.
April 26th, 2011 at 17:08
Nice job! the OpenLayers API looks very powerful and simple to use 🙂
I’m trying to build my 100% web app using OpenLayers. I see that we can load an OSM file from an url (this OSM file can be exported directly from openstreetmap.org)
The code is following:
var layer = new OpenLayers.Layer.Vector(“Polygon”, {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: “http://mywebsite/myosmfile.osm”,// relative or absolute URL to your .osm file
format: new OpenLayers.Format.OSM()
}),
projection: new OpenLayers.Projection(“EPSG:4326”)
});
But What I’m trying to do is to load an OSM file (the map) from the local filesystem using the HTML5 read/write file API. So I can, with javascript, load the map from my computer, it’s gonna be fast and no need ofs internet connection….
Any ideas, thanks a lot,