Skip to content

Instantly share code, notes, and snippets.

@simon04
Last active February 2, 2023 12:03
Show Gist options
  • Save simon04/cea8b3e2eb1466f60c4b211072a69b27 to your computer and use it in GitHub Desktop.
Save simon04/cea8b3e2eb1466f60c4b211072a69b27 to your computer and use it in GitHub Desktop.
A Leaflet Layer Control, which may be expanded by default, but may be collapsed using a button.
/**
* A Leaflet Layer Control, which may be expanded by default, but may be collapsed using a button.
*
* @example new CollapsableLayerControl(layers, {}, { collapsed: false })
*/
export class CollapsableLayerControl extends L.Control.Layers {
onAdd(map) {
L.Control.Layers.prototype.onAdd.call(this, map);
const div = document.createElement("div");
div.style.textAlign = "right";
const bar = document.createElement("div");
bar.classList.add("leaflet-bar");
bar.style.cursor = "pointer";
bar.style.display = "inline-block";
bar.style.fontSize = "22px";
const close = document.createElement("a");
close.innerHTML = "×";
close.onclick = () => this.collapse();
bar.append(close);
div.append(bar);
this.getContainer().querySelector(".leaflet-control-layers-list").prepend(div);
return this.getContainer();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment