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

package/src/components/leaflet-map/modules/utils.ts

@@ -0,0 +1,290 @@
+import type L from 'leaflet'
+import { min, max } from 'd3-array'
+import Supercluster, { ClusterFeature, PointFeature } from 'supercluster'
+
+// Utils
+import { clamp, getString, getNumber } from 'utils/data'
+import { getColor } from 'utils/color'
+import { polygon, circlePath } from 'utils/path'
+import { getHTMLTransform } from 'utils/html'
+
+// Types
+import { NumericAccessor, StringAccessor } from 'types/accessor'
+import { GenericDataRecord } from 'types/data'
+
+// Local Types
+import {
+  LeafletMapPoint,
+  LeafletMapPointShape,
+  LeafletMapPieDatum,
+  LeafletMapPointStyles,
+  PointExpandedClusterProperties,
+  LeafletMapPointDatum,
+  LeafletMapClusterDatum,
+} from '../types'
+
+// Config
+import { LeafletMapConfig } from '../config'
+
+export function bBoxMerge (
+  bBoxArray: ({x1: number; x2: number; y1: number; y2: number})[]):
+  { x: number; y: number; width: number; height: number } {
+  let box = { x1: 0, x2: 0, y1: 0, y2: 0 }
+  bBoxArray.forEach(coords => {
+    if (!box) {
+      box = { ...coords }
+    } else {
+      if (box.x1 > coords.x1) box.x1 = coords.x1
+      if (box.y1 > coords.y1) box.y1 = coords.y1
+      if (box.x2 < coords.x2) box.x2 = coords.x2
+      if (box.y2 < coords.y2) box.y2 = coords.y2
+    }
+  })
+
+  return {
+    x: box.x1,
+    y: box.y1,
+    width: box.x2 - box.x1,
+    height: box.y2 - box.y1,
+  }
+}
+
+export const getNextZoomLevelOnClusterClick = (level: number): number => clamp(1 + level * 1.5, level, 12)
+
+export function projectPoint<D extends GenericDataRecord> (
+  geoJSONPoint: LeafletMapPoint<D> | ClusterFeature<LeafletMapClusterDatum<D>> | PointFeature<LeafletMapPointDatum<D>>,
+  leafletMap: L.Map
+): { x: number; y: number } {
+  const lat = geoJSONPoint.geometry.coordinates[1]
+  const lon = geoJSONPoint.geometry.coordinates[0]
+  const projected = leafletMap.latLngToLayerPoint([lat, lon])
+  return projected
+}
+
+export function getPointRadius<D extends GenericDataRecord> (
+  geoPoint: ClusterFeature<LeafletMapClusterDatum<D>> | PointFeature<LeafletMapPointDatum<D>> | PointFeature<PointExpandedClusterProperties<D>>,
+  pointRadius: NumericAccessor<D>,
+  zoomLevel: number
+): number {
+  const isDynamic = !pointRadius
+  const radius = isDynamic ? 1 + 2 * Math.pow(zoomLevel, 0.80) : getNumber((geoPoint.properties as LeafletMapPointDatum<D>), pointRadius)
+
+  const isCluster = (geoPoint as ClusterFeature<D>).properties.cluster
+  return (isCluster && isDynamic)
+    ? clamp(Math.pow((geoPoint as ClusterFeature<D>).properties.point_count, 0.35) * radius, radius * 1.1, radius * 3)
+    : radius
+}
+
+export function getPointPos<D extends GenericDataRecord> (point: LeafletMapPoint<D> | ClusterFeature<LeafletMapClusterDatum<D>> | PointFeature<LeafletMapPointDatum<D>>, leafletMap: L.Map): { x: number; y: number } {
+  const properties = point.properties as LeafletMapPointDatum<D>
+  const isFromCluster = !!(properties).expandedClusterPoint
+
+  if (isFromCluster) {
+    const { x, y } = projectPoint(properties.expandedClusterPoint, leafletMap)
+    return {
+      x: x + properties.dx,
+      y: y + properties.dy,
+    }
+  } else {
+    return projectPoint(point, leafletMap)
+  }
+}
+
+export function getPointDisplayOrder<D extends GenericDataRecord> (
+  d: LeafletMapPoint<D>,
+  pointStatus: StringAccessor<LeafletMapPointDatum<D> | LeafletMapClusterDatum<D>>,
+  colorMap: LeafletMapPointStyles<D>
+): number {
+  const status = getString(d.properties, pointStatus)
+  const statusList = Object.keys(colorMap)
+  return Object.keys(statusList).indexOf(status)
+}
+
+export function toGeoJSONPoint<D extends GenericDataRecord> (d: D, pointLatitude: NumericAccessor<D>, pointLongitude: NumericAccessor<D>): PointFeature<D> {
+  const lat = getNumber(d, pointLatitude) as number
+  const lon = getNumber(d, pointLongitude) as number
+
+  return {
+    type: 'Feature',
+    properties: {
+      ...d,
+    },
+    geometry: {
+      type: 'Point',
+      coordinates: [lon, lat],
+    },
+  }
+}
+
+export function calculateClusterIndex<D extends GenericDataRecord> (data: D[], config: LeafletMapConfig<D>, maxClusterZoomLevel = 23): Supercluster<D> {
+  const { colorMap, pointShape, pointLatitude, pointLongitude, clusteringDistance } = config
+  return new Supercluster<D, Supercluster.AnyProps>({
+    radius: clusteringDistance,
+    maxZoom: maxClusterZoomLevel,
+    map: (d): Supercluster.AnyProps => {
+      const shape = getString(d, pointShape)
+
+      const clusterPoint = { shape }
+      for (const key of Object.keys(colorMap)) {
+        clusterPoint[key] = d[key] || 0
+      }
+
+      return clusterPoint
+    },
+    reduce: (acc, clusterPoint): void => {
+      acc.shape = acc.shape === clusterPoint.shape ? acc.shape : LeafletMapPointShape.Circle
+      acc.value = (acc.value ?? 0) + (clusterPoint.value ?? 0)
+
+      for (const key of Object.keys(colorMap)) {
+        acc[key] += clusterPoint[key]
+      }
+    },
+  }).load(data.map(d => toGeoJSONPoint(d, pointLatitude, pointLongitude)))
+}
+
+export function getNodePathData ({ x, y }: { x: number; y: number }, radius: number, shape: LeafletMapPointShape): string {
+  switch (shape) {
+    case LeafletMapPointShape.Triangle:
+      return polygon(radius * 2, 3)
+    case LeafletMapPointShape.Square:
+      return polygon(radius * 2, 4)
+    case LeafletMapPointShape.Circle:
+    case LeafletMapPointShape.Ring:
+    default:
+      return circlePath(x, y, radius)
+  }
+}
+
+export function getDonutData<D extends GenericDataRecord> (
+  d: LeafletMapClusterDatum<D> | LeafletMapPointDatum<D>,
+  colorMap: LeafletMapPointStyles<D>
+): LeafletMapPieDatum[] {
+  return Object.keys(colorMap).map(key => ({
+    name: key,
+    value: d[key] as number,
+    color: colorMap[key].color,
+    className: colorMap[key].className,
+  }))
+}
+
+export function geoJsonPointToScreenPoint<D extends GenericDataRecord> (
+  geoPoint: ClusterFeature<LeafletMapClusterDatum<D>> | PointFeature<LeafletMapPointDatum<D>>,
+  i: number,
+  leafletMap: L.Map,
+  config: LeafletMapConfig<D>
+): LeafletMapPoint<D> {
+  const zoomLevel = leafletMap.getZoom()
+  const isCluster = (geoPoint.properties as LeafletMapClusterDatum<D>).cluster
+  const clusterIndex = (geoPoint.properties as LeafletMapClusterDatum<D>).clusterIndex
+  const clusterPoints = isCluster ? clusterIndex.getLeaves((geoPoint.properties as LeafletMapClusterDatum<D>).cluster_id as number, Infinity).map(d => d.properties) : undefined
+  const { x, y } = getPointPos(geoPoint, leafletMap)
+
+  const id = isCluster ? `cluster-${geoPoint.id}` : (getString(geoPoint.properties as LeafletMapPointDatum<D>, config.pointId) ?? geoPoint.geometry.coordinates.join(''))
+  const pointColor = getColor(geoPoint.properties, isCluster ? config.clusterColor : config.pointColor)
+  const radius = getPointRadius(geoPoint, isCluster ? config.clusterRadius : config.pointRadius, zoomLevel)
+  const shape = isCluster ? LeafletMapPointShape.Circle : getString(geoPoint.properties as LeafletMapPointDatum<D>, config.pointShape) as LeafletMapPointShape
+  const isRing = shape === LeafletMapPointShape.Ring
+
+  const donutData = getDonutData(geoPoint.properties, config.colorMap)
+  const maxValue = max(donutData, d => d.value)
+  const maxValueIndex = donutData.map(d => d.value).indexOf(maxValue)
+  const biggestDatum = donutData[maxValueIndex ?? 0]
+
+  const color = isCluster ? pointColor
+    : (isRing ? null : (pointColor ?? biggestDatum?.color))
+  const bbox = { x1: x - radius, y1: y - radius, x2: x + radius, y2: y + radius }
+  const path = getNodePathData({ x: 0, y: 0 }, radius, shape)
+  const _zIndex = 0
+
+  const screenPoint: LeafletMapPoint<D> = {
+    ...geoPoint,
+    id,
+    bbox,
+    radius,
+    donutData,
+    path,
+    color,
+    isCluster,
+    clusterIndex,
+    clusterPoints,
+    _zIndex,
+  }
+
+  return screenPoint
+}
+
+export function shouldClusterExpand<D extends GenericDataRecord> (
+  cluster: LeafletMapPoint<D>,
+  zoomLevel: number,
+  midLevel = 4,
+  maxLevel = 8,
+  maxClusterZoomLevel = 23
+): boolean {
+  if (!cluster) return false
+
+  const clusterExpansionZoomLevel = cluster.clusterIndex.getClusterExpansionZoom(cluster.properties.cluster_id as number)
+  return zoomLevel >= maxLevel ||
+        (zoomLevel >= midLevel && (cluster.properties.point_count < 20 || clusterExpansionZoomLevel >= maxClusterZoomLevel))
+}
+
+export function findPointAndClusterByPointId<D extends GenericDataRecord> (
+  points: LeafletMapPoint<D>[],
+  id: string,
+  pointId: StringAccessor<D>
+): {
+    point: PointFeature<D> | undefined;
+    cluster: LeafletMapPoint<D> | undefined;
+  } {
+  let point
+  let cluster
+  points.forEach(p => {
+    if (p.isCluster) {
+      const leaves = p.clusterIndex.getLeaves((p.properties as LeafletMapClusterDatum<D>).cluster_id as number, Infinity) ?? []
+      const foundPoint = leaves.find(d => getString(d.properties, pointId) === id)
+      if (foundPoint) {
+        point = foundPoint
+        cluster = p
+      }
+    }
+  })
+  return { point, cluster }
+}
+
+export function getNodeRelativePosition<D extends GenericDataRecord> (d: LeafletMapPoint<D>, leafletMap: L.Map): { x: number; y: number } {
+  const paneTransform = getHTMLTransform(leafletMap.getPane('mapPane'))
+  const { x, y } = getPointPos(d, leafletMap)
+  return { x: x + paneTransform[0], y: y + paneTransform[1] }
+}
+
+export function getClusterRadius<D extends GenericDataRecord> (cluster: { points: PointFeature<PointExpandedClusterProperties<D>>[]; cluster: LeafletMapPoint<D> }): number {
+  const { points } = cluster
+  const minX = min<number>(points.map(d => d.properties.dx - d.properties.r))
+  const maxX = max<number>(points.map(d => d.properties.dx + d.properties.r))
+  const minY = min<number>(points.map(d => d.properties.dy - d.properties.r))
+  const maxY = max<number>(points.map(d => d.properties.dy + d.properties.r))
+  return Math.sqrt((maxX - minX) ** 2 + (maxY - minY) ** 2) * 0.5
+}
+
+export function getClustersAndPoints<D extends GenericDataRecord> (
+  clusterIndex: Supercluster<D>,
+  leafletMap: L.Map,
+  customBounds?: [number, number, number, number]
+): (ClusterFeature<LeafletMapClusterDatum<D>> | PointFeature<D>)[] {
+  const leafletBounds = leafletMap.getBounds()
+  const southWest = leafletBounds.getSouthWest()
+  const northEast = leafletBounds.getNorthEast()
+  const bounds = customBounds || [southWest.lng, southWest.lat, northEast.lng, northEast.lat]
+  const zoom = Math.round(leafletMap.getZoom())
+  const points = clusterIndex.getClusters(bounds, zoom) // as ClusterFeature<LeafletMapPointDatum<D>>[]
+
+  for (const p of points) {
+    const point = p as ClusterFeature<LeafletMapClusterDatum<D>>
+    const isCluster = point.properties.cluster
+    if (isCluster) {
+      point.properties.clusterIndex = clusterIndex
+      point.properties.clusterPoints = clusterIndex.getLeaves(point.properties.cluster_id, Infinity).map(d => d.properties)
+    }
+  }
+
+  return points as (ClusterFeature<LeafletMapClusterDatum<D>> | PointFeature<D>)[]
+}

package/{components → src/components}/leaflet-map/renderer/leaflet-maplibre-gl.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-function MaplibreGLLayer (leaflet, maplibre, options) {
+export function MaplibreGLLayer (leaflet, maplibre, options) {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   const Layer = leaflet.Layer.extend({
     options: {
@@ -15,39 +15,39 @@ function MaplibreGLLayer (leaflet, maplibre, options) {
     },
 
     initialize: function (options) {
-      leaflet.setOptions(this, options);
+      leaflet.setOptions(this, options)
 
       // setup throttling the update event when panning
-      this._throttledUpdate = leaflet.Util.throttle(this._update, this.options.updateInterval, this);
+      this._throttledUpdate = leaflet.Util.throttle(this._update, this.options.updateInterval, this)
     },
 
     onAdd: function (map) {
       if (!this._container) {
-        this._initContainer();
+        this._initContainer()
       }
 
-      const paneName = this.getPaneName();
-      map.getPane(paneName).appendChild(this._container);
+      const paneName = this.getPaneName()
+      map.getPane(paneName).appendChild(this._container)
 
-      this._initGL();
+      this._initGL()
 
-      this._offset = this._map.containerPointToLayerPoint([0, 0]);
+      this._offset = this._map.containerPointToLayerPoint([0, 0])
 
       // work around https://github.com/mapbox/mapbox-gl-leaflet/issues/47
       if (map.options.zoomAnimation) {
-        leaflet.DomEvent.on(map._proxy, leaflet.DomUtil.TRANSITION_END, this._transitionEnd, this);
+        leaflet.DomEvent.on(map._proxy, leaflet.DomUtil.TRANSITION_END, this._transitionEnd, this)
       }
     },
 
     onRemove: function (map) {
       if (this._map._proxy && this._map.options.zoomAnimation) {
-        leaflet.DomEvent.off(this._map._proxy, leaflet.DomUtil.TRANSITION_END, this._transitionEnd, this);
+        leaflet.DomEvent.off(this._map._proxy, leaflet.DomUtil.TRANSITION_END, this._transitionEnd, this)
       }
-      const paneName = this.getPaneName();
-      map.getPane(paneName).removeChild(this._container);
+      const paneName = this.getPaneName()
+      map.getPane(paneName).removeChild(this._container)
 
-      this._glMap.remove();
-      this._glMap = null;
+      this._glMap.remove()
+      this._glMap = null
     },
 
     getEvents: function () {
@@ -74,8 +74,8 @@ function MaplibreGLLayer (leaflet, maplibre, options) {
     },
 
     getBounds: function () {
-      const halfSize = this.getSize().multiplyBy(0.5);
-      const center = this._map.latLngToContainerPoint(this._map.getCenter());
+      const halfSize = this.getSize().multiplyBy(0.5)
+      const center = this._map.latLngToContainerPoint(this._map.getCenter())
       return leaflet.latLngBounds(
         this._map.containerPointToLatLng(center.subtract(halfSize)),
         this._map.containerPointToLatLng(center.add(halfSize))
@@ -92,100 +92,100 @@ function MaplibreGLLayer (leaflet, maplibre, options) {
     },
 
     _initContainer: function () {
-      const container = this._container = leaflet.DomUtil.create('div', 'leaflet-gl-layer');
+      const container = this._container = leaflet.DomUtil.create('div', 'leaflet-gl-layer')
 
-      const size = this.getSize();
-      const offset = this._map.getSize().multiplyBy(this.options.padding);
-      container.style.width = `${size.x}px`;
-      container.style.height = `${size.y}px`;
+      const size = this.getSize()
+      const offset = this._map.getSize().multiplyBy(this.options.padding)
+      container.style.width = `${size.x}px`
+      container.style.height = `${size.y}px`
 
-      const topLeft = this._map.containerPointToLayerPoint([0, 0]).subtract(offset);
+      const topLeft = this._map.containerPointToLayerPoint([0, 0]).subtract(offset)
 
-      leaflet.DomUtil.setPosition(container, topLeft);
+      leaflet.DomUtil.setPosition(container, topLeft)
     },
 
     _initGL: function () {
-      const center = this._map.getCenter();
+      const center = this._map.getCenter()
 
       const options = leaflet.extend({}, this.options, {
         container: this._container,
         center: [center.lng, center.lat],
         zoom: this._map.getZoom() - 1,
         attributionControl: false,
-      });
+      })
 
-      this._glMap = new maplibre.Map(options);
+      this._glMap = new maplibre.Map(options)
 
       // allow GL base map to pan beyond min/max latitudes
-      this._glMap.transform.latRange = null;
-      this._glMap.transform.maxValidLatitude = Infinity;
+      this._glMap.transform.latRange = null
+      this._glMap.transform.maxValidLatitude = Infinity
 
-      this._transformGL(this._glMap);
+      this._transformGL(this._glMap)
 
       if (this._glMap._canvas.canvas) {
         // older versions of mapbox-gl surfaced the canvas differently
-        this._glMap._actualCanvas = this._glMap._canvas.canvas;
+        this._glMap._actualCanvas = this._glMap._canvas.canvas
       } else {
-        this._glMap._actualCanvas = this._glMap._canvas;
+        this._glMap._actualCanvas = this._glMap._canvas
       }
 
       // treat child <canvas> element like leaflet.ImageOverlay
-      const canvas = this._glMap._actualCanvas;
-      leaflet.DomUtil.addClass(canvas, 'leaflet-image-layer');
-      leaflet.DomUtil.addClass(canvas, 'leaflet-zoom-animated');
+      const canvas = this._glMap._actualCanvas
+      leaflet.DomUtil.addClass(canvas, 'leaflet-image-layer')
+      leaflet.DomUtil.addClass(canvas, 'leaflet-zoom-animated')
       if (this.options.interactive) {
-        leaflet.DomUtil.addClass(canvas, 'leaflet-interactive');
+        leaflet.DomUtil.addClass(canvas, 'leaflet-interactive')
       }
       if (this.options.className) {
-        leaflet.DomUtil.addClass(canvas, this.options.className);
+        leaflet.DomUtil.addClass(canvas, this.options.className)
       }
     },
 
     _update: function (e) {
       // update the offset so we can correct for it later when we zoom
-      this._offset = this._map.containerPointToLayerPoint([0, 0]);
+      this._offset = this._map.containerPointToLayerPoint([0, 0])
 
       if (this._zooming) {
         return
       }
 
-      const size = this.getSize();
-      const container = this._container;
-      const gl = this._glMap;
-      const offset = this._map.getSize().multiplyBy(this.options.padding);
-      const topLeft = this._map.containerPointToLayerPoint([0, 0]).subtract(offset);
+      const size = this.getSize()
+      const container = this._container
+      const gl = this._glMap
+      const offset = this._map.getSize().multiplyBy(this.options.padding)
+      const topLeft = this._map.containerPointToLayerPoint([0, 0]).subtract(offset)
 
-      leaflet.DomUtil.setPosition(container, topLeft);
+      leaflet.DomUtil.setPosition(container, topLeft)
 
-      this._transformGL(gl);
+      this._transformGL(gl)
 
       if (gl.transform.width !== size.x || gl.transform.height !== size.y) {
-        container.style.width = `${size.x}px`;
-        container.style.height = `${size.y}px`;
+        container.style.width = `${size.x}px`
+        container.style.height = `${size.y}px`
         if (gl._resize !== null && gl._resize !== undefined) {
-          gl._resize();
+          gl._resize()
         } else {
-          gl.resize();
+          gl.resize()
         }
       } else {
         // older versions of mapbox-gl surfaced update publicly
         if (gl._update !== null && gl._update !== undefined) {
-          gl._update();
+          gl._update()
         } else {
-          gl.update();
+          gl.update()
         }
       }
     },
 
     _transformGL: function (gl) {
-      const center = this._map.getCenter();
+      const center = this._map.getCenter()
 
       // gl.setView([center.lat, center.lng], this._map.getZoom() - 1, 0);
       // calling setView directly causes sync issues because it uses requestAnimFrame
 
-      const tr = gl.transform;
-      tr.center = maplibre.LngLat.convert([center.lng, center.lat]);
-      tr.zoom = this._map.getZoom() - 1;
+      const tr = gl.transform
+      tr.center = maplibre.LngLat.convert([center.lng, center.lat])
+      tr.zoom = this._map.getZoom() - 1
     },
 
     // update the map constantly during a pinch zoom
@@ -193,81 +193,79 @@ function MaplibreGLLayer (leaflet, maplibre, options) {
       this._glMap.jumpTo({
         zoom: this._map.getZoom() - 1,
         center: this._map.getCenter(),
-      });
+      })
     },
 
     // borrowed from leaflet.ImageOverlay
     // https://github.com/Leaflet/Leaflet/blob/master/src/layer/ImageOverlay.js#L139-L144
     _animateZoom: function (e) {
-      const scale = this._map.getZoomScale(e.zoom);
-      const padding = this._map.getSize().multiplyBy(this.options.padding * scale);
-      const viewHalf = this.getSize()._divideBy(2);
+      const scale = this._map.getZoomScale(e.zoom)
+      const padding = this._map.getSize().multiplyBy(this.options.padding * scale)
+      const viewHalf = this.getSize()._divideBy(2)
       // corrections for padding (scaled), adapted from
       // https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L1490-L1508
       const topLeft = this._map.project(e.center, e.zoom)
         ._subtract(viewHalf)
         ._add(this._map._getMapPanePos()
-          .add(padding))._round();
+          .add(padding))._round()
       const offset = this._map.project(this._map.getBounds().getNorthWest(), e.zoom)
-        ._subtract(topLeft);
+        ._subtract(topLeft)
 
       leaflet.DomUtil.setTransform(
         this._glMap._actualCanvas,
         offset.subtract(this._offset),
         scale
-      );
+      )
     },
 
     _zoomStart: function (e) {
-      this._zooming = true;
+      this._zooming = true
     },
 
     _zoomEnd: function () {
-      const scale = this._map.getZoomScale(this._map.getZoom());
+      const scale = this._map.getZoomScale(this._map.getZoom())
 
       leaflet.DomUtil.setTransform(
         this._glMap._actualCanvas,
         // https://github.com/mapbox/mapbox-gl-leaflet/pull/130
         null,
         scale
-      );
+      )
 
-      this._zooming = false;
+      this._zooming = false
 
-      this._update();
+      this._update()
     },
 
     _transitionEnd: function (e) {
       leaflet.Util.requestAnimFrame(function () {
-        const zoom = this._map.getZoom();
-        const center = this._map.getCenter();
+        const zoom = this._map.getZoom()
+        const center = this._map.getCenter()
         const offset = this._map.latLngToContainerPoint(
           this._map.getBounds().getNorthWest()
-        );
+        )
 
         // reset the scale and offset
-        leaflet.DomUtil.setTransform(this._glMap._actualCanvas, offset, 1);
+        leaflet.DomUtil.setTransform(this._glMap._actualCanvas, offset, 1)
 
         // enable panning once the gl map is ready again
         this._glMap.once('moveend', leaflet.Util.bind(function () {
-          this._zoomEnd();
-        }, this));
+          this._zoomEnd()
+        }, this))
 
         // update the map position
         this._glMap.jumpTo({
           center: center,
           zoom: zoom - 1,
-        });
-      }, this);
+        })
+      }, this)
     },
 
     _resize: function (e) {
-      this._transitionEnd(e);
+      this._transitionEnd(e)
     },
-  });
+  })
 
   return new Layer(options)
 }
 
-export { MaplibreGLLayer };
-//# sourceMappingURL=leaflet-maplibre-gl.js.map

package/src/components/leaflet-map/renderer/map-style.ts

@@ -0,0 +1,24 @@
+import { StyleSpecification, LayerSpecification } from 'maplibre-gl'
+
+import mapLibreBaseSettings from './mapboxgl/mapboxgl-settings.json'
+import mapLibreDarkTheme from './mapboxgl/mapboxgl-dark-theme.json'
+import mapLibreLightTheme from './mapboxgl/mapboxgl-light-theme.json'
+
+
+export type MapLibreStyleSpecs = StyleSpecification
+
+export const MapLibreArcticDark: MapLibreStyleSpecs = {
+  ...(mapLibreBaseSettings as StyleSpecification),
+  layers: [
+    ...mapLibreDarkTheme.layers,
+    ...mapLibreBaseSettings.layers,
+  ] as Array<LayerSpecification>,
+}
+
+export const MapLibreArcticLight: MapLibreStyleSpecs = {
+  ...(mapLibreBaseSettings as StyleSpecification),
+  layers: [
+    ...mapLibreLightTheme.layers,
+    ...mapLibreBaseSettings.layers,
+  ] as Array<LayerSpecification>,
+}

package/src/components/leaflet-map/renderer/mapboxgl/mapboxgl-dark-theme.json

@@ -0,0 +1,35 @@
+{
+  "layers": [
+    {
+      "id": "background",
+      "layout": {
+        "visibility": "visible"
+      },
+      "paint": {
+        "background-color": "#5C627A"
+      },
+      "type": "background"
+    },
+    {
+      "filter": [
+        "all",
+        [
+          "!=",
+          "intermittent",
+          1
+        ]
+      ],
+      "id": "water",
+      "layout": {
+        "visibility": "visible"
+      },
+      "metadata": {},
+      "paint": {
+        "fill-color": "#2A2D39"
+      },
+      "source": "openmaptiles",
+      "source-layer": "water",
+      "type": "fill"
+    }
+  ]
+}