About AnimatedFlowLinesLayer

[lennoxhot]

hi，I have a problem when i set the property animate=true, the animation looks like and i don`t know how to fix it,please help,thanks.

[ilyabo]

Sorry I unfortunately missed your issue when you submitted it. Do you still experience the problem with the latest library version?

[jh-gis]

I am having this issue as well. To animate the flow line, do I just need to add the props into the render function? Or am I missing something else in my code?

`import React, { Component } from "react";
import StaticMap from "react-map-gl";
import { DeckGL } from "deck.gl";
import FlowMapLayer from "@flowmap.gl/core";
import geoViewport from "@mapbox/geo-viewport";

import "./App.css";

const MAPBOX_TOKEN = process.env.REACT_APP_MapboxAccessToken;

const getInitialViewState = () => {
const bbox = [-109.06, 36.99, -102.04, 41.0];
const {
center: [longitude, latitude],
zoom,
} = geoViewport.viewport(
bbox,
[window.innerWidth, window.innerHeight],
undefined,
undefined,
512
);
return {
longitude,
latitude,
zoom,
bearing: 0,
pitch: 0,
};
};

const colors = {
flows: {
scheme: [
// Teal scheme from https://carto.com/carto-colors/
"#d1eeea",
"#a8dbd9",
"#85c4c9",
"#68abb8",
"#4f90a6",
"#3b738f",
"#2a5674",
],
},
locationAreas: {
outline: "rgba(92,112,128,0.5)",
normal: "rgba(187,187,187,0.5)",
selected: "rgba(217,130,43,0.5)",
},
};

export default class App extends Component {
state = {
locations: null,
flows: null,
time: 0,
animate: true,
};

componentDidMount() {
fetch(
${process.env.PUBLIC_URL}/data/US_Counties_AND_Centroids_NoPR_5.5.json
)
.then((response) => response.json())
.then((json) => this.setState({ locations: json }));

fetch(`${process.env.PUBLIC_URL}/data/CO_Origin_flows.json`)
  .then((response) => response.json())
  .then((json) => this.setState({ flows: json }));

}

render() {
const { locations, flows } = this.state;
const layers = [];
if (locations && flows) {
layers.push(
new FlowMapLayer({
colors,
locations,
flows,
pickable: true,
minPickableFlowThickness: 1,
animate: true,
animationCurrentTime: 1,
animationTailLength: 0.25,
getLocationId: (l) => l.properties.GEOID,
getLocationCentroid: (l) => l.properties.Centroid,
getFlowOriginId: (f) => f.origin,
getFlowDestId: (f) => f.dest,
getFlowMagnitude: (f) => f.count2010,
getAnimatedFlowLineStaggering: (f) => f.count2010,
})
);
}

return (
  <DeckGL
    initialViewState={getInitialViewState()}
    controller={true}
    layers={layers}
  >
    <StaticMap mapboxApiAccessToken={MAPBOX_TOKEN} />
  </DeckGL>
);

}
}
`

[ilyabo]

Try to add style={{mixBlendMode: 'screen'}} to <DeckGL …>

[ilyabo]

and pass darkMode: true to new FlowMapLayer({…})

[jh-gis]

I still have an animation that isn't moving, but now the location nodes and flow lines are white. I have updated my code below (I changed some other things as well, but tried it with the above code as well). I really appreciate your help!!

`import React, { Component } from "react";
import StaticMap from "react-map-gl";
import { DeckGL } from "deck.gl";
import FlowMapLayer from "@flowmap.gl/core";
import geoViewport from "@mapbox/geo-viewport";
import FlowMap, { LegendBox, LocationTotalsLegend } from "@flowmap.gl/react";

import "./App.css";

const MAPBOX_TOKEN = process.env.REACT_APP_MapboxAccessToken;

const getInitialViewState = () => {
const bbox = [-109.06, 36.99, -102.04, 41.0];
const {
center: [longitude, latitude],
zoom,
} = geoViewport.viewport(
bbox,
[window.innerWidth, window.innerHeight],
undefined,
undefined,
512
);
return {
longitude,
latitude,
zoom,
bearing: 0,
pitch: 0,
};
};

const colors = {
flows: {
scheme: [
// Teal scheme from https://carto.com/carto-colors/
"#d1eeea",
"#a8dbd9",
"#85c4c9",
"#68abb8",
"#4f90a6",
"#3b738f",
"#2a5674",
],
},
locationAreas: {
outline: "rgba(92,112,128,0.5)",
normal: "rgba(187,187,187,0.5)",
selected: "rgba(217,130,43,0.5)",
},
};

const DARK_COLORS = {
darkMode: true,
flows: {
scheme: [
"rgb(0, 22, 61)",
"rgb(0, 27, 62)",
"rgb(0, 36, 68)",
"rgb(0, 48, 77)",
"rgb(3, 65, 91)",
"rgb(48, 87, 109)",
"rgb(85, 115, 133)",
"rgb(129, 149, 162)",
"rgb(179, 191, 197)",
"rgb(240, 240, 240)",
],
},
locationAreas: {
normal: "#334",
},
outlineColor: "#000",
};

export default class App extends Component {
state = {
locations: null,
flows: null,
time: 0,
};

componentDidMount() {
fetch(
${process.env.PUBLIC_URL}/data/US_Counties_AND_Centroids_NoPR_5.5.json
)
.then((response) => response.json())
.then((json) => this.setState({ locations: json }));

fetch(`${process.env.PUBLIC_URL}/data/CO_Origin_flows.json`)
  .then((response) => response.json())
  .then((json) => this.setState({ flows: json }));

}

render() {
const { locations, flows } = this.state;
const layers = [];
if (locations && flows) {
layers.push(
new FlowMapLayer({
colors: DARK_COLORS,
locations,
flows,
animationCurrentTime: 1,
animationTailLength: 0.25,
animate: true,
darkMode: true,
getLocationId: (l) => l.properties.GEOID,
getLocationCentroid: (l) => l.properties.Centroid,
getFlowOriginId: (f) => f.origin,
getFlowDestId: (f) => f.dest,
getFlowMagnitude: (f) => f.count2010,
})
);
}

return (
  <DeckGL
    initialViewState={getInitialViewState()}
    controller={true}
    layers={layers}
    style={{ mixBlendMode: "screen" }}
  >
    <StaticMap mapboxApiAccessToken={MAPBOX_TOKEN} />
    <LegendBox
      bottom={35}
      left={10}
      style={{ backgroundColor: "#000", color: "#fff" }}
    >
      <LocationTotalsLegend colors={DARK_COLORS} />
    </LegendBox>
  </DeckGL>
);

}
}
`

[ilyabo]

Ah, for the animation to move you need to pass animationCurrentTime and update it in requestAnimationFrame like is done here.

Alternatively, take a look at the new version which I am working on here. There it's much easier to enable the animation

[jh-gis]

Thanks, but I can't quite figure it out. I am a bit new to React and TS so having trouble with understanding where to go next. Do I just need to add lines 140-150 in your above link? If so, where should I add it and how to I pass it? I am trying to pass with "animationCurrentTime: this.state.time," in my FlowMapLayer, but not sure if this is correct and not sure how to incorporate requestAnimationFrame.

[ilyabo]

Try with the new version, it's much easier there: check this example.