visgl / flowmap.gl Goto Github PK
View Code? Open in Web Editor NEWFlow map drawing layer for deck.gl
Home Page: https://flowmap.gl
License: Apache License 2.0
Flow map drawing layer for deck.gl
Home Page: https://flowmap.gl
License: Apache License 2.0
Hi I was using @flowmap.gl/react package and recently tried upgrading react-map-gl to v7, after that I'm getting error that @flowmap.gl/react is using old api of react-map-gl. I've tried upgrading @flowmap.gl/react package as well but noticed that it is no longer supported and is being migrated to this repo. Could you advise how to install and use new package or when it will be avaiable?
Hello,
I've been using flowmap.gl and it has what I need but I've just noticed something. There is no prop to be able to change the color of the location based on certain criteria. Similar to getFlowColor (which allow to implement logic to assign the colors), I was expecting to find a getLocationColor (or something like that). Is there any way to do it in the latest version?
Hello, first of all thanks for the great library!
I have an issue when I set clusteringEnabled to false;
Here is my constructor:
new FlowmapLayer({
id: lc.id,
pickable: true,
data: flowData as any,
fadeEnabled: true,
fadeOpacityEnabled: true,
opacity: lc.config.opacity ?? 0.8,
fadeAmount: lc.config.fadeAmount ?? 50,
darkMode: false,
clusteringEnabled: lc.config.clusteringEnabled,
getLocationId: (loc: any) => loc[MODEL_FIELD_MAP[type].location.id],
getLocationLat: (loc: any) => loc[MODEL_FIELD_MAP[type].location.lat],
getLocationLon: (loc: any) => loc[MODEL_FIELD_MAP[type].location.lon],
getLocationName: (loc: any) => loc[MODEL_FIELD_MAP[type].location.name],
getFlowOriginId: (flow: any) => flow[MODEL_FIELD_MAP[type].flow.origin],
getFlowDestId: (flow: any) => flow[MODEL_FIELD_MAP[type].flow.dest],
getFlowMagnitude: (flow: any) => flow[MODEL_FIELD_MAP[type].flow.count],
});
I cannot understand why there is no flow and also location point has almost 1px when I set clusteringEnabled to false. Can you give me any clue? Thanks!
Since I run pnpm upgrade
to the latest @flowmap 8.0.0-alpha27, the error comes:
deck: initialization of CompositeLayer({id: 'flowmap-layer'}): dataProvider.updateLayersData is not a function TypeError: dataProvider.updateLayersData is not a function
basemap render sucessfully, but the flows hidden.
So I check the lock file, I found that @flowmap.gl/layers version is up to 27, but the @flowmap.gl/data version is 8.0.0-y.14
. Downgraded to version 26 and everything works fine. So I guess this is the problem here ๐?
Environment:
OS: MacOSX 14.0
Node: v18.16.0
flowmap.gl: 8.0.0-alpha.26
Reproduce:
Online Playground(open in stackblitz from given react-app example)
Expected Behavior:
Show the map
Actual Behavior:
flowmap data&layers cannot import
Actually I follow the repo examples in my astro app, meet the following errors.
(node:51297) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
[vite] Error when evaluating SSR module /src/components/Map.tsx: failed to import "@flowmap.gl/layers"
export { default as AnimatedFlowLinesLayer } from './AnimatedFlowLinesLayer';
^^^^^^
SyntaxError: Unexpected token 'export'
Give me some suggestions, plz๐. By the way, are there any plans to improve the doc, which will help us build it more easily step by step.
when start and end point go out of screen the flow line between them is hide too.
just want to know is that possible to force flow line to always display even if those points go out of screen ?
Hello,
Thanks for this wonderful package. I have also used FlowmapBlue and noticed that it has a Timeline component.
So, I went ahead and extracted it into its own react component library so that it can be used installed and used independently with this library. The code for it can be found here: https://github.com/muskuloes/flowmap.gl-timeline.
I would like for it to be added to this organization and I am also willing to support it's further development if need be.
Regards
Hi,
Trying to use FlowMapLayer in a vue.js app. Getting error
this.accessors.getLocationCentroid is not a function
at FlowMapAggregateAccessors.getLocationCentroid (FlowMapAggregateAccessors.js?3933:20:1)
data is FlowMapData
Adding layer exactly as in example https://github.com/visgl/flowmap.gl/blob/main/examples/webpack-app/src/app.js
what ca be the problem with this?
Hi @ilyabo!
I am trying to use flowmap.gl library in Observable but am having trouble loading the module there. Iโve looked at this article and tried different tools including jsdelivr, unpkg, etc. but nothing seems to work. Would you be able to advise if it's possible to use this tool in Observable and show a mini example?
Sorry if the question is too amateurish. I am new to JS and Observable. I've been using flowmap.blue R widget, which is a great tool but is not being updated unfortunately.
Thanks,
Andrii
Hello,
I'm trying to add a FlowmapLayer on an existing project which is already using Deck.gl.
I'm not an expert in nx + next.js configuration, but I've tried several things, even with next-transpile-modules (although I didn't know what I was doing).
I am working with a very simple example:
const layers = [
new FlowmapLayer<LocationDatum, FlowDatum>({
id: 'my-flowmap-layer',
od_data,
pickable: true,
})
];
...
<div sx={{ width, height }}>
<DeckGL
width="100%"
height="100%"
controller={true}
layers={layers}
>
<ReactMapGl
mapStyle={BASEMAP.POSITRON}
mapboxAccessToken={process.env.NEXT_PUBLIC_MAP}
/>
</DeckGL>
</div>
and I get the error:
SyntaxError: Unexpected token 'export'
[...]/node_modules/ (flowmap.gl/layers/dist/index.js (1)
Any clue of how can I fix this?
I have been trying to get the webpack-app example running and have only been able to get to the point of this error
VM173 app.js:5671 deck: initialization of CompositeLayer({id: 'my-flowmap-layer'}): dataProvider.updateLayersData is not a function
I'm using the latest master code, deleting the root level package.json and running npm i
and npm run start
from the webpack-app directory,
It seems like the non-react examples might not be up to date and/or the library is only working completely with react-based.
Any help is appreciated.
Thanks!
When we get the object from a FlowmapLayerPickingInfo object, we can not see all the building blocks of the picked object at the highest granularity.
I can see the children but those children themselves might have other children. Is there any function that wen can call and gives us all the nodes that creating a clustered node or the origins/destination of a clustered link?
i got this error message when , deckgl 8.9.8 , flowmap 8.0.0-alpha.25 .
deck: initialization of CompositeLayer({id: 'my-flowmap-layer'}): dataProvider.updateLayersData is not a function
is there any solution to fix this?
I'm interested in adding force directed flow paths, like this:
as described in this paper:
Jenny, Bernhard & Stephen, Daniel & Muehlenhaus, Ian & Marston, Brooke & Sharma, Ritesh & Zhang, Eugene & Jenny, Helen. (2017). Force-directed Layout of Origin-destination Flow Maps. International Journal of Geographical Information Science. 31. 10.1080/13658816.2017.1307378.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.