search

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

Is it possible to separate the elevation chart from the control button? #47

Closed timbeissinger closed 4 years ago

timbeissinger commented 4 years ago

Hi Raruto,

Thanks for a great Plugin! I like it a lot. Is it possible to separate the toggle button from the location of the chart? For example, I am using your Leaflet-elevation plugin on mobile, and it would be great if there were a way to have the button in the top-right but the chart in the bottom.

Thanks! Tim

Raruto commented 4 years ago

Hi Tim,

the following function is responsible for initializing the toggle button (as you see it receives an input container, but it would still require some additional development):

https://github.com/Raruto/leaflet-elevation/blob/c9ad81ef609d12d0020fe82429299f8b53cc3656/src/leaflet-elevation.js#L1264

I think the fastest way is to create your own control, for example with the Leaflet.EasyButton plugin.

Proof of concept:

var map = new L.Map('map');
var controlElevation = L.control.elevation( { position: 'topright' } ).addTo(map);
var controlButton = L.easyButton(
  'fa-area-chart',
  function(btn, map) { controlElevation._toggle(); },
  'Elevation',
  { position: 'bottomright' }
).addTo( map );
@media only screen and (max-width: 768px) {
  .leaflet-control .elevation-toggle {
      display: none !important;
  }
}
timbeissinger commented 4 years ago

Thank you a ton for the rapid and perfect response. It works like a dream :-)