Merge pull request #217 from CityScope/feature/h3-layers

added h3 cluster and h3 hexagon base layers

src/views/CityScopeJS/DeckglMap/deckglLayers/base/H3Cluster.js

@@ -0,0 +1,33 @@
+import {H3ClusterLayer} from '@deck.gl/geo-layers';
+/**
+   * Data format:
+   * 
+      {
+        "color": [R,G,B],
+        "hexIds": [
+          "88283082b9fffff",
+          "88283082b1fffff",
+          "88283082b5fffff",
+          "88283082b7fffff",
+          "88283082bbfffff",
+          "882830876dfffff"
+        ]
+      },
+      {
+   * ]
+   */
+  export default function H3ClusterBaseLayer({data, opacity}){
+
+    return new H3ClusterLayer({
+          id: data.id,
+          data: data.data,
+          pickable: data.properties.pickable || true,
+          getHexagons: d => d.hexIds,
+          getFillColor: d => d.color || [255, 255, 0],
+          getLineColor: data.properties.getLineColor || [255, 255, 255],
+          lineWidthMinPixels: data.properties.lineWidthMinPixels || 2,
+          opacity
+        });
+
+
+  }

src/views/CityScopeJS/DeckglMap/deckglLayers/base/H3Hexagon.js

@@ -0,0 +1,34 @@
+import {H3HexagonLayer} from '@deck.gl/geo-layers';
+/**
+   * Data format:
+   * 
+      {
+        "color": [R,G,B],
+        "hexIds": [
+          "88283082b9fffff",
+          "88283082b1fffff",
+          "88283082b5fffff",
+          "88283082b7fffff",
+          "88283082bbfffff",
+          "882830876dfffff"
+        ]
+      },
+      {
+   * ]
+   */
+  export default function H3HexagonBaseLayer({data, opacity}){
+
+    return new H3HexagonLayer({
+          id: data.id,
+          data: data.data,
+          pickable: data.properties.pickable || true,
+          extruded: data.properties.extruded || true,
+          getHexagon: d => d.hex,
+          getFillColor: d => d.color || [255, (1 - d.elevation / 500) * 255, 0],
+          getElevation: d => d.elevation,
+          elevationScale: data.properties.elevationScale || 20,
+          opacity
+        });
+
+
+  }

src/views/CityScopeJS/DeckglMap/deckglLayers/index.js

@@ -21,3 +21,5 @@ export {default as ScatterplotBaseLayer} from "./base/Scatterplot"
 export {default as ScenegraphBaseLayer} from "./base/Scenegraph"
 export {default as SimpleMeshBaseLayer} from "./base/SimpleMesh"
 export {default as TextBaseLayer} from "./base/TextLayer"
+export {default as H3ClusterBaseLayer} from "./base/H3Cluster"
+export {default as H3HexagonBaseLayer} from "./base/H3Hexagon"

src/views/CityScopeJS/DeckglMap/index.js

@@ -28,6 +28,8 @@ import {
   ScenegraphBaseLayer,
   SimpleMeshBaseLayer,
   TextBaseLayer,
+  H3ClusterBaseLayer,
+  H3HexagonBaseLayer,
 } from "./deckglLayers";
 import { processGridData } from "./deckglLayers/GridLayer";
 import useWebSocket from "react-use-websocket";
@@ -295,6 +297,22 @@ export default function DeckGLMap() {
           layersMenu[content.id] &&
           layersMenu[content.id].slider * 0.01,
       });
+    } else if (type === "H3Cluster") {
+      return H3ClusterBaseLayer({
+        data: content,
+        opacity:
+          layersMenu &&
+          layersMenu[content.id] &&
+          layersMenu[content.id].slider * 0.01,
+      });
+    } else if (type === "H3Hexagon") {
+      return H3HexagonBaseLayer({
+        data: content,
+        opacity:
+          layersMenu &&
+          layersMenu[content.id] &&
+          layersMenu[content.id].slider * 0.01,
+      });
     }
   }
 

src/views/CityScopeJS/MenuContainer/LayersMenu/index.js

@@ -126,7 +126,6 @@ function LayersMenu() {
             slider: 50,
           }})
         }
-        console.log(moduleName)
         // if the module name is in the data for this CS instance, make a checkbox
         toggleListArr.push(
           <Box key={"box_" + moduleName}>