But that is not all: If the browser has access to the information on a mobile network or wireless LAN router, this data is sent with every call of the service. For Google, this concerns mainly mobile communication devices with the Android operating system; Skyhook profits from the iPhone users. The combination of the described methods leads to a very large data set of geodata available to these two service providers and is continuously updated through crowdsourcing (even if the users as data providers do not know anything about it).
Firefox has a very useful extension in the add-on Geolocater, which is particularly helpful for developing applications. It allows for entering locations that Firefox returns when the Geolocation API is called. You can select the location via a pull-down menu without having to resort to Google's online service. You can download this useful add-on at https://addons.mozilla.org/en-US/firefox/addon/14046.
Display of Current Position on OpenStreetMap
In the following example, the current location is represented on a map of OpenStreetMap and indicated with a marker. You can see different layers and the OpenStreetMap navigation bar. The image shows the OpenStreetMap's Mapnik layer with the position marker in the center of the browser.
Just as with Online Map Services, the data of the OpenStreetMap project is represented using the OpenLayers library. After the two required JavaScript files are loaded, the map is initialized in this example and the desired control elements are added:
// Initialize map and add navigation<br>
var map = new OpenLayers.Map ("map"); <br>
map.addControl(new OpenLayers.Control.Navigation()); <br>
map.addControl(new OpenLayers.Control.PanZoomBar());<br>
In addition to the navigation element with the four arrows, we attach the zoom bar to the map variable (map). We then create the selection element for the various layers (Control.LayerSwitcher) and add several layers to the map. The function call of map.addLayers() receives an array of newly created map objects:
// Layer selection with four map types<br>
map.addControl(new OpenLayers.Control.LayerSwitcher()); <br>
map.addLayers([ <br>
new OpenLayers.Layer.OSM.Mapnik("Mapnik"), <br>
new OpenLayers.Layer.OSM.Osmarender("Osmarender"), <br>
new OpenLayers.Layer.OSM.CycleMap("CycleMap") <br>
]);<br>
To finish, the map gets a layer for the marker:
var markers = new OpenLayers.Layer.Markers("Markers"); <br>
map.addLayer(markers);
The success callback after successfully determining the position looks like this:
function(pos) { <br>
var ll = new OpenLayers.LonLat( <br>
pos.coords.longitude, <br>
pos.coords.latitude).transform( <br>
new OpenLayers.Projection("EPSG:4326"), <br>
map.getProjectionObject() <br>
); <br>
map.setCenter (ll,zoom); <br>
markers.addMarker( <br>
new OpenLayers.Marker( <br>
ll,new OpenLayers.Icon( <br>
'http://www.openstreetmap.org/openlayers/img/marker.png') <br>
) <br>
); <br>
},
As you already know from the Online Map Services section, the coordinates from the geographical coordinate system (lat/lon) must be converted to the Spherical Mercator system. Finally, the marker ll is placed on the determined location. The Geolocation specification includes another call, particularly suitable for moving objects: navigator.geolocation.watchPosition(). The next example demonstrates how a change in location can be represented graphically using the Google Maps API.