Time for action – location, location, location

Let's add another resource to our page, so that we can access some nice icons. In the past, we might have done this by creating images for each of the icons we wanted and then adding <img> tags. We are going to try a different approach this time using an iconic font called Font Awesome. We'll discuss why after the example; for now, just follow these steps:

Add the following <link> tag to the <head> tag of your HTML document, just after the link to ol.css:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Now, add a new <style> section inside the <head> tag:

<style>
.marker {
  position: absolute;
  width: 24px;
  height: 24px;
  font-size: 24px;
}
</style>

Next, we need to add an HTML element for our marker. Add the following new <div> tag just after the map <div> tag:
```
<div class="map"></div>
<div id="location" class="marker icon-flag"></div>
```

Finally, add the following code at the end of the <script> tag, after all the other code:

var marker = new ol.Overlay({
  element: document.getElementById('location')
});
map.addOverlay(marker);
var geolocation = new ol.Geolocation({
  tracking: true
});
geolocation.bindTo('projection', view);
geolocation.bindTo('position', marker);

Reload the page in your mobile web browser, and you should see a flag on the map at your current location. If you don't live near London, England, then you might need to zoom out and pan to see the marker on the map.

What just happened?

Step 1 adds a link to a stylesheet that defines an iconic font, which we'll discuss in more detail in just a moment. In step 2, we created a new CSS class called marker that we can add to the HTML elements we want to be displayed as markers on the map. This class sets the width and height of the element to be 24 pixels and also the font size, as we are using an iconic font for our marker images. In step 3, we added the HTML element we want to use as our marker. We gave it an ID of location, so that we could refer to it later and added both marker and icon-flag to the class. The marker class makes the element a specific size, and the icon-flag class indicates which icon to use from our iconic font. In step 4, the new code we added creates a new ol.Overlay attached to our marker element and adds it to the map. Then, we create an instance of ol.Geolocation and tell it we want to track location updates. Then, we bind the projection property of the geolocation object to the view's projection and position properties to the marker. The geolocation object will now automatically convert location updates into the correct projection for our view and move our marker overlay to our current location.

More about iconic fonts

Iconic fonts are just like any other font, except that the characters in the font are designed as pictures instead of letters. Like text in a web page, the icons in a font are easily resizable and adapt to different resolution displays automatically. Mobile devices such as the iPhone 4 and later sport retina displays have a high pixel density. Normal images on retina devices end up looking blocky. Icon fonts are automatically rendered at a higher resolution on retina devices and are crisp and clear.

FontAwesome (http://fortawesome.github.io/Font-Awesome/) is a popular iconic font (at the time of writing this) and is easy to use in any web application, just by including a single <link> tag and then using icon-specific class names. We'll use a couple more Font Awesome icons in later examples, but if you are interested in what icons are available, visit their site and take a look around.

Font Awesome isn't the only choice for an icon font, and there are many tools on the Web to help you make your own icon fonts from existing vector art.

The Geolocation class in detail

Now that we've seen ol.Geolocation in action, let's take a look at its full capabilities.

Geolocation constructor options

When creating an instance of ol.Geolocation, you can provide the following optional properties to control its initial behavior:

Option	Type	Description
`tracking`	`Boolean`	When tracking is turned on (`true`), the Geolocation API reports changes in location automatically. The default value is `false`.
`trackingOptions`	`Object`	The tracking options support three properties: `enableHighAccuracy`: This is a Boolean value, default value of which is `false`. If `true`, it asks the mobile device to provide the highest-accuracy results. This can result in slower response times and increased power consumption. However, for many devices, it is necessary to enable this option to get any results at all. `timeout`: This is a number value, with the default value of 0. This is the number of milliseconds to wait for a new position. If 0, there is no timeout. If set to a value greater than 0 and a position is not obtained within this time frame, then an error of the type `TIMEOUT` is emitted. `maximumAge`: This is a number value, with the default value of 0. This option allows the device to return a cached location whose age is no more than the specified time in milliseconds. A value of 0 means that the device must get a new position.
`projection`	`String`	The projection in which the coordinates of location updates are reported defaults to `EPSG:4326` (latitude and longitude). Typically, you will need to provide the same projection as the map's view or transform the location using `ol.proj.transform` yourself.

Geolocation KVO properties

The Geolocation class inherits from ol.Object and has the following key-value observing (KVO) properties (recall that we discussed KVO in Chapter 2, Key Concepts in OpenLayers):

Name	Type	Description
`accuracy`	`number`	This is a read-only property. It is the accuracy of the position returned by the device in meters.
`accuracyGeometry`	`ol.geom.Geometry`	This is a read-only property. It is a geometry that can be used to represent the accuracy of the geometry measurement, basically a circle around the location with a radius equivalent to the `accuracy` property. This geometry can be added to a vector layer and styled to visualize the current accuracy of the location.
`altitude`	`number`	This is a read-only property. It is the altitude of the position in meters above mean sea level.
`altitudeAccuracy`	`number`	This is a read-only property. It is the accuracy of the altitude in meters.
`heading`	`number`	This is a read-only property. It is the heading of the device in radians clockwise from north.
`position`	`ol.Coordinate`	This is a read-only property. It is an `ol.Coordinate` array representing the position of the device. If a projection has been set on the Geolocation instance, the coordinate will already have been transformed into this projection.
`projection`	`ol.proj.Projection`	This is the projection in which the coordinates of location updates are reported.
`speed`	`number`	This is a read-only property. It is the instantaneous speed in meters per second.
`tracking`	`boolean`	When tracking is turned on (`true`), the Geolocation API reports changes in location automatically. When off (`false`), the position is not updated in response to moving the device.
`trackingOptions`	`Object`	These are the tracking options; see the Constructor options for details.

Previous Chapter

The Geolocation class

Next Chapter

The DeviceOrientation class