From 7074ca359c2a822007e08a06b1677f630988e229 Mon Sep 17 00:00:00 2001
From: Chad Burt <chad@underbluewaters.net>
Date: Tue, 8 Aug 2023 12:03:57 -0700
Subject: [PATCH] Heatmaps

---
 .../data/GLStyleEditor/GLStyleEditor.tsx      |  2 +-
 .../extensions/glStyleAutocomplete.ts         | 77 ++++++++++++++++++-
 2 files changed, 77 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/admin/data/GLStyleEditor/GLStyleEditor.tsx b/packages/client/src/admin/data/GLStyleEditor/GLStyleEditor.tsx
index 240db00dc..5957b480d 100644
--- a/packages/client/src/admin/data/GLStyleEditor/GLStyleEditor.tsx
+++ b/packages/client/src/admin/data/GLStyleEditor/GLStyleEditor.tsx
@@ -318,7 +318,7 @@ export default function GLStyleEditor(props: GLStyleEditorProps) {
                   ))}
                 {(() => {
                   const groups = insertOptions.reduce((set, o) => {
-                    if (o.propertyChoice) {
+                    if (o.propertyChoice && o.type === type) {
                       set.add(o.label);
                     }
                     return set;
diff --git a/packages/client/src/admin/data/GLStyleEditor/extensions/glStyleAutocomplete.ts b/packages/client/src/admin/data/GLStyleEditor/extensions/glStyleAutocomplete.ts
index 786fc76d1..a6902e37a 100644
--- a/packages/client/src/admin/data/GLStyleEditor/extensions/glStyleAutocomplete.ts
+++ b/packages/client/src/admin/data/GLStyleEditor/extensions/glStyleAutocomplete.ts
@@ -43,7 +43,8 @@ type LayerType =
   | "symbol"
   | "circle"
   | "raster"
-  | "background";
+  | "background"
+  | "heatmap";
 
 type PropertyValueType =
   | "color"
@@ -1708,5 +1709,79 @@ export function getInsertLayerOptions(layer: GeostatsLayer) {
       }
     }
   }
+  if (layer.geometry === "MultiPoint" || layer.geometry === "Point") {
+    options.push({
+      type: "heatmap",
+      label: "Heatmap of point locations",
+      layer: {
+        type: "heatmap",
+        paint: {
+          "heatmap-intensity": [
+            "interpolate",
+            ["linear"],
+            ["zoom"],
+            0,
+            1,
+            9,
+            3,
+          ],
+          "heatmap-radius": ["interpolate", ["linear"], ["zoom"], 0, 2, 9, 20],
+        },
+        layout: {},
+      },
+    });
+
+    for (const attribute of (layer.attributes || []).filter(
+      (a) => a.type === "number"
+    )) {
+      if (
+        attribute.min !== undefined &&
+        attribute.max &&
+        attribute.max > attribute.min
+      ) {
+        options.push({
+          type: "heatmap",
+          label: "Heatmap of point locations",
+          propertyChoice: {
+            property: attribute.attribute,
+            ...attribute,
+          },
+          layer: {
+            type: "heatmap",
+            paint: {
+              "heatmap-intensity": [
+                "interpolate",
+                ["linear"],
+                ["zoom"],
+                0,
+                1,
+                9,
+                1,
+              ],
+              "heatmap-radius": [
+                "interpolate",
+                ["linear"],
+                ["zoom"],
+                1,
+                2,
+                9,
+                20,
+              ],
+              "heatmap-weight": [
+                "interpolate",
+                ["linear"],
+                ["get", attribute.attribute],
+                attribute.min,
+                0,
+                attribute.max,
+                10,
+              ],
+            },
+            layout: {},
+          },
+        });
+      }
+    }
+  }
   return options;
 }