@rural-environmental-registry/map_component 1.0.0 → 1.2.0

package/src/handlers/mapToolsHandler.ts

@@ -0,0 +1,281 @@
+import L, { FeatureGroup, LatLngBounds, Map } from 'leaflet'
+
+import MeasureToolsHandler from './measureToolsHandler'
+import { resolveMapToolsConfig } from './toolsConstants'
+import { MapToolsConfig, MeasureCompleteEvent } from '../types'
+
+type MapToolsCallbacks = {
+  onFullscreenChange?: (active: boolean) => void
+  onMeasureComplete?: (data: MeasureCompleteEvent) => void
+}
+
+type InitialView = {
+  center: L.LatLngExpression
+  zoom: number
+}
+
+const FULLSCREEN_ICON =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>'
+
+const EXIT_FULLSCREEN_ICON =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7"/></svg>'
+
+const CENTER_ICON =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/></svg>'
+
+export default class MapToolsHandler {
+  private readonly _map: Map
+  private readonly _config: MapToolsConfig
+  private readonly _initialView: InitialView
+  private readonly _callbacks: MapToolsCallbacks
+  private readonly _fullscreenContainer: HTMLElement
+  private _drawItemsGroup: FeatureGroup | null
+  private _control: L.Control | null = null
+  private _measureTools: MeasureToolsHandler | null = null
+  private _fullscreenBtn: HTMLButtonElement | null = null
+  private _boundFullscreenChange: () => void
+
+  constructor(
+    map: Map,
+    toolsConfig: MapToolsConfig | undefined,
+    initialView: InitialView,
+    drawItemsGroup: FeatureGroup | null,
+    fullscreenContainer: HTMLElement,
+    callbacks: MapToolsCallbacks = {}
+  ) {
+    const resolved = resolveMapToolsConfig(toolsConfig)
+    if (!resolved) {
+      throw new Error('MapToolsHandler requires tools.show to be true')
+    }
+
+    this._map = map
+    this._config = resolved
+    this._initialView = initialView
+    this._drawItemsGroup = drawItemsGroup
+    this._callbacks = callbacks
+    this._fullscreenContainer = fullscreenContainer
+
+    this._boundFullscreenChange = () => this.handleFullscreenChange()
+
+    this.addControl()
+
+    if (this._config.measureArea?.show !== false) {
+      this._measureTools = new MeasureToolsHandler(this._map, this._config, {
+        onMeasureComplete: (data) => this._callbacks.onMeasureComplete?.(data)
+      })
+      this.alignTopRightControls()
+    }
+
+    this.bindFullscreenEvents()
+  }
+
+  public setDrawItemsGroup(group: FeatureGroup | null): void {
+    this._drawItemsGroup = group
+  }
+
+  public centerMap(): void {
+    const padding = this._config.center?.padding ?? [20, 20]
+    const target = this._config.center?.target ?? 'drawn'
+
+    if (target === 'drawn' && this._drawItemsGroup && this._drawItemsGroup.getLayers().length > 0) {
+      const bounds = this._drawItemsGroup.getBounds()
+      if (bounds.isValid()) {
+        this._map.fitBounds(bounds, { padding })
+        return
+      }
+    }
+
+    this._map.setView(this._initialView.center, this._initialView.zoom)
+  }
+
+  public enterFullscreen(): void {
+    if (!document.fullscreenElement) {
+      void this._fullscreenContainer.requestFullscreen?.()
+    }
+  }
+
+  public exitFullscreen(): void {
+    if (document.fullscreenElement) {
+      void document.exitFullscreen?.()
+    }
+  }
+
+  public toggleFullscreen(): void {
+    if (document.fullscreenElement) {
+      this.exitFullscreen()
+    } else {
+      this.enterFullscreen()
+    }
+  }
+
+  public toggleMeasureArea(): void {
+    if (this._measureTools?.isActive()) {
+      this._measureTools.cancel()
+      return
+    }
+
+    this._measureTools?.startLine()
+  }
+
+  public destroy(): void {
+    document.removeEventListener('fullscreenchange', this._boundFullscreenChange)
+
+    this._measureTools?.destroy()
+    this._measureTools = null
+
+    if (this._control) {
+      this._map.removeControl(this._control)
+      this._control = null
+    }
+  }
+
+  private addControl(): void {
+    const position = this._config.position ?? 'topright'
+    const config = this._config
+    const handler = this
+
+    const MapToolsControl = L.Control.extend({
+      options: { position },
+      onAdd() {
+        const container = L.DomUtil.create('div', 'leaflet-control leaflet-control-map-tools')
+
+        if (config.zoom?.show !== false) {
+          handler.createButton(
+            container,
+            'map-tools-btn map-tools-btn--zoom-in',
+            config.zoom?.titleIn ?? 'Zoom in',
+            '+',
+            (e) => {
+              L.DomEvent.stop(e)
+              handler._map.zoomIn()
+            }
+          )
+
+          handler.createButton(
+            container,
+            'map-tools-btn map-tools-btn--zoom-out',
+            config.zoom?.titleOut ?? 'Zoom out',
+            '−',
+            (e) => {
+              L.DomEvent.stop(e)
+              handler._map.zoomOut()
+            }
+          )
+        }
+
+        if (config.center?.show !== false) {
+          handler.createButton(
+            container,
+            'map-tools-btn map-tools-btn--center',
+            config.center?.title ?? 'Center map',
+            CENTER_ICON,
+            (e) => {
+              L.DomEvent.stop(e)
+              handler.centerMap()
+            }
+          )
+        }
+
+        if (config.fullscreen?.show !== false) {
+          handler._fullscreenBtn = handler.createButton(
+            container,
+            'map-tools-btn map-tools-btn--fullscreen',
+            config.fullscreen?.title ?? 'Fullscreen',
+            FULLSCREEN_ICON,
+            (e) => {
+              L.DomEvent.stop(e)
+              handler.toggleFullscreen()
+            }
+          )
+        }
+
+        L.DomEvent.disableClickPropagation(container)
+        L.DomEvent.disableScrollPropagation(container)
+
+        return container
+      }
+    })
+
+    this._control = new MapToolsControl()
+    this._map.addControl(this._control)
+    this.removeNativeZoomControl()
+    this.alignTopRightControls()
+  }
+
+  private removeNativeZoomControl(): void {
+    const zoomControl = this._map.getContainer().querySelector('.leaflet-control-zoom')
+    if (!zoomControl) return
+
+    const control = this._map.zoomControl
+    if (control) {
+      this._map.removeControl(control)
+    }
+  }
+
+  public alignTopRightControls(): void {
+    const corner = this._map.getContainer().querySelector('.leaflet-top.leaflet-right')
+    if (!corner) return
+
+    const prioritySelectors = [
+      '.leaflet-control-map-tools',
+      '.leaflet-control-layers',
+      '.leaflet-control-measure-tools',
+      '.leaflet-control-measure'
+    ]
+
+    const controls = Array.from(corner.querySelectorAll(':scope > .leaflet-control'))
+    const sorted = [
+      ...prioritySelectors.flatMap((selector) => controls.filter((control) => control.matches(selector))),
+      ...controls.filter((control) => !prioritySelectors.some((selector) => control.matches(selector)))
+    ]
+
+    sorted.forEach((control) => corner.appendChild(control))
+  }
+
+  private createButton(
+    container: HTMLElement,
+    className: string,
+    title: string,
+    iconHtml: string,
+    onClick: (e: Event) => void
+  ): HTMLButtonElement {
+    const btn = L.DomUtil.create('button', className, container) as HTMLButtonElement
+    btn.type = 'button'
+    btn.title = title
+    btn.innerHTML = iconHtml
+
+    L.DomEvent.on(btn, 'click', onClick)
+
+    return btn
+  }
+
+  private bindFullscreenEvents(): void {
+    document.addEventListener('fullscreenchange', this._boundFullscreenChange)
+  }
+
+  private handleFullscreenChange(): void {
+    const isActive = document.fullscreenElement === this._fullscreenContainer
+    this._fullscreenContainer.classList.toggle('map-container--fullscreen', isActive)
+
+    if (this._fullscreenBtn) {
+      this._fullscreenBtn.innerHTML = isActive ? EXIT_FULLSCREEN_ICON : FULLSCREEN_ICON
+      this._fullscreenBtn.title = isActive ? 'Exit fullscreen' : (this._config.fullscreen?.title ?? 'Fullscreen')
+      this._fullscreenBtn.classList.toggle('map-tools-btn--active', isActive)
+    }
+
+    setTimeout(() => {
+      this._map.invalidateSize()
+    }, 100)
+    this._callbacks.onFullscreenChange?.(isActive)
+  }
+}
+
+export function isMeasureModeActive(map: Map): boolean {
+  return !!(map as Map & { _leafletMeasureActive?: boolean })._leafletMeasureActive
+}
+
+export function getDrawnBounds(drawItemsGroup: FeatureGroup | null): LatLngBounds | null {
+  if (!drawItemsGroup || drawItemsGroup.getLayers().length === 0) return null
+  const bounds = drawItemsGroup.getBounds()
+  return bounds.isValid() ? bounds : null
+}

package/src/handlers/measureToolsHandler.ts

@@ -0,0 +1,424 @@
+import L, { FeatureGroup, Layer, Map, Path } from 'leaflet'
+import '@geoman-io/leaflet-geoman-free'
+
+import { MapToolsConfig, MeasureCompleteEvent, GeomanDrawingEvent } from '../types'
+import {
+  calculateLayerArea,
+  calculateLayerLength,
+  formatAreaHa,
+  formatLengthKm
+} from '../utils/geometryCalculator'
+
+type MeasureToolsCallbacks = {
+  onMeasureComplete?: (data: MeasureCompleteEvent) => void
+}
+
+type MeasureMode = 'line' | 'polygon'
+
+const LINE_ICON =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20L20 4"/><circle cx="6" cy="18" r="1.5" fill="currentColor" stroke="none"/><circle cx="18" cy="6" r="1.5" fill="currentColor" stroke="none"/></svg>'
+
+const POLYGON_ICON =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l8 5v10l-8 5-8-5V7z"/></svg>'
+
+export default class MeasureToolsHandler {
+  private readonly _map: Map
+  private readonly _mapContainer: HTMLElement
+  private readonly _outerContainer: HTMLElement | null
+  private readonly _config: MapToolsConfig
+  private readonly _callbacks: MeasureToolsCallbacks
+  private readonly _measureGroup: FeatureGroup
+  private readonly _measureSvgRenderer: L.SVG
+  private readonly _boundMeasureCreate: (evt: GeomanDrawingEvent) => void
+  private readonly _boundMeasureCancel: () => void
+  private readonly _boundEscapeKey: (event: KeyboardEvent) => void
+  private _control: L.Control | null = null
+  private _lineBtn: HTMLButtonElement | null = null
+  private _polygonBtn: HTMLButtonElement | null = null
+  private _interactionPanel: HTMLElement | null = null
+  private _resultsEl: HTMLElement | null = null
+  private _helpEl: HTMLElement | null = null
+  private _activeMode: MeasureMode | null = null
+  private _suppressMeasureCancel = false
+  private _restoreZoomAnimation = true
+  private _measureCreateTimeoutId: number | null = null
+
+  constructor(map: Map, config: MapToolsConfig, callbacks: MeasureToolsCallbacks = {}) {
+    this._map = map
+    this._config = config
+    this._callbacks = callbacks
+    this._mapContainer = map.getContainer()
+    this._outerContainer = this._mapContainer.closest('.map-container')
+    this._measureGroup = new FeatureGroup()
+    this._measureGroup.addTo(map)
+    this._measureSvgRenderer = L.svg({ pane: 'overlayPane' })
+
+    this._boundMeasureCreate = (evt) => this.handleMeasureCreate(evt)
+    this._boundMeasureCancel = () => this.handleMeasureCancel()
+    this._boundEscapeKey = (event) => {
+      if (event.key === 'Escape' && this.isActive()) {
+        this.cancel()
+      }
+    }
+
+    this.addControl()
+    this._map.on('pm:create', this._boundMeasureCreate)
+    this._map.on('pm:drawcancel', this._boundMeasureCancel)
+  }
+
+  public destroy(): void {
+    this.clearMeasureCreateTimeout()
+    this.stopMode()
+    document.removeEventListener('keydown', this._boundEscapeKey)
+    this._map.off('pm:create', this._boundMeasureCreate)
+    this._map.off('pm:drawcancel', this._boundMeasureCancel)
+    this._measureGroup.clearLayers()
+    this._map.removeLayer(this._measureGroup)
+
+    if (this._control) {
+      this._map.removeControl(this._control)
+      this._control = null
+    }
+  }
+
+  public cancel(): void {
+    if (!this.isActive()) return
+
+    this._suppressMeasureCancel = true
+    this._map.pm.disableDraw()
+    this._suppressMeasureCancel = false
+    this.stopMode()
+    this._measureGroup.clearLayers()
+  }
+
+  public isActive(): boolean {
+    return this._activeMode !== null
+  }
+
+  public startLine(): void {
+    this.startMode('line')
+  }
+
+  public startPolygon(): void {
+    this.startMode('polygon')
+  }
+
+  private addControl(): void {
+    const position = this._config.position ?? 'topright'
+    const config = this._config
+    const handler = this
+
+    const MeasureToolsControl = L.Control.extend({
+      options: { position },
+      onAdd() {
+        const container = L.DomUtil.create('div', 'leaflet-control leaflet-control-measure-tools')
+
+        const buttons = L.DomUtil.create('div', 'measure-tools-buttons', container)
+
+        if (config.measureLine?.show !== false) {
+          handler._lineBtn = handler.createToolButton(
+            buttons,
+            'measure-tools-btn measure-tools-btn--line',
+            config.measureLine?.title ?? config.texts?.measureLineTitle ?? 'Measure line',
+            LINE_ICON,
+            () => handler.toggleMode('line')
+          )
+        }
+
+        if (config.measurePolygon?.show !== false) {
+          handler._polygonBtn = handler.createToolButton(
+            buttons,
+            'measure-tools-btn measure-tools-btn--polygon',
+            config.measurePolygon?.title ?? config.texts?.measurePolygonTitle ?? 'Measure polygon',
+            POLYGON_ICON,
+            () => handler.toggleMode('polygon')
+          )
+        }
+
+        handler._interactionPanel = L.DomUtil.create('div', 'measure-tools-interaction js-measure-interaction', container)
+        handler._interactionPanel.style.display = 'none'
+        handler._interactionPanel.innerHTML = handler.buildInteractionHtml(config)
+
+        handler._resultsEl = handler._interactionPanel.querySelector('.js-results')
+        handler._helpEl = handler._interactionPanel.querySelector('.js-measure-help')
+
+        const cancelBtn = handler._interactionPanel.querySelector('.js-cancel')
+        const finishBtn = handler._interactionPanel.querySelector('.js-finish')
+
+        if (cancelBtn instanceof HTMLElement) {
+          L.DomEvent.on(cancelBtn, 'click', (e) => {
+            L.DomEvent.stop(e)
+            handler.cancel()
+          })
+        }
+
+        if (finishBtn instanceof HTMLElement) {
+          L.DomEvent.on(finishBtn, 'click', (e) => {
+            L.DomEvent.stop(e)
+            handler.finishDrawing()
+          })
+        }
+
+        L.DomEvent.disableClickPropagation(container)
+        L.DomEvent.disableScrollPropagation(container)
+
+        return container
+      }
+    })
+
+    this._control = new MeasureToolsControl()
+    this._control.addTo(this._map)
+  }
+
+  private buildInteractionHtml(config: MapToolsConfig): string {
+    const title = config.texts?.measurePanelTitle ?? 'Measure distances and areas'
+    const cancel = config.texts?.measureCancel ?? 'Cancel'
+    const finish = config.texts?.measureFinish ?? 'Finish measurement'
+
+    return `
+      <div class="js-measuringprompt">
+        <h3>${title}</h3>
+        <p class="js-measure-help"></p>
+        <div class="js-results results"></div>
+        <ul class="js-measuretasks tasks">
+          <li><a href="#" class="js-cancel cancel">${cancel}</a></li>
+          <li><a href="#" class="js-finish finish">${finish}</a></li>
+        </ul>
+      </div>
+    `
+  }
+
+  private createToolButton(
+    container: HTMLElement,
+    className: string,
+    title: string,
+    iconHtml: string,
+    onClick: () => void
+  ): HTMLButtonElement {
+    const btn = L.DomUtil.create('button', className, container) as HTMLButtonElement
+    btn.type = 'button'
+    btn.title = title
+    btn.setAttribute('aria-label', title)
+    btn.innerHTML = iconHtml
+    L.DomEvent.on(btn, 'click', (e) => {
+      L.DomEvent.stop(e)
+      onClick()
+    })
+    return btn
+  }
+
+  private toggleMode(mode: MeasureMode): void {
+    if (this._activeMode === mode) {
+      this.cancel()
+      return
+    }
+
+    this.startMode(mode)
+  }
+
+  private startMode(mode: MeasureMode): void {
+    if (this.isActive()) {
+      this._suppressMeasureCancel = true
+      this._map.pm.disableDraw()
+      this._suppressMeasureCancel = false
+    }
+
+    this._measureGroup.clearLayers()
+    this._activeMode = mode
+    this.setMeasureActive(true)
+    this.updateButtons()
+    this.showInteractionPanel(mode)
+
+    if (this._map.doubleClickZoom.enabled()) {
+      this._map.doubleClickZoom.disable()
+    }
+
+    this._restoreZoomAnimation = this._map.options.zoomAnimation !== false
+    this._map.options.zoomAnimation = false
+
+    const shapeOptions = this._config.measureArea?.shapeOptions ?? {
+      color: '#e67e22',
+      fillColor: '#e67e22',
+      fillOpacity: 0.2,
+      weight: 2
+    }
+
+    const drawOptions = {
+      snappable: true,
+      templineStyle: shapeOptions,
+      hintlineStyle: shapeOptions,
+      pathOptions: shapeOptions
+    }
+
+    if (mode === 'line') {
+      this._map.pm.enableDraw('Line', {
+        ...drawOptions,
+        finishOn: 'dblclick'
+      } as unknown as L.PM.DrawModeOptions)
+    } else {
+      this._map.pm.enableDraw('Polygon', {
+        ...drawOptions,
+        finishOn: null,
+        allowSelfIntersection: true
+      } as unknown as L.PM.DrawModeOptions)
+    }
+  }
+
+  private stopMode(): void {
+    this._activeMode = null
+    this.setMeasureActive(false)
+    this._map.pm.disableDraw()
+    this._map.options.zoomAnimation = this._restoreZoomAnimation
+    this.updateButtons()
+    this.hideInteractionPanel()
+
+    if (!this._map.doubleClickZoom.enabled()) {
+      this._map.doubleClickZoom.enable()
+    }
+  }
+
+  private finishDrawing(): void {
+    const draw = (this._map as Map & { pm?: { Draw?: { finishDraw?: () => void } } }).pm?.Draw
+    draw?.finishDraw?.()
+  }
+
+  private handleMeasureCreate(evt: GeomanDrawingEvent): void {
+    if (!this.isActive()) return
+
+    const shape = String(evt.shape).toLowerCase()
+    const isLine = shape === 'line' || shape === 'polyline'
+    const isPolygon = shape === 'polygon' || shape === 'rectangle'
+
+    if (this._activeMode === 'line' && !isLine) return
+    if (this._activeMode === 'polygon' && !isPolygon) return
+
+    const { layer } = evt
+    const mode = this._activeMode
+
+    this.stopMode()
+
+    this.clearMeasureCreateTimeout()
+    this._measureCreateTimeoutId = window.setTimeout(() => {
+      this._measureCreateTimeoutId = null
+
+      if (!this._map?.hasLayer(this._measureGroup)) return
+
+      this.applyMeasureLayerOptions(layer)
+
+      if (this._map.hasLayer(layer)) {
+        this._map.removeLayer(layer)
+      }
+
+      this._measureGroup.clearLayers()
+      this._measureGroup.addLayer(layer)
+
+      const { html, event } = this.buildMeasurePopup(layer, mode!)
+      layer.bindPopup(html, { closeOnClick: false, autoClose: false, autoPan: false }).openPopup()
+
+      layer.on('popupclose', () => {
+        this._measureGroup.removeLayer(layer)
+      })
+
+      this._callbacks.onMeasureComplete?.(event)
+    }, 0)
+  }
+
+  private clearMeasureCreateTimeout(): void {
+    if (this._measureCreateTimeoutId !== null) {
+      window.clearTimeout(this._measureCreateTimeoutId)
+      this._measureCreateTimeoutId = null
+    }
+  }
+
+  private handleMeasureCancel(): void {
+    if (this._suppressMeasureCancel || !this.isActive()) return
+    this.stopMode()
+    this._measureGroup.clearLayers()
+  }
+
+  private buildMeasurePopup(
+    layer: Layer,
+    mode: MeasureMode
+  ): { html: string; event: MeasureCompleteEvent } {
+    const label = this._config.texts?.measureResult ?? 'Measurement'
+
+    if (mode === 'polygon') {
+      const areas = calculateLayerArea(layer)
+      const areaLine = `${this._config.texts?.measureArea ?? 'Area'}: ${formatAreaHa(areas.ha)}`
+      return {
+        html: `<div class="leaflet-measure-resultpopup"><h3>${label}</h3><p>${areaLine}</p></div>`,
+        event: {
+          m2: areas.m2,
+          ha: areas.ha,
+          geojson: (layer as L.Polygon).toGeoJSON() as MeasureCompleteEvent['geojson']
+        }
+      }
+    }
+
+    const lengths = calculateLayerLength(layer)
+    const distanceLine = `${this._config.texts?.measureLength ?? 'Distance'}: ${formatLengthKm(lengths.km)}`
+    return {
+      html: `<div class="leaflet-measure-resultpopup"><h3>${label}</h3><p>${distanceLine}</p></div>`,
+      event: {
+        lengthM: lengths.m,
+        lengthKm: lengths.km,
+        geojson: (layer as L.Polyline).toGeoJSON() as MeasureCompleteEvent['geojson']
+      }
+    }
+  }
+
+  private applyMeasureLayerOptions(layer: Layer): void {
+    if (layer instanceof Path) {
+      layer.options.renderer = this._measureSvgRenderer
+      if (typeof layer.redraw === 'function') {
+        layer.redraw()
+      }
+    }
+  }
+
+  private showInteractionPanel(mode: MeasureMode): void {
+    if (!this._interactionPanel || !this._helpEl) return
+
+    this._interactionPanel.style.removeProperty('display')
+    this._interactionPanel.closest('.leaflet-control-measure-tools')?.classList.add('measure-tools-expanded')
+
+    if (mode === 'line') {
+      this._helpEl.textContent =
+        this._config.texts?.measureLineHelp ??
+        'Click two points on the map. Double-click to finish the line.'
+    } else {
+      this._helpEl.textContent =
+        this._config.texts?.measurePolygonHelp ??
+        'Click to add vertices. Finish on the first point, use Finish, or double-click.'
+    }
+
+    if (this._resultsEl) {
+      this._resultsEl.innerHTML = ''
+    }
+
+    document.addEventListener('keydown', this._boundEscapeKey)
+  }
+
+  private hideInteractionPanel(): void {
+    if (!this._interactionPanel) return
+
+    this._interactionPanel.style.display = 'none'
+    this._interactionPanel.closest('.leaflet-control-measure-tools')?.classList.remove('measure-tools-expanded')
+    document.removeEventListener('keydown', this._boundEscapeKey)
+  }
+
+  private updateButtons(): void {
+    const active = this._activeMode
+    this._lineBtn?.classList.toggle('measure-tools-btn--active', active === 'line')
+    this._polygonBtn?.classList.toggle('measure-tools-btn--active', active === 'polygon')
+  }
+
+  private setMeasureActive(active: boolean): void {
+    ;(this._map as Map & { _leafletMeasureActive?: boolean })._leafletMeasureActive = active
+    this._mapContainer.classList.toggle('map-container--measuring', active)
+
+    if (this._outerContainer instanceof HTMLElement) {
+      this._outerContainer.classList.toggle('map-container--measuring', active)
+    }
+  }
+}