deck.gl

How can I get onHover to work for deck.gl MVTLayer?


The deck.gl MVTLayer inherits from Layer that has onHover enabled which together with pickable should give interactivity. I am trying to get interactivity to work so I can do a popup with the data I hover. But in below code, I can get the onClick event to fire, but not the onHover event. what am I doing wrong

Thanks :)

import React from "react";
import DeckGL from "@deck.gl/react";
import { MVTLayer } from "@deck.gl/geo-layers";

const INITIAL_VIEW_STATE = {
  longitude: -122.41669,
  latitude: 37.7853,
  zoom: 13,
  pitch: 0,
  bearing: 0
};

const layer = new MVTLayer({
  id: "MVTLayer",
  data: [
    "https://tiles-a.basemaps.cartocdn.com/vectortiles/carto.streets/v1/{z}/{x}/{y}.mvt"
  ],
  stroked: false,
  getLineColor: [255, 0, 0],
  getFillColor: (f) => {
    switch (f.properties.layerName) {
      case "poi":
        return [0, 0, 0];
      case "water":
        return [120, 150, 180];
      case "building":
        return [255, 0, 0];
      default:
        return [240, 240, 240];
    }
  },
  getPointRadius: 2,
  pointRadiusUnits: "pixels",
  getLineWidth: (f) => {
    switch (f.properties.class) {
      case "street":
        return 6;
      case "motorway":
        return 10;
      default:
        return 1;
    }
  },
  maxZoom: 14,
  minZoom: 0,
  onHover: (info) => console.log("Hover", info.object),
  onClick: (info) => console.log("Click", info.object),
  pickable: true
});

export default function App() {
  return (
    <DeckGL
      initialViewState={INITIAL_VIEW_STATE}
      controller={true}
      layers={[layer]}
    ></DeckGL>
  );
}

Solution

  • It works .... I think I had a dodgy chrome instance running