O'Reilly logo

OpenLayers 3 : Beginner's Guide by Erik Hazzard, Paul Spencer, Thomas Gratier

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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:

  1. 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
    });
  2. We'll need to add trackLayer ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required