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

Dynamically change "marker" option without creating a new instance of L.Control.Elevation #180

Closed velocat closed 2 years ago

velocat commented 2 years ago

This is my next question on the transition from version 1.5 to the latest versions :)

In previous versions, users had a choice for the type of marker on the line and following the marker.

Makers

setEleMarker = function(){
  if (!isChecked("#ele-marker")) {
    controlElevation._marker.remove();
    opts.elevationControl.options.marker = 'position-marker';
    controlElevation.options.marker = 'position-marker';
  } else {
    controlElevation._marker.remove();
    opts.elevationControl.options.marker = 'elevation-line';
    controlElevation.options.marker = 'elevation-line';
  }
    controlElevation.redraw();      
}

setFollowMarker = function(){
  setEleMarker();
  if (opts.elevationControl.options.followMarker == false){
    opts.elevationControl.options.followMarker = true;
    controlElevation.options.followMarker = true;
  } else {
    opts.elevationControl.options.followMarker = false;
    controlElevation.options.followMarker = false;
  }
  controlElevation.redraw();        
}

Now, when I switch to the marker line, I get errors:

Makers2

PS switching to following works fine, the problem is only with changing the marker type.

As I understand it, the principle of creation has changed.

How do I change options now without deleting and re-creating an instance of the class Elevation?

It's just that if I recreate it again, I will have to completely rewrite my code so that all the data that is processed in it is correct.

PPS for test: https://github.com/velocat/leaflet-elevation/tree/test-chkpoint

Raruto commented 2 years ago

In relation to: https://github.com/Raruto/leaflet-elevation/issues/178#issuecomment-1046104438

A lot has changed, of course, in the latest versions, and there is no backward compatibility, so I had a lot of questions to adapt what was before to the new realities. For which, of course, I apologize, but I want to already provide users with a ready and working product. I still have questions, but I think I will state them separately))

well, that's the price of using third party private attributes (eg. _map) in your own code.


How do I change options now without deleting and re-creating an instance of the class Elevation?

Tested only in latest version (1.7.6), obviously, I can't guarantee it will work forever:

<label>
  <input id="ele-marker" type="checkbox" onclick="setEleMarker()" /> Change Marker
</label>
function setEleMarker() {
  let box  = document.getElementById('ele-marker')
  if (box && controlElevation._marker && controlElevation._map) {
    controlElevation._marker.remove();
    controlElevation.options.marker = opts.elevationControl.options.marker = (box.checked ? 'position-marker' : 'elevation-line');
    controlElevation._initMarker(controlElevation._map);
    // controlElevation.redraw();
  }
}

Raruto

velocat commented 2 years ago

Wonderful)) What about the other options?
For example, if I want to change dynamic color themes as well?

Raruto commented 2 years ago

@velocat perhaps, open a new issue with an example of your code