So i'm trying to create a geojson layer and change the color when hovering at the area, but it didnt work
import boundaries from "./borough-boundaries.json";
import { GeoJsonLayer } from "@deck.gl/layers";
import { MapboxLayer } from "@deck.gl/mapbox";
var mapboxgl = require("mapbox-gl/dist/mapbox-gl.js");
const MAPBOX_ACCESS_TOKEN =
"token";
const MAPBOX_STYLE = "style";
const COLOR_MAP = [
[237, 37, 78],
[249, 220, 92],
[244, 255, 253],
[70, 83, 98],
[244, 232, 124]
];
let map;
let selected = -1;
const initData = () => {
var features = boundaries.features;
features.sort((a, b) => +a.properties.boro_code - +b.properties.boro_code);
features.forEach((e, i) => {
e.properties.color = COLOR_MAP[i];
e.properties.selected = false;
});
boundaries.features = features;
};
const getFillColor = feature_data =>
feature_data.properties.selected
? feature_data.properties.color
: [...feature_data.properties.color, 127];
function initMap() {
mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN;
map = new mapboxgl.Map({
center: [-73.715638255, 40.73577180300003],
zoom: 10,
container: "map",
style: MAPBOX_STYLE
});
}
const boundaryLayer = new MapboxLayer({
id: "boundary-layer",
type: GeoJsonLayer,
data: boundaries,
pickable: true,
getFillColor,
onHover: ({ index }) => {
selected = index;
boundaries.features.forEach((e, i) => {
e.properties.selected = i === index;
});
boundaryLayer.setProps({ getFillColor });
},
onClick: render
});
function render() {
boundaryLayer.setProps({ getFillColor });
}
initData();
initMap();
map.on("load", () => {
map.addLayer(boundaryLayer);
});
When you call setProps, you did not pass any new prop values. deck.gl does not re-evaluate accessors unless it is explicitly asked to. You need to do something like this:
boundaryLayer.setProps({
getFillColor,
updateTriggers: {
getFillColor: selected
}
}
See updateTriggers
@ibgreen This is an example where React conventions become confusing when used with imperative APIs. I think a case can be made that calling layer.setProps should not have to use updateTriggers.
Ah thanks.
Sorry for the late response
Most helpful comment
When you call
setProps, you did not pass any new prop values. deck.gl does not re-evaluate accessors unless it is explicitly asked to. You need to do something like this:See updateTriggers
@ibgreen This is an example where React conventions become confusing when used with imperative APIs. I think a case can be made that calling
layer.setPropsshould not have to useupdateTriggers.