Skip to content

Instantly share code, notes, and snippets.

@simon04
Created February 2, 2023 12:06
Show Gist options
  • Save simon04/5355438f1ce74646b7212dbc65acd1bf to your computer and use it in GitHub Desktop.
Save simon04/5355438f1ce74646b7212dbc65acd1bf to your computer and use it in GitHub Desktop.
A Leaflet Control, to request fullscreen for map (no CSS, no image)
/**
* A Leaflet Control, to request fullscreen for map (no CSS, no image)
*
* @example new FullscreenControl({ position: "topleft" }).addTo(map);
*/
export class FullscreenControl extends L.Control {
onAdd() {
const container = L.DomUtil.create("div", " leaflet-bar");
const link = L.DomUtil.create("a", undefined, container);
link.innerHTML = "⛶";
link.style.fontSize = "15px";
link.style.fontWeight = "bold";
link.href = "#";
link.title = "Fullscreen";
L.DomEvent.on(link, "click", L.DomEvent.stop);
L.DomEvent.on(link, "click", this.toggleFullscreen, this);
L.DomEvent.on(document, "fullscreenchange", this.invalidateSize, this);
return container;
}
onRemove() {
L.DomEvent.off(document, "fullscreenchange", this.invalidateSize, this);
}
toggleFullscreen() {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
const map = this._map;
this._initialBounds = map.getBounds();
map.getContainer().requestFullscreen();
}
}
invalidateSize() {
const map = this._map;
map.invalidateSize();
if (this._initialBounds) {
map.fitBounds(this._initialBounds);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment