teralytics / flowmap.gl Goto Github PK

tslint is deprecated

The Selectors class has a grown quite substantially. Maybe some of the logic doesn't need to be a selector. Re-evaluate the thing.

tslint is deprecated

I don't have a lot of experience in react or node development so this could definitely be a quirk of my particular setup but when running the commands listed in the developing flowmap.gl section of the readme I'm not getting a storybook that knows about flowmap at all...Cannot find module '@flowmap.gl/core' is the error (full details below).

I did also have to manually install the storybook command line tool as well using the below command so I'm not sure if that is related.

npm i --save-dev @storybook/react

[./node_modules/strip-ansi/index.js] 161 bytes {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 2.16 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true] (webpack)-hot-middleware/client.js?reload=true 7.59 KiB {vendors~main} [built]
    + 793 hidden modules

ERROR in ./src/index.tsx
Module not found: Error: Can't resolve '@flowmap.gl/react' in '/Users/jamescook/git/flowmap.gl/examples/src'
 @ ./src/index.tsx 29:27-55
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

ERROR in ./src/GSheetsExample.tsx
Module not found: Error: Can't resolve '@flowmap.gl/react' in '/Users/jamescook/git/flowmap.gl/examples/src'
 @ ./src/GSheetsExample.tsx 26:27-55
 @ ./src/index.tsx
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

ERROR in [at-loader] ./src/NonInteractiveExample.tsx:52:28
    TS2552: Cannot find name 'FlowMapLayer'. Did you mean 'flowMapLayer'?

ERROR in [at-loader] ./src/NonInteractiveExample.tsx:56:43
    TS2339: Property 'properties' does not exist on type 'Location'.

ERROR in [at-loader] ./src/index.tsx:18:46
    TS2307: Cannot find module '@flowmap.gl/core'.

ERROR in [at-loader] ./src/index.tsx:19:101
    TS2307: Cannot find module '@flowmap.gl/react'.

ERROR in [at-loader] ./src/GSheetsExample.tsx:18:84
    TS2307: Cannot find module '@flowmap.gl/react'.
Child HtmlWebpackCompiler:
                          Asset     Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  558 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 1.75 KiB {HtmlWebpackPlugin_0} [built]
    [./node_modules/lodash/lodash.js] 527 KiB {HtmlWebpackPlugin_0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {HtmlWebpackPlugin_0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {HtmlWebpackPlugin_0} [built]

ref #1:

ref #2:

In the case that I want to handle manually the selectedLocationIds (I believe that's a possibility since we can pass the list as an attribute), there's no way to set selectedLocationIds to null since it checks if it's null before passing it to the state:

I believe that the solution should be as simple as changing that line to

if (typeof(props.selectedLocationIds) !== 'undefined' && props.selectedLocationIds !== state.selectedLocationIds)

I tried locally and it works.

I'm using the interleaved integration between deck.gl and Maplibre GL: https://deck.gl/docs/get-started/using-with-map

It works fine when I test with an ArcLayer:

import { Map } from "maplibre-gl";
import { MapboxLayer } from "@deck.gl/mapbox";
import { ArcLayer } from "@deck.gl/layers";

const map = new Map({
  container: "map",
  style: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
});

map.on("load", () => {
  map.addLayer(
    new MapboxLayer({
      id: "deckgl-arc",
      type: ArcLayer,
      data: [
        {
          source: [-122.3998664, 37.7883697],
          target: [-122.400068, 37.7900503],
        },
      ],
      getSourcePosition: (d) => d.source,
      getTargetPosition: (d) => d.target,
      getSourceColor: [255, 208, 0],
      getTargetColor: [0, 128, 255],
      getWidth: 8,
    })
  );
});

When I try the same with FlowMapLayer I get an error:

Uncaught TypeError: Class constructor CompositeLayer cannot be invoked without 'new'

import { Map } from "maplibre-gl";
import { MapboxLayer } from "@deck.gl/mapbox";
import FlowMapLayer from "@flowmap.gl/core";

const map = new Map({
  container: "map",
  style: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
});

map.on("load", () => {
  map.addLayer(
    new MapboxLayer({
      id: "deckgl-flow",
      type: FlowMapLayer,
      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,
        },
      ],
      flows: [
        { origin: 1, dest: 2, count: 42 },
        { origin: 2, dest: 1, count: 51 },
        { origin: 3, dest: 1, count: 50 },
        { origin: 2, dest: 3, count: 40 },
        { origin: 1, dest: 3, count: 22 },
        { origin: 3, dest: 2, count: 42 },
      ],
      getFlowMagnitude: (flow) => flow.count || 0,
      getFlowOriginId: (flow) => flow.origin,
      getFlowDestId: (flow) => flow.dest,
      getLocationId: (loc) => loc.id,
      getLocationCentroid: (location) => [location.lon, location.lat],
    })
  );
});

https://github.com/MasterMaps/flowmap/blob/main/src/Map.js

Any idea what could be wrong?

There is no corresponding option in v6.1.0.
v4.0.0 has a corresponding option.

[my used version v6.1.0]
pickable: false, => not working
opacity: 0.1 ~ 1 => not working

my flowmap.gl viewing logics
=> as in the example in [https://deck.gl/showcases/gallery/mapbox-layer]
deck.gl interleaving(MapboxLayer()) used FlowMaplayer display.

Hello,

Is it possible to change the locationArea fill color when they are at normal state without the warning printing?
I am trying to match the locationArea color to match the default mapbox shape tile color and change the opacity when a locationArea is hovered.

For example, I have :
locationAreas: { normal: "rgba(0,0,0,0)" }

And it keeps on giving me this warning, colors.js?4931:96 Invalid color: rgba(NaN, NaN, NaN, 0.5)
I have tried adding the color in as hex #fff0 but no luck..

Thank you in advance!

How do I control the animation speed of the flow?
I am currently passing a number variable through requestAnimationFrame but can't seem to control the speed of the animation unlike the example..

Hi - when I try set animate: true in my fork of flowmap.gl-purejs-example (neon-ninja/flowmap.gl-purejs-example@cfdcc0b), I get the following error:

layers-pass.js:186 deck: error during drawing of Layer({id: 'my-flowmap-layer-my-flowmap-layer:::FLOWS'}) TypeError: Cannot read property 'length' of undefined
    at toTypedArray (uniforms.js:37)
    at toFloatArray (uniforms.js:62)
    at eval (uniforms.js:189)
    at Program.setUniforms (program.js:255)
    at Model.draw (model.js:306)
    at AnimatedFlowLinesLayer.draw (AnimatedFlowLinesLayer.js:147)
    at eval (layer.js:883)
    at withParameters (unified-parameter-api.js:96)
    at AnimatedFlowLinesLayer.drawLayer (layer.js:852)
    at DrawLayersPass._drawLayersInViewport (layers-pass.js:175)

Here's a live repro: https://neon-ninja.github.io/flowmap.gl-purejs-example/dist/

Might also affect #56 as this could possibly reduce the number of layers we need to draw.

With OPTICS it's possible to generate hierarchical clusters in one pass:
https://en.wikipedia.org/wiki/OPTICS_algorithm#Extracting_the_clusters

https://github.com/uhho/density-clustering

when I installed flowmap.gl and run 'npm i flowmap.gl', an error was occured.

npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"0.14.x - 16.x" from [email protected]
npm ERR! node_modules/flowmap.gl
npm ERR! flowmap.gl@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Does flowmap.gl not support higher versions of react16?

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.

Is it possible to control the size of the line?
I'm trying to display flow where weight is not a concern but I still think the lines are too tichk.
Can I change them myself using a custom rule?

(circles are missing) when first constructed without flows

This layer does not work with the latest version of Deck GL (version 7.2.0 as of 12/08/2019) - highest tested version of Deck GL at the time of writing is 6.3.1

The error message is as follows:
./node_modules/flowmap.gl/dist-esm/FlowLinesLayer/FlowLinesLayer.js Module not found: Can't resolve 'luma.gl'

After installing Luma.gl there is a "multiple versions of luma gl detected" error message.