48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import {
|
|
Map,
|
|
NavigationControl,
|
|
type NavigationControlOptions,
|
|
} from "maplibre-gl";
|
|
|
|
export class CustomNavigationControl extends NavigationControl {
|
|
_zoomLevel: HTMLButtonElement | undefined;
|
|
|
|
constructor(options: NavigationControlOptions) {
|
|
super(options);
|
|
|
|
if (this.options.showZoom) {
|
|
this._zoomLevel = document.createElement("button");
|
|
this._zoomLevel.textContent = "0.0";
|
|
this._zoomLevel.setAttribute("aria-label", "Zoom level");
|
|
this._zoomLevel.setAttribute("title", "Zoom level");
|
|
this._zoomLevel.setAttribute("aria-disabled", "false");
|
|
this._container.insertBefore(this._zoomLevel, this._zoomInButton);
|
|
}
|
|
}
|
|
|
|
override onAdd(map: Map) {
|
|
super.onAdd(map);
|
|
|
|
if (this.options.showZoom) {
|
|
this._updateZoomLevel();
|
|
this._map.on("zoom", () => this._updateZoomLevel());
|
|
}
|
|
|
|
return this._container;
|
|
}
|
|
|
|
override onRemove() {
|
|
if (this.options.showZoom) {
|
|
this._map.off("zoom", () => this._updateZoomLevel());
|
|
}
|
|
|
|
super.onRemove();
|
|
}
|
|
|
|
_updateZoomLevel() {
|
|
if (this._zoomLevel && this._map) {
|
|
this._zoomLevel.textContent = this._map.getZoom().toFixed(1);
|
|
}
|
|
}
|
|
}
|