@unovis/ts 1.1.1-beta.7 → 1.1.1-beta.8

package/src/components/leaflet-map/index.ts

@@ -1,808 +0,0 @@
-import { select, Selection } from 'd3-selection'
-import { packSiblings } from 'd3-hierarchy'
-import type L from 'leaflet'
-import Supercluster, { ClusterFeature, PointFeature } from 'supercluster'
-import { ResizeObserver } from '@juggle/resize-observer'
-import { StyleSpecification } from 'maplibre-gl'
-
-// Core
-import { ComponentCore } from 'core/component'
-
-// Model
-import { MapDataModel } from 'data-models/map'
-
-// Types
-import { ComponentType } from 'types/component'
-import { GenericDataRecord } from 'types/data'
-
-// Utils
-import { clamp, isNil, getNumber, getString, isString } from 'utils/data'
-import { constraintMapViewThrottled } from './renderer/mapboxgl-utils'
-import {
-  projectPoint,
-  bBoxMerge,
-  calculateClusterIndex,
-  getNextZoomLevelOnClusterClick,
-  findPointAndClusterByPointId,
-  geoJsonPointToScreenPoint,
-  getClusterRadius,
-  getClustersAndPoints,
-  getNodeRelativePosition,
-  getPointRadius,
-  shouldClusterExpand,
-} from './modules/utils'
-
-// Local Types
-import {
-  Bounds,
-  LeafletMapClusterDatum,
-  LeafletMapPoint,
-  LeafletMapPointDatum,
-  LeafletMapRenderer,
-  MapZoomState,
-  PointExpandedClusterProperties,
-} from './types'
-
-// Config
-import { LeafletMapConfig, LeafletMapConfigInterface } from './config'
-
-// Styles
-import * as s from './style'
-
-// Modules
-import { initialMapCenter, initialMapZoom, setupMap, updateTopoJson } from './modules/map'
-import { collideLabels, createNodes, removeNodes, updateNodes } from './modules/node'
-import { createNodeSelectionRing, updateNodeSelectionRing } from './modules/selectionRing'
-import { createBackgroundNode, updateBackgroundNode } from './modules/clusterBackground'
-
-export class LeafletMap<Datum extends GenericDataRecord> extends ComponentCore<Datum[], LeafletMapConfig<Datum>, LeafletMapConfigInterface<Datum>> {
-  static selectors = s
-  static cssVariables = s.variables
-  type = ComponentType.HTML
-  element: HTMLElement
-  config: LeafletMapConfig<Datum> = new LeafletMapConfig()
-  datamodel: MapDataModel<Datum> = new MapDataModel()
-  protected _container: HTMLElement
-  protected _containerSelection: Selection<HTMLElement, unknown, null, undefined>
-  public _onMapMoveEndInternal: (leaflet: L.Map) => void // Internal callback needed by Leaflet Flow Map
-  private _map: {
-    leaflet: L.Map;
-    layer: L.Layer;
-    svgOverlay: Selection<SVGSVGElement, unknown, null, undefined>;
-    svgGroup: Selection<SVGGElement, unknown, SVGElement, undefined>;
-  }
-
-  private _clusterIndex: Supercluster<Datum>
-  private _expandedCluster: { points: PointFeature<PointExpandedClusterProperties<Datum>>[]; cluster: LeafletMapPoint<Datum> } = null
-  private _cancelBackgroundClick = false
-  private _hasBeenMoved = false
-  private _hasBeenZoomed = false
-  private _isMoving = false
-  private _isZooming = false
-  private _eventInitiatedByComponent = false
-  private _triggerBackgroundClick = false
-  private _externallySelectedPoint: LeafletMapPoint<Datum> | PointFeature<Datum> | null = null
-  private _zoomingToExternallySelectedPoint = false
-  private _forceExpandCluster = false
-  private _pointGroup: Selection<SVGGElement, unknown, SVGElement, undefined>
-  private _pointSelectionRing: Selection<SVGGElement, unknown, SVGElement, undefined>
-  private _clusterBackground: Selection<SVGGElement, unknown, SVGElement, undefined>
-  private _clusterBackgroundRadius = 0
-  private _selectedPoint: LeafletMapPoint<Datum> = null
-  private _currentZoomLevel: number | null = null
-  private _firstRender = true
-  private _isDarkThemeActive = false
-  private resizeObserver: ResizeObserver
-  private themeObserver: MutationObserver
-  private _renderDataAnimationFrameId: number | null = null
-  private _flyToBoundsAnimationFrameId: number | null = null
-  readonly _leafletInitializationPromise: Promise<L.Map>
-
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  static DEFAULT_CONTAINER_HEIGHT = 600
-
-  events = {
-    [LeafletMap.selectors.point]: {
-      mouseup: this._onPointMouseUp.bind(this),
-      mousedown: this._onPointMouseDown.bind(this),
-      click: this._onPointClick.bind(this),
-    },
-  }
-
-  constructor (container: HTMLElement, config?: LeafletMapConfigInterface<Datum>, data?: Datum[]) {
-    super(ComponentType.HTML)
-    this._container = container
-    this._containerSelection = select(this._container)
-
-    this._container.appendChild(this.element)
-    this.g.attr('class', s.root)
-
-    if (config) this.setConfig(config)
-
-    if (!this._container.clientWidth) {
-      console.warn('Unovis | Leaflet Map: The width of the container is not set. Setting to 100%.')
-      this._containerSelection.style('width', '100%')
-    }
-
-    if (!this._container.clientHeight) {
-      console.warn(`Unovis | Leaflet Map: The height of the container is not set. Setting to ${LeafletMap.DEFAULT_CONTAINER_HEIGHT}px.`)
-      this._containerSelection.style('height', `${LeafletMap.DEFAULT_CONTAINER_HEIGHT}px`)
-    }
-
-    // Initialize map asynchronously
-    this._leafletInitializationPromise = new Promise((resolve) => {
-      setupMap(this.element, this.config).then(map => {
-        // Apply the `s.map` class to `tilePane` to allow tooltip interactions
-        select(map.leaflet.getPanes().tilePane).classed(s.map, true)
-        if (config) this.setConfig(config)
-
-        this._map = map
-        this._map.leaflet.on('drag', this._onMapDragLeaflet.bind(this))
-        this._map.leaflet.on('move', this._onMapMove.bind(this))
-        this._map.leaflet.on('movestart', this._onMapMoveStart.bind(this))
-        this._map.leaflet.on('moveend', this._onMapMoveEnd.bind(this))
-        this._map.leaflet.on('zoom', this._onMapZoom.bind(this))
-        this._map.leaflet.on('zoomstart', this._onMapZoomStart.bind(this))
-        this._map.leaflet.on('zoomend', this._onMapZoomEnd.bind(this))
-
-        // We need to handle background click in a special way to deal
-        //   with d3 svg overlay that might have smaller size than the map itself
-        //   (see this._onNodeMouseDown() and this this._onNodeMouseDown())
-        this._map.leaflet.on('mousedown', () => {
-          if (!this._cancelBackgroundClick) this._triggerBackgroundClick = true
-        })
-
-        this._map.leaflet.on('mouseup', (e) => {
-          if (this._triggerBackgroundClick) {
-            this._triggerBackgroundClick = false
-            const originalEvent = (e as any).originalEvent
-            this._onBackgroundClick(originalEvent.target, originalEvent)
-          }
-        })
-
-        this._map.svgOverlay
-          .attr('class', s.svgOverlay)
-          .insert('rect', ':first-child')
-          .attr('class', s.backgroundRect)
-          .attr('width', '100%')
-          .attr('height', '100%')
-
-        this._pointGroup = this._map.svgGroup.append('g').attr('class', s.points)
-        this._clusterBackground = this._pointGroup.append('g')
-          .attr('class', s.clusterBackground)
-          .call(createBackgroundNode)
-        this._pointSelectionRing = this._pointGroup.append('g')
-          .attr('class', s.pointSelectionRing)
-          .call(createNodeSelectionRing)
-
-        this._map.leaflet.setView(initialMapCenter, initialMapZoom)
-
-        if (document.body.classList.contains('theme-dark') && config.styleDarkTheme) {
-          this._isDarkThemeActive = true
-          this.setTheme(config.styleDarkTheme)
-        }
-
-        this.config.onMapInitialized?.()
-        resolve(this._map.leaflet)
-      })
-    })
-
-
-    // Set data and render the map when it's ready
-    this.setData(data ?? [])
-
-    // When the container size changes we have to initiate map resize in order to update its dimensions
-    this.resizeObserver = new ResizeObserver(() => {
-      this._map?.leaflet?.invalidateSize()
-      this.config.tooltip?.hide()
-    })
-    this.resizeObserver.observe(container)
-
-    // If dark theme is enabled, update map's style when document body's class list changes
-    if (this.config.styleDarkTheme) {
-      this.themeObserver = new MutationObserver((mutations) => {
-        mutations.forEach(change => {
-          if (change.attributeName === 'class') {
-            const isDarkTheme = (change.target as HTMLElement).classList.contains('theme-dark')
-            if (this._isDarkThemeActive !== isDarkTheme) {
-              this.setTheme(isDarkTheme ? this.config.styleDarkTheme : this.config.style)
-              this._isDarkThemeActive = isDarkTheme
-            }
-          }
-        })
-      })
-      this.themeObserver.observe(document.body, { attributes: true })
-    }
-  }
-
-  setConfig (config: LeafletMapConfigInterface<Datum>): void {
-    this.config = new LeafletMapConfig<Datum>().init(config)
-
-    if (config.width) this._containerSelection.style('width', isString(config.width) ? config.width : `${config.width}px`)
-    if (config.height) this._containerSelection.style('height', isString(config.height) ? config.height : `${config.height}px`)
-
-    if (this._map && config.renderer === LeafletMapRenderer.MapLibre) {
-      const layer = this._map.layer as any // Using any because the typings are not full
-      const maplibreMap = layer.getMaplibreMap()
-      if (maplibreMap.isStyleLoaded()) updateTopoJson(maplibreMap, this.config)
-    }
-
-    if (this.config.tooltip) {
-      this.config.tooltip.setContainer(this._container)
-      this.config.tooltip.setComponents([this])
-      this.config.tooltip.update()
-    }
-  }
-
-  setData (data: Datum[]): void {
-    const { config, datamodel } = this
-
-    const dataValid = data.filter(d => {
-      const lat = getNumber(d, config.pointLatitude)
-      const lon = getNumber(d, config.pointLongitude)
-      const valid = isFinite(lat) && isFinite(lon)
-
-      if (!valid) console.warn('Unovis | Leaflet Map: Invalid point coordinates', d)
-      return valid
-    })
-
-    datamodel.data = dataValid
-
-    // We use Supercluster for real-time node clustering
-    this._clusterIndex = calculateClusterIndex<Datum>(dataValid, this.config)
-
-    // If there was an expanded cluster, try to find its successor and expand it too
-    if (this._expandedCluster && this._map.leaflet) {
-      // Reset expanded cluster before calling `_getPointData()` to get data with all clusters collapsed
-      const expandedCluster = this._expandedCluster
-      this._resetExpandedCluster()
-      const pointData = this._getPointData()
-
-      const expandedClusterCenterPx = projectPoint(expandedCluster.cluster, this._map.leaflet)
-      const expandedClusterRadiusPx = expandedCluster.cluster.radius
-      const cluster = pointData.find((c) => {
-        if (!c.isCluster) return false
-        const pos = projectPoint(c, this._map.leaflet)
-        const r = c.radius
-        const distance = Math.sqrt((expandedClusterCenterPx.x - pos.x) ** 2 + (expandedClusterCenterPx.y - pos.y) ** 2)
-        return distance < (expandedClusterRadiusPx + r)
-      })
-
-      if (cluster) this._expandCluster(cluster, true)
-    }
-
-    // Render
-    this._leafletInitializationPromise.then(() => {
-      this.render()
-    })
-  }
-
-  setTheme (theme: StyleSpecification | string): void {
-    const layer = this._map.layer as any // Using any because the typings are not full
-    if (this.config.renderer === LeafletMapRenderer.MapLibre) {
-      const maplibreMap = layer.getMaplibreMap()
-      maplibreMap.setStyle?.(theme)
-      updateTopoJson(maplibreMap, this.config)
-    } else {
-      if (typeof theme !== 'string') {
-        console.warn('Unovis | Leaflet Map: Invalid style. Provide a URL string for raster rendering mode.')
-        return
-      }
-      layer.setUrl(theme)
-    }
-  }
-
-  // We redefine the ComponentCore render function to bind event to newly created elements in this._renderData(),
-  // which is being called after almost every map interaction
-  render (): void {
-    const { config } = this
-    if (!this._map) return
-
-    this._renderData()
-    if (this._firstRender) {
-      if (config.initialBounds) this.fitToBounds(config.initialBounds)
-      else if (config.fitViewOnInit) this.fitToPoints(0, config.fitViewPadding)
-    } else {
-      if (config.fitViewOnUpdate) this.fitToPoints(0, config.fitViewPadding)
-      else if (config.fitBoundsOnUpdate) this.fitToBounds(config.fitBoundsOnUpdate)
-    }
-
-    this._firstRender = false
-  }
-
-  public getLeafletInstancePromise (): Promise<L.Map> {
-    return this._leafletInitializationPromise
-  }
-
-  public fitToPoints (duration = this.config.flyToDuration, padding = this.config.fitViewPadding): void {
-    const { config, datamodel, datamodel: { data } } = this
-
-    if (!this._map || !this._map.leaflet) return
-    if (!data?.length) return
-    const bounds = datamodel.getDataLatLngBounds(config.pointLatitude, config.pointLongitude)
-    this._flyToBoundsAnimationFrameId = requestAnimationFrame(() => this._flyToBounds(bounds, duration, padding))
-  }
-
-  public fitToBounds (bounds: Bounds, duration = this.config.flyToDuration, padding = this.config.fitViewPadding): void {
-    const { northEast, southWest } = bounds
-    if (isNil(northEast) || isNil(southWest)) return
-    if (isNil(northEast.lat) || isNil(northEast.lng)) return
-    if (isNil(southWest.lat) || isNil(southWest.lng)) return
-    if (!this._map || !this._map.leaflet) return
-    this._flyToBoundsAnimationFrameId = requestAnimationFrame(() => this._flyToBounds([
-      [northEast.lat, southWest.lng],
-      [southWest.lat, northEast.lng],
-    ], duration, padding))
-  }
-
-  /* Select a point by id and optionally center the map view.
-   * This method was designed to be used mainly with the `[LeafletMap.selectors.point]` click events
-   * (when the user actually clicks on a point) and the specified point is inside one of the collapsed
-   * clusters it won't be selected. You can use the `zoomToPointById` method to achieve that.
-   */
-  public selectPointById (id: string, centerView = false): void {
-    const { config } = this
-    const pointData = this._getPointData()
-    const foundPoint = pointData.find(d => (d.properties as LeafletMapPointDatum<Datum>).id === id)
-
-    if (!foundPoint) {
-      console.warn(`Unovis | Leaflet Map: Node with id ${id} can not be found`)
-      return
-    }
-
-    if ((foundPoint.properties as LeafletMapClusterDatum<Datum>)?.cluster) {
-      console.warn('Unovis | Leaflet Map: Cluster can\'t be selected')
-      return
-    }
-
-    this._selectedPoint = foundPoint
-
-    const isPointInsideExpandedCluster = this._expandedCluster?.points?.find(d => getString(d.properties, config.pointId) === id)
-    if (!isPointInsideExpandedCluster) this._resetExpandedCluster()
-
-    if (centerView) {
-      const coordinates = {
-        lng: getNumber(foundPoint.properties as LeafletMapPointDatum<Datum>, config.pointLongitude),
-        lat: getNumber(foundPoint.properties as LeafletMapPointDatum<Datum>, config.pointLatitude),
-      }
-
-      const zoomLevel = this._map.leaflet.getZoom()
-      this._eventInitiatedByComponent = true
-      this._map.leaflet.flyTo(coordinates, zoomLevel, { duration: 0 })
-    } else {
-      this._renderData()
-    }
-  }
-
-  /* Get the id of the selected point */
-  public getSelectedPointId (): string | number | undefined {
-    return this._selectedPoint?.id
-  }
-
-  /* Unselect point if it was selected before */
-  public unselectPoint (): void {
-    this._selectedPoint = null
-    this._externallySelectedPoint = null
-    this.render()
-  }
-
-  /* Zoom to a point by id and optionally select it.
-   * If the point is inside a cluster, it'll be automatically expanded to show the enclosed point.
-   * You can also force set the zoom level by providing the `customZoomLevel` argument.
-   */
-  public zoomToPointById (id: string, selectPoint = false, customZoomLevel?: number): void {
-    const { config, datamodel } = this
-    if (!datamodel.data.length) {
-      console.warn('Unovis | Leaflet Map: There are no points on the map')
-      return
-    }
-    const dataBoundsAll = datamodel.getDataLatLngBounds(config.pointLatitude, config.pointLongitude)
-    const bounds: [number, number, number, number] = [dataBoundsAll[0][1], dataBoundsAll[1][0], dataBoundsAll[1][1], dataBoundsAll[0][0]]
-    const pointDataAll = this._getPointData(bounds)
-
-    let foundPoint: LeafletMapPoint<Datum> | PointFeature<Datum> = pointDataAll
-      .find((d: LeafletMapPoint<Datum>) => getString(d.properties as LeafletMapPointDatum<Datum>, config.pointId) === id)
-
-    // If point was found and it's a cluster -> do nothing
-    if ((foundPoint?.properties as LeafletMapClusterDatum<Datum>)?.cluster) {
-      console.warn('Unovis | Leaflet Map: Cluster can\'t be zoomed in')
-      return
-    }
-
-    // If point was not found -> search for it in all collapsed clusters
-    if (!foundPoint) {
-      const { point } = findPointAndClusterByPointId(pointDataAll, id, config.pointId)
-      foundPoint = point
-    }
-
-    if (foundPoint) {
-      // If point was found and it's inside an expanded cluster -> simply select it
-      const isPointInsideExpandedCluster = this._expandedCluster?.points?.find(d => getString(d.properties, config.pointId) === id)
-      if (isPointInsideExpandedCluster && selectPoint) {
-        this._selectedPoint = foundPoint as LeafletMapPoint<Datum>
-        this._renderData()
-        return
-      }
-
-      // Else - trigger zoom
-      this._externallySelectedPoint = foundPoint
-      this._zoomingToExternallySelectedPoint = true
-
-      this._forceExpandCluster = !isNil(customZoomLevel)
-      if (selectPoint) this._selectedPoint = foundPoint as LeafletMapPoint<Datum>
-
-      const zoomLevel = isNil(customZoomLevel) ? this._map.leaflet.getZoom() : customZoomLevel
-      const pointDatum = foundPoint.properties as LeafletMapPointDatum<Datum>
-      const coordinates = {
-        lng: getNumber(pointDatum, config.pointLongitude),
-        lat: getNumber(pointDatum, config.pointLatitude),
-      }
-      this._eventInitiatedByComponent = true
-      this._map.leaflet.flyTo(coordinates, zoomLevel, { duration: 0 })
-    } else {
-      console.warn(`Unovis | Leaflet Map: Node with id ${id} can not be found`)
-    }
-  }
-
-  public getNodeRelativePosition (node: LeafletMapPoint<Datum>): { x: number; y: number } {
-    return getNodeRelativePosition(node, this._map.leaflet)
-  }
-
-  public hasBeenZoomed (): boolean {
-    return this._hasBeenZoomed
-  }
-
-  public hasBeenMoved (): boolean {
-    return this._hasBeenMoved
-  }
-
-  public isZooming (): boolean {
-    return this._isZooming
-  }
-
-  public isMoving (): boolean {
-    return this._isMoving
-  }
-
-  private _flyToBounds (bounds: [[number, number], [number, number]], durationMs: number, paddingPx?: [number, number]): void {
-    this._eventInitiatedByComponent = true
-    const duration = durationMs / 1000
-    const padding: [number, number] | undefined = paddingPx ? [
-      paddingPx[0] < this._container.clientWidth / 2 ? paddingPx[0] : this._container.clientWidth / 2,
-      paddingPx[1] < this._container.clientHeight / 2 ? paddingPx[1] : this._container.clientHeight / 2,
-    ] : undefined
-    if (duration) {
-      this._map.leaflet.flyToBounds(bounds, { duration, padding })
-    } else {
-      this._map.leaflet.fitBounds(bounds, { padding })
-    }
-  }
-
-  private _renderData (mapMoveZoomUpdateOnly = false): void {
-    const { config } = this
-
-    const pointData = this._getPointData()
-    const contentBBox = pointData.length ? bBoxMerge(pointData.map(d => d.bbox)) : { x: 0, y: 0, width: 0, height: 0 }
-
-    // Set SVG size to match Leaflet transform
-    const svgExtraPadding = 40 + this._clusterBackgroundRadius // We need it to fit point labels and expanded cluster background circle
-    const dx = contentBBox.x - svgExtraPadding
-    const dy = contentBBox.y - svgExtraPadding
-    this._map.svgOverlay
-      .attr('width', contentBBox.width + 2 * svgExtraPadding)
-      .attr('height', contentBBox.height + 2 * svgExtraPadding)
-      .style('left', `${dx}px`)
-      .style('top', `${dy}px`)
-
-    this._map.svgGroup
-      .attr('transform', `translate(${-dx},${-dy})`)
-
-    // Render content
-    const points = this._pointGroup.selectAll<SVGGElement, LeafletMapPoint<Datum>>(`.${s.point}:not(.exit)`)
-      .data(pointData, (d: LeafletMapPoint<Datum>, i) => `${d.id || d.geometry.coordinates.join('')}`)
-
-    points.exit<LeafletMapPoint<Datum>>().classed('exit', true).call(removeNodes)
-    const pointsEnter = points.enter().append('g').attr('class', s.point)
-      .call(createNodes)
-
-    const pointsMerged = points.merge(pointsEnter)
-    pointsEnter.call(updateNodes, config, this._map.leaflet)
-    points.call(updateNodes, config, this._map.leaflet, mapMoveZoomUpdateOnly)
-    pointsMerged.call(collideLabels, this._map.leaflet)
-
-    this._clusterBackground.call(updateBackgroundNode, this._expandedCluster, config, this._map.leaflet, this._clusterBackgroundRadius)
-    if (this._expandedCluster && config.clusterBackground) {
-      pointData.forEach((d, i) => { d._zIndex = (d.properties as LeafletMapPointDatum<Datum>)?.expandedClusterPoint ? 2 : 0 })
-      this._pointGroup
-        .selectAll<SVGGElement, LeafletMapPoint<Datum>>(`.${s.point}, .${s.clusterBackground}, .${s.pointSelectionRing}`)
-        .sort((a: LeafletMapPoint<Datum>, b: LeafletMapPoint<Datum>) => a._zIndex - b._zIndex)
-    }
-
-    // Show selection border and hide it when the node
-    // is out of visible box
-    if (config.selectedPointId) {
-      const foundPoint = pointData.find(d => getString(d.properties as LeafletMapPointDatum<Datum>, config.pointId) === config.selectedPointId)
-      const { cluster } = findPointAndClusterByPointId(pointData, config.selectedPointId, config.pointId)
-      if (foundPoint) this._selectedPoint = foundPoint
-      else this._selectedPoint = cluster
-    }
-    this._pointSelectionRing.call(updateNodeSelectionRing, this._selectedPoint, pointData, config, this._map.leaflet)
-
-    // Set up events and attributes for the rendered points
-    this._setUpComponentEventsThrottled()
-    this._setCustomAttributesThrottled()
-
-    // Tooltip
-    config.tooltip?.update()
-  }
-
-  private _zoomToExternallySelectedPoint (): void {
-    const { config } = this
-    if (!this._externallySelectedPoint) return
-
-    const externallySelectedPointDatum = this._externallySelectedPoint.properties as LeafletMapPointDatum<Datum>
-    const externallySelectedPointId = getString(externallySelectedPointDatum, config.pointId)
-    const pointData = this._getPointData()
-    const foundPoint: LeafletMapPoint<Datum> = pointData.find(
-      d => getString(d.properties as Datum, config.pointId) === externallySelectedPointId
-    )
-
-    if (foundPoint) {
-      this._zoomingToExternallySelectedPoint = false
-      this._currentZoomLevel = null
-    } else {
-      const { cluster } = findPointAndClusterByPointId(pointData, externallySelectedPointId, config.pointId)
-      if (!cluster) return
-
-      const zoomLevel = this._map.leaflet.getZoom()
-      // Expand cluster or fly further
-      if (this._forceExpandCluster || shouldClusterExpand(cluster, zoomLevel, 8, 13)) {
-        this._expandCluster(cluster)
-      } else {
-        const newZoomLevel = getNextZoomLevelOnClusterClick(zoomLevel)
-        const coordinates = {
-          lng: getNumber(externallySelectedPointDatum, config.pointLongitude),
-          lat: getNumber(externallySelectedPointDatum, config.pointLatitude),
-        }
-        if (this._currentZoomLevel !== newZoomLevel) {
-          this._currentZoomLevel = newZoomLevel
-          this._eventInitiatedByComponent = true
-          this._map.leaflet.flyTo(coordinates, newZoomLevel, { duration: 0 })
-        }
-      }
-    }
-  }
-
-  private _expandCluster (clusterPoint: LeafletMapPoint<Datum>, preventRender?: boolean): void {
-    const { config, config: { clusterBackground } } = this
-    const padding = 1
-
-    config.tooltip?.hide()
-
-    this._forceExpandCluster = false
-    if (clusterPoint) {
-      const points: PointFeature<PointExpandedClusterProperties<Datum>>[] =
-        clusterPoint.clusterIndex.getLeaves((clusterPoint.properties as LeafletMapClusterDatum<Datum>).cluster_id as number, Infinity)
-      const packPoints: {x: number; y: number; r: number }[] = points.map(p => ({
-        x: null,
-        y: null,
-        r: getPointRadius(p, config.pointRadius, this._map.leaflet.getZoom()) + padding,
-      }))
-      packSiblings(packPoints)
-
-      points.forEach((p, i) => {
-        p.properties.expandedClusterPoint = clusterPoint
-        p.properties.r = packPoints[i].r
-        p.properties.dx = packPoints[i].x
-        p.properties.dy = packPoints[i].y
-      })
-
-      this._resetExpandedCluster()
-      this._expandedCluster = {
-        cluster: clusterPoint,
-        points,
-      }
-
-      if (clusterBackground) this._clusterBackgroundRadius = getClusterRadius(this._expandedCluster)
-
-      if (!preventRender) this._renderData()
-    }
-
-    this._zoomingToExternallySelectedPoint = false
-  }
-
-  private _resetExpandedCluster (): void {
-    this._expandedCluster?.points?.forEach(d => { delete d.properties.expandedClusterPoint })
-    this._expandedCluster = null
-  }
-
-  private _getPointData (customBounds?: [number, number, number, number]): LeafletMapPoint<Datum>[] {
-    const { config, datamodel: { data } } = this
-
-    if (!data || !this._clusterIndex) return []
-
-    let geoJSONPoints: (ClusterFeature<LeafletMapClusterDatum<Datum>> | PointFeature<PointExpandedClusterProperties<Datum>>)[] =
-      getClustersAndPoints<Datum>(this._clusterIndex, this._map.leaflet, customBounds)
-
-    if (this._expandedCluster) {
-      // Remove expanded cluster from the data
-      geoJSONPoints = geoJSONPoints.filter(c => (c as ClusterFeature<LeafletMapClusterDatum<Datum>>).properties.cluster_id !== (this._expandedCluster.cluster.properties as LeafletMapClusterDatum<Datum>).cluster_id)
-      // Add points from the expanded cluster
-      geoJSONPoints = geoJSONPoints.concat(this._expandedCluster.points)
-    }
-
-    const pointData = geoJSONPoints
-      // Todo: Remove explicitly set ClusterFeature<LeafletMapPointDatum<Datum>> type
-      .map((d, i: number) => {
-        return geoJsonPointToScreenPoint(d as ClusterFeature<LeafletMapPointDatum<Datum>>, i, this._map.leaflet, config)
-      })
-      // .sort((a, b) => getPointDisplayOrder(a, config.pointStatus, config.colorMap) - getPointDisplayOrder(b, config.pointStatus, config.colorMap))
-
-    return pointData
-  }
-
-  private _getMapZoomState (): MapZoomState {
-    const leafletBounds = this._map.leaflet.getBounds()
-    const southWest = leafletBounds.getSouthWest()
-    const northEast = leafletBounds.getNorthEast()
-
-    return {
-      mapCenter: this._map.leaflet.getCenter(),
-      zoomLevel: this._map.leaflet.getZoom(),
-      bounds: { southWest, northEast },
-      userDriven: !this._eventInitiatedByComponent,
-    }
-  }
-
-  private _onMapDragLeaflet (): void {
-    this._cancelBackgroundClick = true
-  }
-
-  private _onMapMove (): void {
-    const { config } = this
-    if (!this._map) return
-    this._hasBeenMoved = true
-    this._renderDataAnimationFrameId = requestAnimationFrame(() => {
-      this._renderData(true)
-    })
-    config.onMapMoveZoom?.(this._getMapZoomState())
-  }
-
-  private _onMapMoveStart (): void {
-    const { config } = this
-    if (!this._map) return
-    this._isMoving = true
-    config.onMapMoveStart?.(this._getMapZoomState())
-  }
-
-  private _onMapMoveEnd (): void {
-    const { config } = this
-    if (!this._map) return
-    this._onMapMoveEndInternal?.(this._map.leaflet)
-    config.onMapMoveEnd?.(this._getMapZoomState())
-
-    constraintMapViewThrottled(this._map.leaflet)
-    const events = this._map.layer.getEvents()
-
-    if (events.zoomend) {
-      const zoomEndEvent = events.zoomend.bind(this._map.layer)
-      zoomEndEvent(null)
-    }
-
-    if (this._externallySelectedPoint || this._zoomingToExternallySelectedPoint) {
-      this._zoomToExternallySelectedPoint()
-    }
-
-    this._isMoving = false
-    this._eventInitiatedByComponent = false
-  }
-
-  private _onMapZoomStart (): void {
-    const { config } = this
-    if (!this._map) return
-    this._isZooming = true
-    config.onMapZoomStart?.(this._getMapZoomState())
-  }
-
-  private _onMapZoomEnd (): void {
-    const { config } = this
-    if (!this._map) return
-    config.onMapZoomEnd?.(this._getMapZoomState())
-    this._isZooming = false
-    if (!this._isMoving) this._eventInitiatedByComponent = false
-  }
-
-  private _onMapZoom (): void {
-    const { config } = this
-    if (!this._map) return
-    this._hasBeenZoomed = true
-
-    if (!this._externallySelectedPoint) this._resetExpandedCluster()
-    else if (!this._zoomingToExternallySelectedPoint) {
-      this._externallySelectedPoint = null
-    }
-
-    config.tooltip?.hide()
-    config.onMapMoveZoom?.(this._getMapZoomState())
-  }
-
-  private _onBackgroundClick (el: HTMLElement, event: MouseEvent): void {
-    const { config } = this
-
-    if (this._cancelBackgroundClick) {
-      this._cancelBackgroundClick = false
-      return
-    }
-
-    this._externallySelectedPoint = null
-    this._resetExpandedCluster()
-    this._renderData()
-    config.onMapClick?.(this._getMapZoomState())
-  }
-
-  private _onPointClick (d: LeafletMapPoint<Datum>, event: MouseEvent): void {
-    const { config: { flyToDuration, clusterExpandOnClick } } = this
-    this._externallySelectedPoint = null
-    event.stopPropagation()
-
-    if ((d.properties as LeafletMapClusterDatum<Datum>).cluster) {
-      const zoomLevel = this._map.leaflet.getZoom()
-      const coordinates = { lng: d.geometry.coordinates[0], lat: d.geometry.coordinates[1] }
-
-      if (clusterExpandOnClick && shouldClusterExpand(d, zoomLevel)) this._expandCluster(d)
-      else {
-        const newZoomLevel = getNextZoomLevelOnClusterClick(zoomLevel)
-        this._eventInitiatedByComponent = true
-        this._map.leaflet.flyTo(coordinates, newZoomLevel, { duration: flyToDuration / 1000 })
-      }
-    }
-  }
-
-  private _onPointMouseDown (d: LeafletMapPoint<Datum>, event: MouseEvent): void {
-    this._cancelBackgroundClick = true
-  }
-
-  private _onPointMouseUp (d: LeafletMapPoint<Datum>, event: MouseEvent): void {
-    this._cancelBackgroundClick = false
-  }
-
-  public zoomIn (increment = 1): void {
-    if (!this._map?.leaflet) return
-    this.setZoom(this._map.leaflet.getZoom() + increment)
-  }
-
-  public zoomOut (increment = 1): void {
-    if (!this._map?.leaflet) return
-    this.setZoom(this._map.leaflet.getZoom() - increment)
-  }
-
-  public setZoom (zoomLevel: number): void {
-    const leaflet = this._map?.leaflet
-    if (!leaflet) return
-
-    this._eventInitiatedByComponent = true
-    leaflet.flyTo(
-      leaflet.getCenter(),
-      clamp(zoomLevel, leaflet.getMinZoom(), leaflet.getMaxZoom()),
-      { duration: this.config.zoomDuration / 1000 }
-    )
-  }
-
-  public fitView (): void {
-    this.fitToPoints()
-  }
-
-  public destroy (): void {
-    constraintMapViewThrottled.cancel()
-    cancelAnimationFrame(this._renderDataAnimationFrameId)
-    cancelAnimationFrame(this._flyToBoundsAnimationFrameId)
-    const map = this._map?.leaflet
-    this._map = undefined
-
-    map?.stop()
-    map?.remove()
-    this.g.remove()
-    this.resizeObserver.disconnect()
-    this.themeObserver?.disconnect()
-  }
-}