wip layers tooltip

src/Components/LayerHoveredTooltip/index.js

@@ -0,0 +1,30 @@
+import { Typography, Box } from "@mui/material";
+
+export const LayerHoveredTooltip = (props) => {
+  if (!props.mousePos) return null;
+  const mousePos = props.mousePos;
+  const layerHoveredData = props.layerHoveredData;
+
+  return (
+    <Box
+      sx={{
+        borderRadius: "5%",
+        position: "fixed",
+        // color from theme palette
+        backgroundColor: "primary.opacityDarkBackground",
+        padding: "1vw",
+        color: "primary.main",
+        zIndex: 10,
+        left: mousePos.clientX - 100,
+        top: mousePos.clientY ,
+        display: "flex",
+        flexDirection: "column",
+        pointerEvents: "none",
+      }}
+    >
+      <Typography variant="caption">
+        {layerHoveredData && layerHoveredData}
+      </Typography>
+    </Box>
+  );
+};

src/settings/settings.js

@@ -50,7 +50,6 @@ export const cityIOSettings = {
       { name: "tui", expectUpdate: true },
       { name: "geo_heatmap", expectUpdate: true },
       { name: "traffic", expectUpdate: true },
-
     ],
   },
 };

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

@@ -3,7 +3,12 @@ import { CubeGeometry } from "@luma.gl/engine";
 import { OBJLoader } from "@loaders.gl/obj";
 import { numberToColorHsl } from "../../../../utils/utils";
 
-export default function AccessLayer({ data, intensity, selected }) {
+export default function AccessLayer({
+  data,
+  intensity,
+  selected,
+  setLayerHoveredData,
+}) {
   const accessData = data.access && data.access.features;
   const cube = new CubeGeometry({ type: "x,z", xlen: 0, ylen: 0, zlen: 0 });
   const header = data.GEOGRID.properties.header;
@@ -32,6 +37,18 @@ export default function AccessLayer({ data, intensity, selected }) {
   // });
 
   return new SimpleMeshLayer({
+    onHover: (event) => {
+      if (event.object) {
+        setLayerHoveredData(
+          // create a string with data.access.properties[selected] and value of event.object.properties[selected] to display in the tooltip
+          `${data.access.properties[selected]}: ${Math.floor(
+            event.object.properties[selected] * 100
+          )}%`
+        );
+      }
+    },
+    pickable: true,
+
     id: "ACCESS",
     opacity: 0.1 + intensity / 100,
 

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

@@ -1,7 +1,7 @@
 import { GeoJsonLayer } from "@deck.gl/layers";
 import { numberToColorHsl } from "../../../../utils/utils";
 
-export default function TrafficLayer({ data, opacity }) {
+export default function TrafficLayer({ data, opacity, setLayerHoveredData }) {
   if (data.traffic) {
     // create a new geojson object from `data.traffic`
     // where each feature is a rectangular polygon with the coordinates of the
@@ -59,10 +59,21 @@ export default function TrafficLayer({ data, opacity }) {
     };
 
     return new GeoJsonLayer({
+      onHover: (event) => {
+        if (event.object) {
+          setLayerHoveredData(
+            `traffic: ${
+              Math.floor(event.object.properties.norm_traffic * 100)
+            }%`
+          );
+        }
+      },
+      pickable: true,
+
       id: "TRAFFIC_TRIPS",
       shadowEnabled: false,
       data: newGeoJson,
-      pickable: true,
+
       filled: true,
       extruded: true,
 
@@ -82,7 +93,7 @@ export default function TrafficLayer({ data, opacity }) {
           0,
           1
         );
-        // return the color with the opacity 
+        // return the color with the opacity
         return [rgb[0], rgb[1], rgb[2], 200 + 55 * opacity];
       },
 

src/views/CityScopeJS/DeckglMap/index.js

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
 import PaintBrush from "../../../Components/PaintBrush";
+import { LayerHoveredTooltip } from "../../../Components/LayerHoveredTooltip";
 import { postToCityIO } from "../../../utils/utils";
 import DeckglBase from "./DeckglBase";
 import "mapbox-gl/dist/mapbox-gl.css";
@@ -30,6 +31,9 @@ export default function DeckGLMap() {
   const [hoveredObj, setHoveredObj] = useState();
   const [GEOGRIDDATA, setGEOGRIDDATA] = useState();
 
+  // sets data from all hovered objected currently in the viewport
+  const [layerHoveredData, setLayerHoveredData] = useState();
+
   const pickingRadius = 40;
   const editModeToggle = menuState.editMenuState.EDIT_BUTTON;
   const selectedType = menuState.typesMenuState.SELECTED_TYPE;
@@ -105,6 +109,7 @@ export default function DeckGLMap() {
     }),
 
     ACCESS: AccessLayer({
+      setLayerHoveredData,
       data: cityIOdata,
       selected:
         layersMenu &&
@@ -134,6 +139,7 @@ export default function DeckGLMap() {
     }),
 
     TRAFFIC: TrafficLayer({
+      setLayerHoveredData,
       data: cityIOdata,
       opacity:
         layersMenu &&
@@ -180,14 +186,24 @@ export default function DeckGLMap() {
         onMouseUp={() => setMouseDown(false)}
         onMouseDown={() => setMouseDown(true)}
       >
-        <PaintBrush
-          editOn={editModeToggle}
-          mousePos={mousePos}
-          selectedType={selectedType}
-          pickingRadius={pickingRadius}
-          mouseDown={mouseDown}
-          hoveredObj={hoveredObj}
-        />
+        {layerHoveredData && (
+          <LayerHoveredTooltip
+            layerHoveredData={layerHoveredData}
+            mousePos={mousePos}
+          />
+        )}
+        {/* only show if grid layer is on */}
+        {layersMenu.GRID_LAYER_CHECKBOX &&
+          layersMenu.GRID_LAYER_CHECKBOX.isOn && (
+            <PaintBrush
+              editOn={editModeToggle}
+              mousePos={mousePos}
+              selectedType={selectedType}
+              pickingRadius={pickingRadius}
+              mouseDown={mouseDown}
+              hoveredObj={hoveredObj}
+            />
+          )}
         <DeckglBase
           setDeckGLRef={setDeckGLRef}
           layers={renderDeckLayers()}