Heatmaps

seasketch · Aug 8, 2023 · 7074ca3 · 7074ca3
1 parent 37b2d3a
commit 7074ca3
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 2 deletions.
diff --git 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
@@ -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;
 }