Is there a way to modify an individual column in a HexagonLayer?

Question

So I created a flat HexagonLayer and have various interactions tied to the onClick prop as shown below.

My goal now is to modify the individual column that was clicked by adding an outline, changing the color for that column, or something else along those lines. I could probably come up with a brute force resolution by adding another layer beneath this one, but the documentation doesn't go into much detail on this and I wanted to see if there was possibly another route to take that would modify the existing layer.

I would also like to obtain info such as the number of points within a given column, but I would imagine that's related to the first part.

Here's what I currently have:

// Here's where I'm creating the settings for the HexagonLayer
const hexagonLayer = {
  id: 'hexagon-layer',
  data: props.G.cells,
  pickable: true,
  extruded: true,
  radius: 50,
  elevationScale: 0,
  autoHighlight: true,
  opacity: 0.3,
  getPosition: d => d.COORDINATES,
  // Here's the onClick interactions
  onClick: (layer, $event) => {
    // I can obtain some information from the layer variable here,
    // but not nearly enough for what I'm trying to accomplish
    switch (props.ctx.phase) {
      case 'setup':
        props.moves.placeUnit(layer.object.position)
        break
      case 'play':
        // Replace with active unit functionality
        const activeUnit = Object.keys(props.G.players[props.ctx.currentPlayer].pieces)[0]

        props.moves.moveUnit(activeUnit, layer.index, layer.object.position)
        break
      default:
        console.error('Unknown phase', props.ctx.phase)
    }
      
    return true
  }
};

// Check some incoming data to add the ducks shown in the screenshot
// Not necessarily related to the question, but they were in the screenshot so I included it
useEffect(() => {
  const tempPieces = []
  props.G.players.forEach(player => {
    Object.values(player.pieces).forEach(piece => {
      tempPieces.push(
        createScenegraphLayer(
          piece.id,
          UNIT_MODEL_MAP[piece.type],
          piece.coordinates, 30
        )
      )
    })
  })
  setPieces(tempPieces)
}, [props.G.cells, props.G.players])

// Rendering the layers
return (
  <div className="Map">
    <DeckGL
      initialViewState={INITIAL_VIEW_STATE}
      controller={true}
      debug={true}>
        <ReactMapGL mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}>
          <Layer {...threeDLayer} />
        </ReactMapGL>
        <HexagonLayer {...hexagonLayer} />
        {pieces.map(piece => (
          <ScenegraphLayer key={piece.id} {...piece} coordinates={piece.data[0].coordinates} />
        ))}
      </DeckGL>
      <ToastContainer />
  </div>
);

score 0 · Answer 1 · answered Nov 13 '20 at 20:33

My goal now is to modify the individual column that was clicked by adding an outline, changing the color for that column, or something else along those lines.

To change the color of the clicked column you could utilize highlightColor and highlightedObjectIndex in the following way:

const App = () => {
  const [highlightedObjectIndex, setHighlightedObjectIndex] = useState(-1);

  const onClick = info => {
    if (info.object) {
      setHighlightedObjectIndex(info.object.index);
    }
  };

  const layers = [
    new HexagonLayer({
      id: "hexagon-layer",
      data,
      pickable: true,
      radius: 200,
      getPosition: d => d.COORDINATES,
      highlightColor: [0, 0, 255],
      highlightedObjectIndex,
      updateTriggers: {
        highlightedObjectIndex
      },
      onClick
    })
  ];

  return (
    <DeckGL
      initialViewState={INITIAL_VIEW_STATE}
      controller={true}
      layers={layers}
    >
    </DeckGL>
  );
};

Is there a way to modify an individual column in a HexagonLayer?

1 Answers1