feat: add heatmap layer

src/layers/Heat.js

@@ -0,0 +1,20 @@
+import Layer from './Layer'
+import { heatLayer } from '../utils/layers'
+
+class Heat extends Layer {
+    constructor(options) {
+        super(options)
+
+        this.createSource()
+        this.createLayers()
+    }
+
+    createLayers() {
+        const id = this.getId()
+        const isInteractive = false
+
+        this.addLayer(heatLayer({ id }), { isInteractive })
+    }
+}
+
+export default Heat

src/layers/layerTypes.js

@@ -4,6 +4,7 @@ import Choropleth from './Choropleth'
 import Boundary from './Boundary'
 import Markers from './Markers'
 import Events from './Events'
+import Heat from './Heat'
 import ClientCluster from './ClientCluster'
 import DonutCluster from './DonutCluster'
 import ServerCluster from './ServerCluster'
@@ -13,13 +14,14 @@ import GeoJson from './GeoJson'
 import LayerGroup from './LayerGroup'
 
 export default {
-    vectorStyle: VectorStyle, //basemap /externalLayer
+    vectorStyle: VectorStyle, // basemap / externalLayer
     tileLayer: TileLayer, // basemap / external layer
     wmsLayer: TileLayer, // external layer
     choropleth: Choropleth, // thematic layer
     boundary: Boundary, // boundary layer
     markers: Markers, // facility layer
     events: Events, // event layer
+    heat: Heat, // event layer
     clientCluster: ClientCluster, // event layer
     donutCluster: DonutCluster, // event layer
     serverCluster: ServerCluster, // event layer

src/utils/layers.js

@@ -143,3 +143,41 @@ export const clusterCountLayer = ({ id, color, opacity }) => ({
         'text-opacity': opacity ?? defaults.opacity,
     },
 })
+
+// Layer with heat surface
+export const heatLayer = ({ id, source }) => ({
+    id: `${id}-heat`,
+    type: 'heatmap',
+    source: source || id,
+    paint: {
+        // Increase the heatmap weight based on frequency and property magnitude
+        'heatmap-weight': 1,
+        // Increase the heatmap color weight weight by zoom level
+        // heatmap-intensity is a multiplier on top of heatmap-weight
+        'heatmap-intensity': 1,
+        // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
+        // Begin color ramp at 0-stop with a 0-transparency color
+        // to create a blur-like effect.
+        'heatmap-color': [
+            'interpolate',
+            ['linear'],
+            ['heatmap-density'],
+            0,
+            'rgba(33,102,172,0)',
+            0.2,
+            'rgb(103,169,207)',
+            0.4,
+            'rgb(209,229,240)',
+            0.6,
+            'rgb(253,219,199)',
+            0.8,
+            'rgb(239,138,98)',
+            1,
+            'rgb(178,24,43)',
+        ],
+        // Adjust the heatmap radius by zoom level
+        'heatmap-radius': 30,
+        // Transition from heatmap to circle layer by zoom level
+        'heatmap-opacity': 1,
+    },
+})