HTML5 Guidelines for Web Developers

7.1 Introduction to Geolocation 189

For this example, we need to load both the JavaScript library of openlayers.org
and the library of openstreetmap.org. Similar to Google Maps, an HTML div ele-
ment 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 in sec-
tion 7.1.1, 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 Spheri-
cal 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.getProjectionOb-
ject()) with the call transform() and specify the EPSG code of the desired pro-
jection (EPSG:4326).

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.

WARNING