deck.gl: Add an updateCount to trigger map updates on layers

Deck gl does a shallow comparison of the data to determine if the layer needs to be updated. So the data is not refreshed by default if one of the features in the collection changed position. We could add a `dataComparator` function, but this will be executed for every re-render of the map. We instead use an updateCount to save the number of times a layer has been updated throught the `map.updateLayer[s]` event. This will cause the data to be refreshed whenever the count is incremented.
chairemobilite · Dec 18, 2023 · fc128bc · fc128bc
1 parent a0697ae
commit fc128bc
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/packages/transition-frontend/src/components/map/TransitionMainMap.tsx b/packages/transition-frontend/src/components/map/TransitionMainMap.tsx
@@ -110,6 +110,7 @@ class MainMap extends React.Component<MainMapProps, MainMapState> {
     private mapContainer;
     private draw: MapboxDraw | undefined;
     private mapCallbacks: MapCallbacks;
+    private updateCounts: { [layerName: string]: number } = {};
 
     constructor(props: MainMapProps) {
         super(props);
@@ -511,11 +512,15 @@ class MainMap extends React.Component<MainMapProps, MainMapState> {
         data: GeoJSON.FeatureCollection | ((original: GeoJSON.FeatureCollection) => GeoJSON.FeatureCollection);
     }) => {
         this.layerManager.updateLayer(args.layerName, args.data);
+        this.updateCounts[args.layerName] = (this.updateCounts[args.layerName] || 0) + 1;
         this.setState({ enabledLayers: this.layerManager.getEnabledLayers().map((layer) => layer.id) });
     };
 
     updateLayers = (geojsonByLayerName) => {
         this.layerManager.updateLayers(geojsonByLayerName);
+        Object.keys(geojsonByLayerName).forEach(
+            (layerName) => (this.updateCounts[layerName] = (this.updateCounts[layerName] || 0) + 1)
+        );
         this.setState({ enabledLayers: this.layerManager.getEnabledLayers().map((layer) => layer.id) });
     };
 
@@ -689,7 +694,8 @@ class MainMap extends React.Component<MainMapProps, MainMapState> {
                     events: this.mapEvents.layers[layer.id],
                     activeSection: this.props.activeSection,
                     setDragging: this.setDragging,
-                    mapCallbacks: this.mapCallbacks
+                    mapCallbacks: this.mapCallbacks,
+                    updateCount: this.updateCounts[layer.id] || 0
                 })
             )
             .filter((layer) => layer !== undefined) as Layer[];

diff --git a/packages/transition-frontend/src/components/map/layers/TransitionMapLayer.tsx b/packages/transition-frontend/src/components/map/layers/TransitionMapLayer.tsx
@@ -32,6 +32,7 @@ type TransitionMapLayerProps = {
     activeSection: string;
     setDragging: (dragging: boolean) => void;
     mapCallbacks: MapCallbacks;
+    updateCount: number;
 };
 
 const stringToColor = (hexStringColor: string): [number, number, number] | [number, number, number, number] => [
@@ -80,6 +81,10 @@ const getLineLayer = (props: TransitionMapLayerProps, eventsToAdd): PathLayer =>
         currentTime: 0,
         shadowEnabled: false,
         pickable: true,
+        updateTriggers: {
+            getPath: props.updateCount,
+            getColor: props.updateCount
+        },
         /*updateTriggers: {
       getWidth: routeIndex
     },*/
@@ -97,6 +102,10 @@ const getAnimatedArrowPathLayer = (props: TransitionMapLayerProps, eventsToAdd):
         getWidth: (d, i) => {
             return 70;
         },*/
+        updateTriggers: {
+            getPath: props.updateCount,
+            getColor: props.updateCount
+        },
         getColor: (d) => propertyToColor(d, 'color'),
         getSizeArray: [4, 4],
         speedDivider: 10,
@@ -118,6 +127,9 @@ const getPolygonLayer = (props: TransitionMapLayerProps, eventsToAdd): GeoJsonLa
     }, */
         getFillColor: (d) => propertyToColor(d, 'color'),
         getLineColor: [80, 80, 80],
+        updateTriggers: {
+            getFillColor: props.updateCount
+        },
         getLineWidth: 1,
         ...eventsToAdd
     });
@@ -133,9 +145,10 @@ const getScatterLayer = (props: TransitionMapLayerProps, eventsToAdd): Scatterpl
         getLineColor: [255, 255, 255, 255],
         getRadius: (d, i) => 10,
         radiusScale: 6,
-        /* updateTriggers: {
-          getRadius: nodeIndex
-        }, */
+        updateTriggers: {
+            getPosition: props.updateCount,
+            getFillColor: props.updateCount
+        },
         pickable: true,
         ...eventsToAdd
     });