Path layer not removed from map

[echerost]

Not an issue (or yes, i don't know) but this is the only way I have to reach you.
Using clear() function the path entered in the map (with loadData() ) is not deleted.
How can I remove it?

Thank you for your job!!
(answer in Italian if you can :) )

[Raruto]

In version 0.4.0 I solved a small bug that did not allow the correct behavior of the function mentioned above.

Using clear() function the path entered in the map (with loadData() ) is not deleted.

Currently the clear() function should only remove what is related to the elevation chart control, which is why the layer/path is still visible on the map.

How can I remove it?

There are several ways, the simplest is doing something like this:

  var controlElevation = L.control.elevation( <Elevation options> );
  ...
  controlElevation.clear();        // clear the elevation diagram
  ...
  controlElevation.layer.remove(); // see: https://leafletjs.com/reference-1.5.0.html#layer-remove

maybe it's not the best way to do this, but at least it should work the way you think

[echerost]

Thank you, it works :)

[satishverma2020]

Hi we try same above code but unable to remove layer,

this is my code

var opts = {
  map: {
    center: [41.4583, 12.7059],
    maxZoom: 19,
    minZoom: 2,
    zoomControl: false
  },
  elevationControl: {
    url: "http://localhost/gps/play/via-emilia.gpx",
    options: {
      theme: "steelred-theme",
      useHeightIndicator: true,
      collapsed: true,
      detachedView: true,
      elevationDiv: "#elevation-div ",
      followPositionMarker: true,
      imperial: false,
      summary: 'multiline',
    },
  },
  layersControl: {
    options: {
      collapsed: false,
    },
  },
  googleStreets:{
    url:'https://mt0.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z}&s=Ga',  
    options: {
      maxZoom: 20,
      minZoom: 2,
      subdomains:['mt0','mt1','mt2','mt3']
    }
  }, 
};

var map = new L.Map('map', opts.map);

var baseLayers = {};
baseLayers.OTM = new L.TileLayer(opts.googleStreets.url, opts.googleStreets.options);

var controlZoom = new L.Control.Zoom(opts.zoomControl);
var controlElevation = L.control.elevation(opts.elevationControl.options);
var controlLayer = L.control.layers(baseLayers, null, opts.layersControl.options);
		 
controlElevation.addTo(map);
controlElevation.loadData(opts.elevationControl.url);
map.addLayer(baseLayers.OTM);

controlLayer.addTo(map);
	
// var layer = L.marker(latlng).addTo(map);
// layer.addTo(map);
// layer.remove();
 

window.onload = function() {
  const admincheckbox = document.getElementById("admincheckbox");
  admincheckbox.addEventListener('click', function() {
    if(admincheckbox.checked){
      //  map.removeLayer(clusterGroup);
      controlElevation.removeLayer();
    } else {
      // clusterGroup.addTo(map);
      controlElevation.addTo(map);
    }
  });
}
  
map.on('eledata_loaded', function(e) {
  var q = document.querySelector.bind(document);
  var track = e.track_info;

  controlLayer.addOverlay(e.layer, e.name);
  q('.totlen .summaryvalue').innerHTML = track.distance.toFixed(2) + " km";
  q('.maxele .summaryvalue').innerHTML = track.elevation_max.toFixed(2) + " m";
  q('.minele .summaryvalue').innerHTML = track.elevation_min.toFixed(2) + " m";
});

[Raruto]

Did you check these lines?

 controlElevation.layer.remove();   // remove layer from map
 controlElevation.layer.addTo(map); // attach layer to map

[satishverma2020]

Thanks for your quick response, we try below lines is working, but gpx lines is still on map only graph charts is remove/add working . so how we remove complete layer.

controlElevation.layer.remove();    // is working 
controlElevation.layer.addTo(map);  // is not working 
controlElevation.addTo(map);        // this is working 

[Raruto]

The answer is already present in the previous two comments: #1 #2 (you can test them here)

---

controlElevation.layer.addTo(map);  // is not working 

Does the browser console return any errors?