Deck.gl: setProps not updating the layer

Created on 6 Jan 2020  路  2Comments  路  Source: visgl/deck.gl

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);
});
question

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:

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.

All 2 comments

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

Was this page helpful?
0 / 5 - 0 ratings