Raruto / leaflet-elevation

Leaflet plugin that allows to add elevation profiles using d3js
GNU General Public License v3.0
255 stars 85 forks source link

controlElevation.clear() is not removing waypoints #122

Closed riccardoklinger closed 3 years ago

riccardoklinger commented 3 years ago

If I run your basic example https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation.html and call controlElevation.clear() The waypoints reside on the chart. My assumption would be to have no waypoints on the chart after clearance. grafik My goal: I have multiple gpx trcks and onclick they should show the eölevation profile as well as their waypoints.

Raruto commented 3 years ago

Hi Riccardo, thanks for reporting, but honestly I don't know why this happens...

As you can see, for geojson markers on the map, default leaflet objects are being used:

https://github.com/Raruto/leaflet-elevation/blob/22463a371b0d0af8b71688c0fc3004aeb1d8463b/src/control.js#L233 https://github.com/Raruto/leaflet-elevation/blob/22463a371b0d0af8b71688c0fc3004aeb1d8463b/src/utils.js#L93-L113 https://github.com/Raruto/leaflet-elevation/blob/8701a1e917a3cac711cc0862e2fb334015355898/src/control.js#L984-L994 https://github.com/Raruto/leaflet-elevation/blob/8701a1e917a3cac711cc0862e2fb334015355898/src/control.js#L57-L66 https://github.com/Raruto/leaflet-elevation/blob/8701a1e917a3cac711cc0862e2fb334015355898/src/control.js#L144

As always, tips and additional help is welcome.


PS maybe I misread (I meant the markers on the map, not the chart), anyway it could be a related problem:

https://github.com/Raruto/leaflet-elevation/blob/8701a1e917a3cac711cc0862e2fb334015355898/src/utils.js#L110 https://github.com/Raruto/leaflet-elevation/blob/8701a1e917a3cac711cc0862e2fb334015355898/src/control.js#L731-L733 https://github.com/Raruto/leaflet-elevation/blob/8701a1e917a3cac711cc0862e2fb334015355898/src/chart.js#L428-L489 https://github.com/Raruto/leaflet-elevation/blob/8701a1e917a3cac711cc0862e2fb334015355898/src/chart.js#L98-L106

Have a nice day, Raruto

riccardoklinger commented 3 years ago

Hi @Raruto thanks for your quick reply, I was talking about the chart, not the map. And also looked at the chart.js file as well, but I am not a css GURU so itz is hard for me to alter/debug these files... waypoints should stay on the map as they are part of the gpx track. but if I select a new GPX source, my expectation would be to have the chart cleared and to have the new waypoints added.

Raruto commented 3 years ago

In order to avoid editing source code, you can use the technique described here https://github.com/Raruto/leaflet-elevation/issues/32#issuecomment-568525359

To get started, you can try testing the following code snippet:

// Customize default "L.Control.Elevation" behaviour.
L.Control.Elevation.include({

 _customClear: function() {
    this._clearChart();
    this._clearMap();
    this.clear();
  },

  _clearChart: function() {
    if (this._events && this._events.elechart_updated) {
      this._events.elechart_updated.forEach(e => controlElevation.off('elechart_updated', e.fn, e.ctx));
    }
    if (this._chart && this._chart._container) {
      this._chart._container.selectAll('g.point .point').remove();
    }
  },

  _clearMap: function() {
    if (this._layers && this._layers.eachLayer) {
      this._layers.eachLayer(l => l.remove())
    }
  }

});

...

// Instantiate elevation control and then add to map.
var controlElevation = L.control.elevation(elevation_options).addTo(map);

...

// Invoke your custom function
controlElevation._customClear();

For more info on the code, see my previous updated comment.

PS this is just an example, you can certainly do better...

vutle commented 3 years ago

Hi Raruto, thanks for the nice control.

I tried to use the controlElevation.clear() and controlElevation._customClear(), both does not delete the track polyline (see picture below, after delete the polyline is still there.)

image

Raruto commented 3 years ago

Hi vutle,

I updated my previous example to make you understand how you can proceed, please note that you can listen to the waypoint_added event (saving a reference of all the markers in a global variable) if you also want to be able to remove any other markers added on the map:

https://github.com/Raruto/leaflet-elevation/blob/22463a371b0d0af8b71688c0fc3004aeb1d8463b/src/utils.js#L111

More info at: https://gis.stackexchange.com/questions/371255/removing-individual-leaflet-markers-added-through-l-geojson

Have a nice day, Raruto

vutle commented 3 years ago

Thanks Raruto, The example removes the map polyline layers.

I need to commented out the this._events.elechart_updated, because it is null inside my project.

Raruto commented 3 years ago

Patch released in version 1.7.1