Time for action – track me

Let's bring together what we've learned by expanding our application to track our movement over time and display it on the map. Recall that we covered vector features in Chapters 6, Styling Vector Layers, and Chapter 5, Using Vector Layers. So, here's what we will do:

We need a vector feature to capture our track. Add the following at the beginning of the <script> tag:

var trackStyle = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: 'rgba(0,0,255,1.0)',
    width: 3,
    lineCap: 'round'
  })
});
var trackFeature = new ol.Feature({
  geometry: new ol.geom.LineString([])
});
var trackLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [trackFeature]
  }),
  style: trackStyle
});

We'll need to add trackLayer to the map, so add it to the array of layers where we create the map, as follows:
```
var map = new ol.Map({
  target: 'map',
  layers: [layer, trackLayer],
  view: view
});
```

And finally, we can update trackFeature as we move by modifying what happens when the geolocation object's position changes, as follows:

geolocation.on('change:position', function() {
  var coordinate = geolocation.getPosition();
  view.setCenter(coordinate);
  trackFeature.getGeometry().appendCoordinate(coordinate);
});

Load the application in your mobile device and move around enough to see your location changing. Perhaps go outside for a short walk!

What just happened?

We just created a very simple tracking application that follows our location and renders a line on the map to show where we've been. In step 1, we created a few new objects based on our knowledge of vector layers and features from Chapters 6, Styling Vector Layers, and Chapter 5, Using Vector Layers. First, we created a style object that draws our line in blue. Next, we created a feature object containing a LineString geometry to record our movements in. Lastly, we created a vector layer with a source that references our track feature using our style for blue lines. In step 2, we added the layer to the map. In step 3, we updated the geometry of the track feature by appending the latest position update coordinate to its LineString geometry.

Pop quiz – who does what?

Q1. Which OpenLayers class provides access to a mobile device's location?

ol.GeoLocation.
ol.View.
ol.DeviceOrientation.

Q2. Which OpenLayers class tells you which direction your mobile device is pointing in?

ol.GeoLocation.
ol.View.
ol.DeviceOrientation.

Q3. Which OpenLayers class would you use to center the map on your current location?

ol.GeoLocation.
ol.View.
ol.DeviceOrientation.

Previous Chapter

Going native with web applications

Next Chapter

Summary

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – track me

What just happened?

Pop quiz – who does what?

Table of Contents for
OpenLayers 3 : Beginner's Guide