HTML5 Guidelines for Web Developers

(coco) #1

186 Chapter 7—Geolocation


7.1 Introduction to Geolocation


This section introduces you to the basics of geolocation. It covers geographical
data and online map services.

7.1.1 About Geographical Data


You may already have come across a coordinate in the format N47 16 06.6
E11 23 35.9. The position is specified in degrees-minutes-seconds. In this exam-
ple, the desired location is at a latitude of 47 degrees, 16 minutes, and 6.6 seconds
north, and a longitude of 11 degrees, 23 minutes, and 35.9 seconds east. These
kinds of coordinates are referred to as geographical coordinates. Unfortunately,
the great drawback with these values is that they are very difficult to calculate
with, not just because we are used to thinking in decimal numbers. Because the
coordinates specify a position on the spheroid Earth, the curvature of the plan-
et’s surface has to be taken into account when calculating distances.
To simplify the situation, projected coordinates are used in practice. The spher-
oid Earth is divided into strips where the linear distance between points can be
measured. Many countries use their own coordinate system, adapted to local
requirements. In Austria, for example, data is referenced in the Bundesmelde-
netz, a Cartesian coordinate system. All common coordinate systems have a
numeric identifier, the EPSG code (administrated by the European Petroleum
Survey Group).
Obviously, the Geolocation API cannot take into account every existing coordi-
nate system. The x and y coordinates are therefore not projected but are speci-
fied in geographical coordinates in decimal degrees. The standard specifies the
widely used World Geodetic System 1984 (WGS84) as a geodetic reference system.
It basically describes the underlying reference ellipsoid. The y value is specified
in meters above this ellipsoid. Any point on or near Earth can be described with
sufficient accuracy using this system.

7.1.2 Online Map Services


To represent geographical data in a browser, you have several options: SVG is
very well suited due to its flexible coordinate system, and data can be drawn as
a raster image using canvas. The easiest solution is to use an existing JavaScript
library. Of the free libraries available online, we will look closer at Google Maps
and OpenStreetMap. Microsoft’s map service Bing Maps can only be used after
registering, so we will not discuss it here.
The two libraries introduced in this chapter use a mixture of raster and vector
data for display. To enable faster loading times, the raster images are subdivided
Free download pdf