188 Chapter 7—Geolocation
map is set to 47 degrees north and 11 degrees east with a zoom level of 7 (zoom
level 0 is equivalent to a view of the whole Earth), and the map type is specified
as road map via the constant google.maps.MapTypeId.ROADMAP.Because the map object’s constructor contains a reference to the content of
the HTML page, it can only be called once the website is loaded; that is, at
window.onload.7.1.2.2 OpenStreetMap/OpenLayers
OpenStreetMap was introduced in 2004 with the ambitious aim of becoming
a comprehensive and free platform for geodata worldwide. Following the suc-
cessful 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 ex-
ample, 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 per-
mission – 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 proj-
ect. This JavaScript library is not limited to OpenStreetMap but can definitely
show its strength through this interaction. With OpenLayers, you can also ac-
cess 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 Open-
StreetMap is provided in Listing 7.2:Listing 7.2 Road map of Central Europe with OpenStreetMap and OpenLayers
<!DOCTYPE html>
<html>
<head>
<title>Geolocation - OpenLayers / OpenStreetMap</title>
<script src=
"http://www.openlayers.org/api/OpenLayers.js"></script>
<script src=
"http://www.openstreetmap.org/openlayers/OpenStreetMap.js">