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:

leaflet-elevation/src/control.js

Lines 340 to 369 in ea15556

	/*
	* Parsing of GeoJSON data lines and their elevation in z-coordinate
	*/
	_addGeoJSONData(coords, properties, nestingLevel) {
	// "coordinateProperties" property is generated inside "@tmcw/toGeoJSON"
	let props = (properties && properties.coordinateProperties) || properties;
	coords.forEach((point, i) => {
	// GARMIN_EXTENSIONS = ["hr", "cad", "atemp", "wtemp", "depth", "course", "bearing"];
	point.meta = point.meta ?? { time: null, ele: null };
	point.prev = (attr) => (attr ? this._data[i > 0 ? i - 1 : 0][attr] : this._data[i > 0 ? i - 1 : 0]);
	this.fire("elepoint_init", { point: point, props: props, id: i, isMulti: nestingLevel });
	this._addPoint(
	point.lat ?? point[1],
	point.lng ?? point[0],
	point.alt ?? point.meta.ele ?? point[2]
	);
	this.fire("elepoint_added", { point: point, index: this._data.length - 1 });
	if (this._yCoordMax < this._data[this._data.length - 1][this.options.yAttr]) this._yCoordMax = this._data[this._data.length - 1][this.options.yAttr];
	});
	this.fire("eletrack_added", { coords: coords, index: this._data.length - 1 });
	},

leaflet-elevation/src/control.js

Lines 371 to 387 in ea15556

	/*
	* Parse and push a single (x, y, z) point to current elevation profile.
	*/
	_addPoint(x, y, z) {
	if (this.options.reverseCoords) {
	[x, y] = [y, x];
	}
	this._data.push({
	x: x,
	y: y,
	z: z,
	latlng: L.latLng(x, y, z)
	});
	this.fire("eledata_updated", { index: this._data.length - 1 });
	},

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

leaflet-elevation/src/control.js

Lines 29 to 44 in ea15556

	/*
	* Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
	*/
	addData(d, layer) {
	this.import(this.__D3)
	.then(() => {
	if (this._modulesLoaded) {
	layer = layer ?? (d.on && d);
	this._addData(d);
	this._addLayer(layer);
	this._fireEvt("eledata_added", { data: d, layer: layer, track_info: this.track_info });
	} else {
	this.once('modules_loaded', () => this.addData(d,layer));
	}
	});
	},

👋 Raruto