How do I run this code locally?

[VinayakTekade]

Hello, I'm a beginner at this. Could you please explain to me how do I run this code locally?

[jhackshaw]

Sure! First you'll need to install node js if you haven't. I recommend nvm.

Then, from a command line, the following steps should help. I have not tested on windows, but it should work.

npm install
npm run develop

It is built using GatsbyJS, so their docs might help as well.

Please let me know how it goes.

[VinayakTekade]

When I run npm run develop after installing the dependencies. I'm getting these errors.

It seems like a file named page-data.json is missing and causing these errors. What shall I do to fix it?

[jhackshaw]

I do need to do some dependency upgrades, but there are a number of breaking changes in the gatsby dependencies. I just cloned the repo from scratch and it's working, can you give your node version and OS?

[VinayakTekade]

Hi @jhackshaw I'm on Windows 11 21H2 Build 22000.675 and the node version is v16.15.0.

[Sudarshan-Navale]

Hi @jhackshaw I'm also facing the same issue as @VinayakTekade. could you please help me here. I'm using Win 10 and my node version is 16.14.2.

[Rajabov-Guru]

@VinayakTekade It's all about deck.gl. You need to update the version and register layers in props, not in children. It works for me

[rotemdan]

Using the advice on this thread, which unfortunately didn't actually give the code (why?), or suggested a pull request, I tried to figure it out myself, though I am not that familiar with React myself (it may be that I got something wrong and not aware of it). I was able to get it to work. Here are the changes I made, for anyone else interested in the future:

I updated the deck.gl package to the latest version (currently 8.9.21).

In src/components/MapPlot.jsx I changed:

      <DeckGL viewState={viewport}>
        <PathLayer
          id="path-layer"
          data={plotPaths}
          getPath={d => d.path}
          getColor={d => d.color}
          pickable={true}
          widthMinPixels={4}
          widthMaxPixels={8}
        />
        <ScatterplotLayer
          id="scatter-layer"
          data={plotPoints}
          pickable={true}
          opacity={0.8}
          getFillColor={p => p.color}
          radiusMinPixels={6}
          raduisMaxPixels={8}
        />
      </DeckGL>

To:

      <DeckGL viewState={viewport} layers={[
        new PathLayer({
          id: "path-layer",
          data: plotPaths,
          getPath: d => d.path,
          getColor: d => d.color,
          pickable: true,
          widthMinPixels: 4,
          widthMaxPixels: 8,
        }),
        new ScatterplotLayer({
          id: "scatter-layer",
          data: plotPoints,
          pickable: true,
          opacity: 0.8,
          getFillColor: p => p.color,
          radiusMinPixels: 6,
          radiusMaxPixels: 8
        })
      ]}>

(raduisMaxPixels looked like a typo, so I changed it to radiusMaxPixels).

If this makes sense as a patch, it may be a good idea to integrate it into the code, so this problem wouldn't be an issue for anyone. I'll test it a bit to see if it works fine and may send a pull request in the future.

[jhackshaw]

Hey @rotemdan , this is fantastic thanks for taking a look! I would absolutely be willing to review a pull request with these changes.