Use ol.geom.LineString#getCoordinateAtM in igc example

examples/igc.js

@@ -1,4 +1,6 @@
 goog.require('ol.Attribution');
+goog.require('ol.Feature');
+goog.require('ol.FeatureOverlay');
 goog.require('ol.Map');
 goog.require('ol.View2D');
 goog.require('ol.geom.LineString');
@@ -8,6 +10,7 @@ goog.require('ol.layer.Vector');
 goog.require('ol.source.IGC');
 goog.require('ol.source.OSM');
 goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
@@ -47,6 +50,19 @@ var vectorSource = new ol.source.IGC({
   ]
 });
 
+var time = {
+  start: Infinity,
+  stop: -Infinity,
+  duration: 0
+};
+vectorSource.on('addfeature', function(event) {
+  var geometry = event.feature.getGeometry();
+  time.start = Math.min(time.start, geometry.getFirstCoordinate()[2]);
+  time.stop = Math.max(time.stop, geometry.getLastCoordinate()[2]);
+  time.duration = time.stop - time.start;
+});
+
+
 var map = new ol.Map({
   layers: [
     new ol.layer.Tile({
@@ -137,3 +153,34 @@ map.on('postcompose', function(evt) {
     vectorContext.drawLineStringGeometry(line);
   }
 });
+
+var featureOverlay = new ol.FeatureOverlay({
+  map: map,
+  style: new ol.style.Style({
+    image: new ol.style.Circle({
+      radius: 5,
+      fill: new ol.style.Fill({
+        color: 'rgba(255,0,0,0.9)'
+      }),
+      stroke: null
+    })
+  })
+});
+
+$('#time').on('input', function(event) {
+  var value = parseInt($(this).val(), 10) / 100;
+  var m = time.start + (time.duration * value);
+  vectorSource.forEachFeature(function(feature) {
+    var geometry = /** @type {ol.geom.LineString} */ (feature.getGeometry());
+    var coordinate = geometry.getCoordinateAtM(m, true);
+    var highlight = feature.get('highlight');
+    if (highlight == undefined) {
+      highlight = new ol.Feature(new ol.geom.Point(coordinate));
+      feature.set('highlight', highlight);
+      featureOverlay.addFeature(highlight);
+    } else {
+      highlight.getGeometry().setCoordinates(coordinate);
+    }
+  });
+  map.render();
+});