visgl / flowmap.gl Goto Github PK

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.

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

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 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,

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?

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 👀?

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

Hello, first of all thanks for the great library!

I have an issue when I set clusteringEnabled to false;

If clusteringEnabled: true

If clusteringEnabled: 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!

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?

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?

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?

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?

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?

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)

Screenshot:

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.