Marker animated over linestring

Copy

var map;

function initMap() {
  map = new cercalia.Map({
    target: 'map'
  });

var feature = new cercalia.Feature({
    wkt: 'LINESTRING (2.1377298647720666 41.4232722601493, 2.137577151173766 41.4233669207143, 2.1373795218112597 41.42344805823078, 2.1370920609203417 41.42352919564512, 2.1365440885970286 41.42356976431398, 2.136391374998728 41.423590048638836, 2.1363195097759986 41.42361709439538, 2.1362206950947455 41.4236982315969, 2.1361667961776987 41.423819937207675, 2.136157813024857 41.42432028008173, 2.1360769646492868 41.4244825526121, 2.1360050994265567 41.42456368872405, 2.1358164532168917 41.424665108720355, 2.135106784142437 41.42491527736216, 2.135088817836755 41.42486794823414, 2.135834419522574 41.424611018075524, 2.1359871331208744 41.424509597994096, 2.1360410320379213 41.424448745868624, 2.1361128972606513 41.424239143663335, 2.1361128972606513 41.423786130116625, 2.136184762483381 41.42364414014057, 2.136274594011793 41.42358328719792, 2.136364425540205 41.423542718537576, 2.1371369766845474 41.42346158114026, 2.1372896902828478 41.4234210124033, 2.137631050090813 41.42325873720009, 2.1378196963004785 41.423103223080275, 2.1379274941345727 41.42299503912344, 2.138008342510143 41.42286657043883, 2.1380891908857143 41.42269077077123, 2.138179022414126 41.42257582457546, 2.1383946180823146 41.42204842175494, 2.1386281800561857 41.42235945470963, 2.1386820789732326 41.422467639733334, 2.1388527588772157 41.42300180062606, 2.1387000452789153 41.423170837961095, 2.138547331680615 41.42333987485277, 2.1383407191652677 41.42355624142719, 2.137900544676049 41.42388078992687, 2.137855628911843 41.423934881184586, 2.137837662606161 41.42410391607234, 2.1378735952175254 41.424239143663335, 2.1378735952175254 41.4243338028082, 2.1378466457590015 41.424428461814045, 2.137720881619225 41.424624540740986, 2.137352572352736 41.42507078710951, 2.1387988599601684 41.42468539270046, 2.139050388239722 41.424611018075524, 2.139292933366434 41.42452988202315, 2.139427680659052 41.42450283664966, 2.139643276327241 41.424509597994096, 2.139930737218159 41.424577211399445, 2.1407931198909136 41.42486794823414, 2.1409278671835317 41.42516544503286, 2.141314142755703 41.42506402582394, 2.141691435175033 41.4249490838609, 2.1417902498562866 41.42493556126354, 2.1419249971489043 41.42488823215041, 2.1420327949829985 41.42481385775955, 2.1422304243455055 41.424753005921374, 2.142365171638123 41.42471243799734, 2.1424729694722173 41.42468539270046, 2.142589750459153 41.42465834739223, 2.1426975482932473 41.42463130207265, 2.1430389081012127 41.42450283664966, 2.14331738583929 41.424421700461096, 2.1434521331319076 41.424401416397984, 2.143559930966002 41.4243811323285, 2.1438833244682853 41.42437437097058, 2.1441618022063618 41.42438789368571, 2.1446738419183102 41.42444198451781, 2.144862488127975 41.424448745868624, 2.145078083796164 41.424414939107436, 2.1455092751325413 41.42432704144532, 2.145940466468919 41.424239143663335, 2.146236910512678 41.424212098167835, 2.146515388250755 41.424212098167835, 2.1467669165303085 41.424239143663335, 2.1472340404780508 41.42438789368571, 2.147611332897381 41.42446226856814, 2.1478718443297757 41.424577211399445, 2.148186254679217 41.42474624460248, 2.148527614487183 41.42497612904711, 2.1490666036576545 41.42536828297187, 2.1498481379548386 41.42573338965325, 2.1500188178588213 41.42578747935607, 2.150153565151439 41.425807762982906, 2.1502703461383748 41.42585509142072, 2.1503511945139455 41.42591594221827, 2.150423059736675 41.42603764364099, 2.150414076583834 41.42617962834366, 2.1509440826014643 41.42622019534412, 2.1513213750207947 41.426281045796905, 2.151563920147507 41.42636217964459, 2.1516986674401246 41.42641626881963, 2.1518603641912666 41.42649740249706, 2.151932229413996 41.42657853607235, 2.1522107071520726 41.426815175083476, 2.15286647730948 41.42710590182184, 2.153504281161205 41.42731549470328, 2.1542408996941833 41.42771439540074, 2.15429479861123 41.4277684834408, 2.154420562751007 41.42782257143545, 2.1548158214760194 41.4280997716955, 2.154995484532843 41.42821470803897, 2.155372776952174 41.428404014510726, 2.156271092236293 41.42876234309532, 2.1564417721402758 41.4288569955963, 2.1565495699743704 41.42889756091129, 2.1566843172669885 41.42893136532095, 2.157681447232361 41.4292423650577, 2.157834160830661 41.429296451815226, 2.1582204364028326 41.42941814685364, 2.1590918022284282 41.42967505784664, 2.1594870609534413 41.429708861848404, 2.1599272354426593 41.42970210104947, 2.1602326626392605 41.42968857944946, 2.160654870822796 41.429648014632455, 2.1610141969364443 41.429600688980315, 2.1614813208841865 41.42954660247818, 2.16195742798477 41.429560124107965, 2.1619753942904523 41.429648014632455, 2.1621640405001172 41.42978999138029, 2.1624065856268295 41.42995901091031, 2.162981507408666 41.43037141670287, 2.1629994737143488 41.43037141670287, 2.1631252378541252 41.43044578467963, 2.16331388406379 41.430533673996045, 2.163439648203567 41.4305742382555, 2.16383490692858 41.43069593088063, 2.1640864352081333 41.430709452269234, 2.164319997182004 41.43068917018527, 2.1643828792518924 41.4306621273967, 2.164553559155875 41.43056747754736, 2.1653081439945354 41.43013479075121, 2.1661795098201315 41.42964125382713, 2.1663232402655908 41.429560124107965, 2.167077825104251 41.42922208251193, 2.167580881663358 41.42903277844351, 2.167913258318482 41.4296344930211, 2.1674964400266505 41.4297913435383)'
  });

var marker = new cercalia.Marker({
    position: new cercalia.LonLat(2.1377298647720666, 41.4232722601493)
  });

map.addFeature(feature);
  map.addMarker(marker);
  map.centerToFeatures([feature]);

setTimeout(function() {
    animateMarker(marker, feature, 200);
  }, 1000);

}

/**
 * 
 * @param {cercalia.Marker} marker Marker
 * @param {cercalia.Feature} feature Feature (only LineString)
 * @param {number} speed in Km/h
 */
function animateMarker(marker, feature, speed) {

var speedMs = speed * 1000 / 3600; // in m/s
  var olFeature = feature.getFeature();
  var geometry = olFeature.getGeometry();
  if (geometry.getType() === 'LineString') {
    var distance = olFeature.getGeometry().getLength(); // Distance in meters
    var timeMs = (distance / speedMs) * 1000; // Time travel in ms
    var numSteps = 2000;
    var intervalTime = timeMs / numSteps;

var stepPerc = 1 / numSteps;
    var stepPercAct = stepPerc;
    var coords = [];
    for (var i = 0; i < numSteps; i++) {
      var wktRes = cercalia.Util.getPartialLinestring(feature, 0, stepPercAct);
      var partialGeometry = cercalia.Util.wktToGeometry(wktRes);
      var coordinate = partialGeometry.getLastCoordinate();
      coords.push(coordinate);
      stepPercAct += stepPerc;
    }

document.addEventListener('cercalia-ready', initMap);

<!DOCTYPE html>
<html>
  <head>
    <title>Marker animated over linestring</title>
    <script src="https://maps.cercalia.com/maps/loader.js?key=YOUR_API_KEY&v=5&lang=en&theme=1976d2"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var map;

      function initMap() {
        map = new cercalia.Map({
          target: 'map'
        });

        var feature = new cercalia.Feature({
          wkt: 'LINESTRING (2.1377298647720666 41.4232722601493, 2.137577151173766 41.4233669207143, 2.1373795218112597 41.42344805823078, 2.1370920609203417 41.42352919564512, 2.1365440885970286 41.42356976431398, 2.136391374998728 41.423590048638836, 2.1363195097759986 41.42361709439538, 2.1362206950947455 41.4236982315969, 2.1361667961776987 41.423819937207675, 2.136157813024857 41.42432028008173, 2.1360769646492868 41.4244825526121, 2.1360050994265567 41.42456368872405, 2.1358164532168917 41.424665108720355, 2.135106784142437 41.42491527736216, 2.135088817836755 41.42486794823414, 2.135834419522574 41.424611018075524, 2.1359871331208744 41.424509597994096, 2.1360410320379213 41.424448745868624, 2.1361128972606513 41.424239143663335, 2.1361128972606513 41.423786130116625, 2.136184762483381 41.42364414014057, 2.136274594011793 41.42358328719792, 2.136364425540205 41.423542718537576, 2.1371369766845474 41.42346158114026, 2.1372896902828478 41.4234210124033, 2.137631050090813 41.42325873720009, 2.1378196963004785 41.423103223080275, 2.1379274941345727 41.42299503912344, 2.138008342510143 41.42286657043883, 2.1380891908857143 41.42269077077123, 2.138179022414126 41.42257582457546, 2.1383946180823146 41.42204842175494, 2.1386281800561857 41.42235945470963, 2.1386820789732326 41.422467639733334, 2.1388527588772157 41.42300180062606, 2.1387000452789153 41.423170837961095, 2.138547331680615 41.42333987485277, 2.1383407191652677 41.42355624142719, 2.137900544676049 41.42388078992687, 2.137855628911843 41.423934881184586, 2.137837662606161 41.42410391607234, 2.1378735952175254 41.424239143663335, 2.1378735952175254 41.4243338028082, 2.1378466457590015 41.424428461814045, 2.137720881619225 41.424624540740986, 2.137352572352736 41.42507078710951, 2.1387988599601684 41.42468539270046, 2.139050388239722 41.424611018075524, 2.139292933366434 41.42452988202315, 2.139427680659052 41.42450283664966, 2.139643276327241 41.424509597994096, 2.139930737218159 41.424577211399445, 2.1407931198909136 41.42486794823414, 2.1409278671835317 41.42516544503286, 2.141314142755703 41.42506402582394, 2.141691435175033 41.4249490838609, 2.1417902498562866 41.42493556126354, 2.1419249971489043 41.42488823215041, 2.1420327949829985 41.42481385775955, 2.1422304243455055 41.424753005921374, 2.142365171638123 41.42471243799734, 2.1424729694722173 41.42468539270046, 2.142589750459153 41.42465834739223, 2.1426975482932473 41.42463130207265, 2.1430389081012127 41.42450283664966, 2.14331738583929 41.424421700461096, 2.1434521331319076 41.424401416397984, 2.143559930966002 41.4243811323285, 2.1438833244682853 41.42437437097058, 2.1441618022063618 41.42438789368571, 2.1446738419183102 41.42444198451781, 2.144862488127975 41.424448745868624, 2.145078083796164 41.424414939107436, 2.1455092751325413 41.42432704144532, 2.145940466468919 41.424239143663335, 2.146236910512678 41.424212098167835, 2.146515388250755 41.424212098167835, 2.1467669165303085 41.424239143663335, 2.1472340404780508 41.42438789368571, 2.147611332897381 41.42446226856814, 2.1478718443297757 41.424577211399445, 2.148186254679217 41.42474624460248, 2.148527614487183 41.42497612904711, 2.1490666036576545 41.42536828297187, 2.1498481379548386 41.42573338965325, 2.1500188178588213 41.42578747935607, 2.150153565151439 41.425807762982906, 2.1502703461383748 41.42585509142072, 2.1503511945139455 41.42591594221827, 2.150423059736675 41.42603764364099, 2.150414076583834 41.42617962834366, 2.1509440826014643 41.42622019534412, 2.1513213750207947 41.426281045796905, 2.151563920147507 41.42636217964459, 2.1516986674401246 41.42641626881963, 2.1518603641912666 41.42649740249706, 2.151932229413996 41.42657853607235, 2.1522107071520726 41.426815175083476, 2.15286647730948 41.42710590182184, 2.153504281161205 41.42731549470328, 2.1542408996941833 41.42771439540074, 2.15429479861123 41.4277684834408, 2.154420562751007 41.42782257143545, 2.1548158214760194 41.4280997716955, 2.154995484532843 41.42821470803897, 2.155372776952174 41.428404014510726, 2.156271092236293 41.42876234309532, 2.1564417721402758 41.4288569955963, 2.1565495699743704 41.42889756091129, 2.1566843172669885 41.42893136532095, 2.157681447232361 41.4292423650577, 2.157834160830661 41.429296451815226, 2.1582204364028326 41.42941814685364, 2.1590918022284282 41.42967505784664, 2.1594870609534413 41.429708861848404, 2.1599272354426593 41.42970210104947, 2.1602326626392605 41.42968857944946, 2.160654870822796 41.429648014632455, 2.1610141969364443 41.429600688980315, 2.1614813208841865 41.42954660247818, 2.16195742798477 41.429560124107965, 2.1619753942904523 41.429648014632455, 2.1621640405001172 41.42978999138029, 2.1624065856268295 41.42995901091031, 2.162981507408666 41.43037141670287, 2.1629994737143488 41.43037141670287, 2.1631252378541252 41.43044578467963, 2.16331388406379 41.430533673996045, 2.163439648203567 41.4305742382555, 2.16383490692858 41.43069593088063, 2.1640864352081333 41.430709452269234, 2.164319997182004 41.43068917018527, 2.1643828792518924 41.4306621273967, 2.164553559155875 41.43056747754736, 2.1653081439945354 41.43013479075121, 2.1661795098201315 41.42964125382713, 2.1663232402655908 41.429560124107965, 2.167077825104251 41.42922208251193, 2.167580881663358 41.42903277844351, 2.167913258318482 41.4296344930211, 2.1674964400266505 41.4297913435383)'
        });

        var marker = new cercalia.Marker({
          position: new cercalia.LonLat(2.1377298647720666, 41.4232722601493)
        });

        map.addFeature(feature);
        map.addMarker(marker);
        map.centerToFeatures([feature]);

        setTimeout(function() {
          animateMarker(marker, feature, 200);
        }, 1000);

      }


      /**
       * 
       * @param {cercalia.Marker} marker Marker
       * @param {cercalia.Feature} feature Feature (only LineString)
       * @param {number} speed in Km/h
       */
      function animateMarker(marker, feature, speed) {

        var speedMs = speed * 1000 / 3600; // in m/s
        var olFeature = feature.getFeature();
        var geometry = olFeature.getGeometry();
        if (geometry.getType() === 'LineString') {
          var distance = olFeature.getGeometry().getLength(); // Distance in meters
          var timeMs = (distance / speedMs) * 1000; // Time travel in ms
          var numSteps = 2000;
          var intervalTime = timeMs / numSteps;

          var stepPerc = 1 / numSteps;
          var stepPercAct = stepPerc;
          var coords = [];
          for (var i = 0; i < numSteps; i++) {
            var wktRes = cercalia.Util.getPartialLinestring(feature, 0, stepPercAct);
            var partialGeometry = cercalia.Util.wktToGeometry(wktRes);
            var coordinate = partialGeometry.getLastCoordinate();
            coords.push(coordinate);
            stepPercAct += stepPerc;
          }

          var pos = 0;
          var intervalId = setInterval(function() {
            var coordAct = coords[++pos];
            if (coordAct) {
              marker.setPosition(new cercalia.LonLat(coordAct[0], coordAct[1]));
            } else {
              clearInterval(intervalId);
              intervalId = undefined;
            }
          }, intervalTime);
        } else {
          console.error('Feature is not a LineString');
        }
      }


      document.addEventListener('cercalia-ready', initMap);
    </script>
  </body>
</html>