menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

flowmap.blue

Geographic flow map visualization with flowmap.blue

Channels
Team

flowmap.gl

February 18, 2021 at 3:37pm
I don't know if this is the right place to ask this, but since you are also the author of flowmap.gl I though maybe it made sense.
I am new to react and I'm trying to use flowmap.gl. I would like to show info about the flows or the locations when someone hovers over them. Is this possible? I was playing around with the onHover prop, but not sure how to use it.
So far I got this
import React from "react"; import { StaticMap } from "react-map-gl"; import { DeckGL } from "deck.gl"; import FlowMapLayer from "/core"; import * as ReactDOM from "react-dom";
const MAPBOX_TOKEN = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
const locations = [ { id: 1, name: "New York", lat: 40.713543, lon: -74.011219 }, { id: 2, name: "London", lat: 51.507425, lon: -0.127738 }, { id: 3, name: "Rio de Janeiro", lat: -22.906241, lon: -43.180244 }, ];
const flows = [ { origin: 1, dest: 2, count: 42 }, { origin: 2, dest: 1, count: 51 }, { origin: 3, dest: 1, count: 50 }, { origin: 2, dest: 3, count: 400 }, { origin: 1, dest: 3, count: 22 }, { origin: 3, dest: 2, count: 42 }, ];
ReactDOM.render( <DeckGL controller={true} initialViewState={{ longitude: 0, latitude: 0, zoom: 1 }} layers={[ new FlowMapLayer({ id: "my-flowmap-layer", locations, flows, getLocationCentroid: (loc) => [loc.lon, loc.lat], onHover: (flow) => flow.count, }), ]} > <StaticMap mapboxApiAccessToken={MAPBOX_TOKEN} /> </DeckGL>, document.body );