Leafletjs issue with elevation toggle button
|
Friday, 13 March 2026
|
No comments |
Both the Rhodes Great Walks and Griffmonsters Great Walks sites make ample use of the Raruto Leaflet elevation plugin. This works very well and provides a graphic interface of the elevation of the gpx route, as seen in the image above. However, there has been a persistent niggling bug with the top right toggle switch which collapses/expands the elevation panel. After the page initally loads, upon clicking the toggle switch for the first time results in nothing happening and a second click is required to collapse the panel. The toggle button then works fine on subsequent clicks.
When trying to resolve the issue it was noticed that right clicking on the toggle button to bring up the developer panel in chrome resulted in the panel collapsing. That observation provided the "smoking gun" of the cause of the issue. It proves that the plugin is listening for focus, context menus, or window/container blur events to determine its state, rather than just a simple click. When you right-click, the browser shifts focus and triggers a "re-render" or a "state check" in Leaflet. The plugin realizes, "Oh, I'm supposed to be expanded (or collapsed)," and it snaps into position. This is why your first click does nothing—the plugin is essentially "asleep" until an external event (like a right-click or a second click) wakes it up.
The following function provided the solution.
- Focusing: By calling btn.focus(), we mimic the part of the right-click that tells the browser "this element is now active."
- Event Dispatching: Many Leaflet plugins don't just listen for click; they listen for the mousedown/mouseup sequence. By firing those manually, we clear the "waiting" state of the plugin.
- The Result: When the user finally performs their "first" click, the plugin already thinks it has been interacted with, so it responds immediately.
// this will force the toggle button to work on page load
controlElevation.on('eledata_loaded', function() {
// 1. Find the toggle button
var btn = document.querySelector('.elevation-toggle-icon');
if (btn) {
// 2. Simulate the "Focus/Wake" behavior when right-clicking
btn.focus();
// 3. Dispatch a fake "initial" click that the plugin expects
// but we do it so fast the user doesn't see it.
// This 'primes' the toggle logic.
btn.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}));
btn.dispatchEvent(new MouseEvent('mouseup', {bubbles: true}));
// 4. Force the internal variable to match the VISUAL reality
// Since it's visible on load, we tell it it's NOT collapsed.
controlElevation._collapsed = false;
// The Fix: Force the plugin to initialize its expanded state logic
if (typeof controlElevation._expand === "function") {
controlElevation._expand();
// Ensure the internal state is synced so the next click is a 'collapse'
controlElevation._collapsed = false;
}
// Final layout refresh
setTimeout(function() {
if (typeof map !== 'undefined') map.invalidateSize();
}, 100);
// 5. Trigger a fake resize to make sure the internal 'brain' is active
window.dispatchEvent(new Event('resize'));
}
});
