Hands on: Geolocation using HTML5

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

This article is an excerpt from the book HTML5 Guidelines for Web Developers published by Pearson/Addison-Wesley Professional.

The Geolocation API was removed from the core of the HTML5 specification and is, according to the W3C nomenclature, just in its early stages. But it is already largely implemented, particularly in mobile browsers. One reason for the rapid implementation is most likely because the interface is short and abstract: Only three JavaScript calls cover the whole range of functions. The specification does not state how the browser has to determine locations, only the format in which the result should be returned.

After a brief introduction regarding the nature of geographical data, we will demonstrate the new functions using several brief examples. If you try our examples on a smartphone, you will quickly experience that Aha! Effect.

Introduction to Geolocation

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

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 example, 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 planet's surface has to be taken into account when calculating distances.

To simplify the situation, projected coordinates are used in practice. The spheroid 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 Bundesmeldenetz, 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 coordinate system. The x and y coordinates are therefore not projected but are specified 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.

1 2 3 4 5 6 7 8 9 Page 1
Page 1 of 9
It’s time to break the ChatGPT habit
Shop Tech Products at Amazon