Dinamically change options & redraw the graph

[velocat]

I have a few questions. I would be very grateful if you answer)))

1. How can you dynamically change some options? For example, I want to attach to a button an enable / disable useLeafletMarker and followMarker. I understand how to change the options, but I cannot reinitialize.

2. How to turn on Slope when adding to the map, but hide this graph, with the ability to turn it on in the legend?

3. I also want to show graphs under the map, in normal mode, and overlaid on the map if full screen is enabled. For this, too, as I understand it, you need to change some options and reinitialize?

[Raruto]

Hi velocat,

How can you dynamically change some options? For example, I want to attach to a button an enable / disable useLeafletMarker and followMarker. I understand how to change the options, but I cannot reinitialize.

I'm not sure, but you can try to take a look at the following function:

https://github.com/Raruto/leaflet-elevation/blob/2b35b0814cc778e9dec8f2d1f5a88bacdf5b0ae4/src/control.js#L293

How to turn on Slope when adding to the map, but hide this graph, with the ability to turn it on in the legend?

Essentially it uses a .hidden class to hide some graphics, you should be able to succeed in your intent by hooking once some of these events:

• the following function is responsible for creating the svg "legend item":

https://github.com/Raruto/leaflet-elevation/blob/2b35b0814cc778e9dec8f2d1f5a88bacdf5b0ae4/src/slope.js#L79

• the following functions are responsible for toggling the "elevation paths":

https://github.com/Raruto/leaflet-elevation/blob/2b35b0814cc778e9dec8f2d1f5a88bacdf5b0ae4/src/control.js#L822

https://github.com/Raruto/leaflet-elevation/blob/2b35b0814cc778e9dec8f2d1f5a88bacdf5b0ae4/src/control.js#L803

I also want to show graphs under the map, in normal mode, and overlaid on the map if full screen is enabled. For this, too, as I understand it, you need to change some options and reinitialize?

~The fullscreen element should be the parent of both the elements (map and graph), eg:~

<div class="parent-container fullscreen-element">
  <div class="leaflet-map">...</div>
  <div class="elevation-div">...</div>
</div>

~The leaflet.fullscreen plugin should allow you to specify the fullscreen element.~

UPDATE I must have misunderstood this last question, again, here you can try with the redraw function

[velocat]

I tried what you advised and created two functions that are called by checkboxes:

setEleMarker = function(){
  if (opts.elevationControl.options.marker == 'elevation-line'){
    opts.elevationControl.options.marker = 'position-marker';
    controlElevation.options.marker = 'position-marker';
  } else {
    opts.elevationControl.options.marker = 'elevation-line';
    controlElevation.options.marker = 'elevation-line';
  }
    controlElevation.redraw();      
}

setFollowMarker = function(){
  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();        
}

I end up with strange behavior:

1. changing the marker, I get that the previous marker remains on the map

2. Changing the follow mode does not get anything if the track is fully visible on the map, but if only part of it is visible, and the rest is outside the map, then the follow mode is turned on.

I have a suspicion that I have configured something wrong, but I cannot figure out what exactly. As far as I understand, the default settings are that if the mouse is not over the graph or track line, then the elevation marker is hidden, but I only hide it when clicking on the map or changing the zoom ...

[Raruto]

Hi velocat,

changing the marker, I get that the previous marker remains on the map

I think it is normal behavior, as there is no such function dedicated to what you want to do, you can take care of it by doing it this way:

  controlElevation._marker.remove();
  controlElevation.redraw();        

Changing the follow mode does not get anything if the track is fully visible on the map, but if only part of it is visible, and the rest is outside the map, then the follow mode is turned on.

In the latest versions I have changed the default behavior, to make it work the way you want you may have to do this:

  followMarker: true
  zFollow: 15 // insert a default zoom level here (default: false)

Have a nice day, Raruto

[velocat]

Thanks, your tips for displaying the marker and following the path helped me. However, I could not find a solution, how to display only one graph when the page is loaded, i.e. so that the plot of heights is shown, but there is no slope. But the legend had both, so that you could turn on slope at any time.

[Raruto]

Hi velocat, this is a proof of concept of how it might work (you can do better):

controlElevation.on('elechart_updated', function(e) {
  let legendItem = this._chart._legend.selectAll('.legend-slope').node();
  let path = this._chart._area.select('path[data-name="' + legendItem.getAttribute('data-name') + '"]').node();
  path.classList.add('hidden');
  legendItem.querySelector('text').style.textDecorationLine = "line-through";
  legendItem.querySelector('rect').style.fillOpacity = "0";
});

UPDATE: patch released in version 1.4.0