Hands on: Geolocation using HTML5

Learn how to use HTML5 to plot points on a map and determine current position

1 2 3 4 5 6 7 8 9 Page 3
Page 3 of 9

OpenStreetMap/OpenLayers

OpenStreetMap was introduced in 2004 with the ambitious aim of becoming a comprehensive and free platform for geodata worldwide. Following the successful method adopted by Wikipedia, it was supposed to be easy for users to record geographical elements in their surrounding area and save them online. Considering the difficulty of editing geodata, the current state of the project is impressive. Thousands of users have uploaded their GPS data to the platform openstreetmap.org or corrected and commented on data on the website. Also, existing geodata with a suitable license was integrated into the database (for example, the US TIGER data and the Landsat 7 satellite images).

Several tools were created in association with the project, with which you can download data from the OpenStreetMap servers and -- provided you have permission -- upload and save that data to the server. The open interface makes it easy for software developers to integrate their products into the system.

A significant factor in the success of OpenStreetMap is the simple option for web developers to integrate maps into their websites through the OpenLayers project. This JavaScript library is not limited to Open-StreetMap but can definitely show its strength through this interaction. With OpenLayers, you can also access maps by Google, Microsoft, Yahoo, and countless other geographic services (based on the standards WMS and WFS).

A mini example of a road map in Central Europe with OpenLayers and OpenStreetMap is provided below:

Road map of Central Europe with OpenStreetMap and OpenLayers

<!DOCTYPE html> <br>  <html> <br>  <head> <br>  <title>Geolocation - OpenLayers / OpenStreetMap</title><br>  <script src= <br>  "http://www.openlayers.org/api/OpenLayers.js"></script> <br>  <script src= <br>  "http://www.openstreetmap.org/openlayers/OpenStreetMap.js"> <br>  </script> <br>  <script> <br>   window.onload = function() { <br>     var map = new OpenLayers.Map("map"); <br>     map.addLayer(new <br>       OpenLayers.Layer.OSM.Osmarender("Osmarender")); <br>     var lonLat = new OpenLayers.LonLat(11, 47).transform( <br>         new OpenLayers.Projection("EPSG:4326"), <br>         map.getProjectionObject() <br>     ); <br>     map.setCenter (lonLat,7); <br>   } <br>  </script> <br>  <body> <br>   <div id="map" style="top: 0; left: 0; bottom: 0; <br>     right: 0; position: fixed;"></div> <br>  </body> <br> </html>

For this example, we need to load both the JavaScript library of openlayers.org and the library of open-streetmap.org. Similar to Google Maps, an HTML div element is assigned to the OpenLayers.Map object for representation, and a layer of the type Osmarender is added -- the standard map view of OpenStreetMap (OSM). Here, a special feature of OpenStreetMap comes into play: As mentioned previously, About Geographical Data, three-dimensional information must be projected to be displayed in 2D on the screen.

Although Google Maps does not harass the user with these details and you simply specify the x and y coordinates in decimal degrees, OpenLayers asks you to first project data in decimal degrees into the relevant coordinate system. Internally, OpenLayers (just like Google Maps, Yahoo! Maps, and Microsoft Bing Maps) creates the map representation with a projection, the so-called Spherical Mercator (EPSG code 3785). In Spherical Mercator, coordinates are managed in meters instead of decimal degrees, which is why the degree values used here must be converted to the coordinate system used in the map (determined with the function map.getProjectionObject()) with the call transform() and specify the EPSG code of the desired projection (EPSG:4326).

Warning: If you use DOCTYPE at the beginning of the document, as is correct with HTML5, the HTML element in which the map is displayed must contain a position of fixed or absolute. Otherwise, the OpenLayers library displays nothing. Interestingly, this limitation does not apply if no DOCTYPE is included. More information on this topic can be found in a posting on the mailing list at http://openlayers.org/pipermail/users/2009-July/012860.html.

1 2 3 4 5 6 7 8 9 Page 3
Page 3 of 9
7 inconvenient truths about the hybrid work trend
Shop Tech Products at Amazon