Updating a track continuously (live tracking)

[jarod46]

Hello, I searching for a solution from hours, so I finally decided to ask for help. I try to found a way to load and update a track continuously, for a live tracking purpose, that work almost perfect, but I don't like the behavior which create a track segment at each time I add new points. I was able to hide this on the chart by css overriding, but that sill to show correctly the distance markers.

Expected behaviour

A way to add new datas to the actual track and update the entire track on the map

Actual behaviour

Adding new datas create a new track segment, resulting of unwanted distance markers display

So, there is actually a way to do that, or it's just not possible yet ? Thanks.

[Raruto]

Hi @jarod46,

talk is cheap, show me the code..

👋 Raruto

[jarod46]

Ha, it's a generaly question, I'm not sure what I need to share, basically I have a timer which regularly call an ajax function which query if there is new locations to add to the current track.

I tried with several functions like controlElevation.load, controlElevation._addData, controlElevation.addData, controlElevation.loadLayer...

function updateLocations(data) {
  if (data && Array.isArray(data) && data.length > 0) {

    var newFeature = {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": []
      },
      "properties": {
        "name": "KTrackPlus",
        "description": "",
        "coordTimes": [],
      }
    };

    for (var i = 0; i < data.length; i++) {

      if (i > 1000) break;

      var newCoords = [Number(data[i].lng), Number(data[i].lat), Number(data[i].alt), Number(data[i].timestamp)];
      newFeature.geometry.coordinates.push(newCoords);
      var date = new Date(Number(data[i].timestamp) * 1000);
      newFeature.properties.coordTimes.push(date.toISOString());
      mostRecentTT = data[i].timestamp;
      locs.push(newCoords);

    }
    controlElevation._loadLayer(newFeature);
    /*if (firstTime) {
      //var jsonStr = JSON.stringify(newFeature);
      //controlElevation.load(jsonStr);
      trackLayer = controlElevation._loadLayer(newFeature);

    }
    else {
      controlElevation.addData(newFeature, trackLayer);
      controlElevation._initMapIntegrations(trackLayer);

    }*/


    controlElevation.redraw();

  }
}

Full page (witthout php part) https://pastebin.com/DemqTPUj

[Raruto]

I tried with several functions like controlElevation.load, controlElevation._addData, controlElevation.addData, controlElevation.loadLayer...

I think you are already on the right path: addData → _addData → _addGeoJSONData → _addPoint ...

You probably just need to dive a little deeper into the code's flow and choose the one that's right for you:

https://github.com/Raruto/leaflet-elevation/blob/ea155564475c44941cb81a9df3eaf8d633ed90fc/src/control.js#L340-L369

https://github.com/Raruto/leaflet-elevation/blob/ea155564475c44941cb81a9df3eaf8d633ed90fc/src/control.js#L371-L387

NB: As you go further and further down, you will have to handle everything else by yourself, eg: _addLayer, _fireEvt, ...

https://github.com/Raruto/leaflet-elevation/blob/ea155564475c44941cb81a9df3eaf8d633ed90fc/src/control.js#L29-L44

👋 Raruto