astrosat / windgl Goto Github PK

The wind visualization doesn't wrap around the date line properly. We probably need to work out how to make the shaders do the job.

`import 'mapbox-gl/dist/mapbox-gl.css';
var mapboxgl = require('mapbox-gl');
import {sampleFill, particles, source} from '@astrosat/windgl';

mapboxgl.accessToken = 'xxxxxxxx';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v10'
});

map.on("load", () => {
const windSource = source("http://localhost:8080/windgl/wind/2019031012/tile.json");
map.addLayer(particles({
id: 'particles',
source: windSource, // best to share the same source between all layers
'particle-speed': ['interpolate', ['zoom'], 0, 0.5, 10, 0.8]
}));
});`

err:
windgl.umd.js:14097 Uncaught Error: Error: Unknown interpolation type zoom

Tiles are not rendering at certain positions and zoom levels on different browsers. Seems to be fairly random. Can be reproduced using the current demo at https://astrosat.github.io/windgl/

@gampleman Hi Jakub, awesome project! But I noticed that there's no attribution (you're stated as the sole author) despite that it's substantially based on the code from https://github.com/mapbox/webgl-wind/ — would you mind adding some attribution and update the license? Thanks!

Currently, this needs a little json file that looks like this:

{
  "source": "http://nomads.ncep.noaa.gov",
  "date": "2016-11-20T00:00Z",
  "width": 360,
  "height": 181,
  "uMin": -21.32,
  "uMax": 26.8,
  "vMin": -21.57,
  "vMax": 21.42,
  "tiles": ["wind/{z}.png"]
}

I wonder if we use not just the r and g channels in the image, but use some of the other channels if we can get the velocity encoded into the image without these values, in which case we could dispense with the need for this file.

@cleanasmud any ideas?

Currently the implementation uses a global very coarse model for the wind speeds. Ideally we would support something like slippy map/tms for these.

Testing on an iPhone 6 leads to some weird results.

• Particle motion is choppy - this is probably a float precision issue.
• Arrows sometime disappear...

Added the sampleFill and particles layer on map. But it's not showing on the map. However I am able to get the layer with map.getLayer but not on map.

What is the recommended way to change tiles (json) at runtime? I have tried removing the layer and re-creating it but i end up with gl context is null errors. Im using this in react so its possible its purely a react issue.

No idea why this is happening, but we need to investigate.

Hello,
How to switch the data source?

Style spec has some pretty neat syntax for stuff like zoom/data driven styling, which may well be desirable here. I can imagine that especially when overzooming a datasource, one would want to increase the particle count as you zoom in.

how can i draw particle trails?
just like the demo of mapbox/webgl-wind.

windgl.esm.js:252 Uncaught TypeError: Cannot read property 'uMax' of null
at SampleFill.buildColorRamp (windgl.esm.js:252)
at SampleFill.setSampleFillColor (windgl.esm.js:444)
at SampleFill._setPropertyValue (windgl.esm.js:232)
at windgl.esm.js:341
at Array.forEach ()
at SampleFill._initialize (windgl.esm.js:337)
at SampleFill.setWind (windgl.esm.js:279)
at windgl.esm.js:1064
at Array.forEach ()
at windgl.esm.js:1063
at XMLHttpRequest.xhr.onload (windgl.esm.js:1034)

The map looks pretty weird around the poles and needs essentially padding in the images to even display at the proper projection.

Hello, I was trying to setup and run the library locally in order to contribute to it, but I am getting and error when I npm install, maybe someone knows about this error. Is there any documentation on how to run the library locally and contribute? Cheers

gyp ERR! build error 
gyp ERR! stack Error: `C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\MSBuild\15.0\Bin\MSBuild.exe` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onExit (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\build.js:194:23)
gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Windows_NT 10.0.18363
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\Users\ropo\Desktop\dev\layers-gl\node_modules\gl
gyp ERR! node -v v12.18.3
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok
npm WARN [email protected] requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @openearth/[email protected] No repository field.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `prebuild-install || node-gyp rebuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ropo\AppData\Roaming\npm-cache\_logs\2020-09-24T10_42_25_079Z-debug.log

Hi!

This is amazing! Thank you for all the work on this plugin for mapbox. I am trying to visualise the movement of water in a river channel using this visualisation. So, i want to have the particles only in the river, so the land part of the map should not have any particles.

If there is no velocity vector for the location, what should the color encoding be?

Thank you! :)

Hi guys,

on the off chance that you are still reading issues on this old repo... how did you get the particles get to be displayed on all world copies?

Any hints would be appreciated.