Closed SteepAtticStairs closed 1 year ago
I'll offer a few suggestions but my intent and need is centered around raster images.
Thanks for the reply! My intent was indeed to do this in a fork - I assumed you would only be needing raster for your use of the library.
I'll look for a GeoJSON option, because that looks like the best way to go at this point. I can probably create it dynamically in src/draw/index.js
. I don't think canvas natively supports svg, but there are libraries such as svg.js
that are interesting.
As to the issue I was facing, do you have any idea why all radar files work in the main project, but only some work when using Browserify?
Node-canvas points you at this file if you're using it in the browser. https://github.com/Automattic/node-canvas/blob/master/browser.js
I apologize for the amount of issues I've been opening on this project, but I am fascinated with the work you have done and am determined to create it into something useable for someone not familiar with code - e.g. a website. I think this is doable, because it is written in JavaScript, and I am already able to get the barebones working, as I will detail.
Here is how I have gone about making this into a rudimentary web app.
UPDATE: I have forked your repo and made these changes to my fork, so these instructions aren't really necessary, you can just clone my fork. Here is the commit where I added all of the stuff detailed in the instructions: https://github.com/SteepAtticStairs/nexrad-level-2-plot/commit/27910eb5b35ef74671bcbb35d029f3335ba85e7f
Instructions (in case you want to do it yourself. If not, check out my fork)
1. Clone the repo and cd into the root directory ``` git clone https://github.com/netbymatt/nexrad-level-2-plot.git cd nexrad-level-2-plot ``` 2. Install `node-fetch` ``` npm install node-fetch@2.0 ``` 3. In `./demos` make a file called `myTest.js`, and put these contents into the file: ```javascript const fetch = require('node-fetch'); const { plot } = require('../src'); const { Level2Radar } = require('nexrad-level-2-data'); function toBuffer(ab) { const buf = Buffer.alloc(ab.byteLength); const view = new Uint8Array(ab); for (let i = 0; i < buf.length; ++i) { buf[i] = view[i]; } return buf; } // https://php-cors-proxy.herokuapp.com/?https://noaa-nexrad-level2.s3.amazonaws.com/2017/08/25/KCRP/KCRP20170825_235733_V06 // https://php-cors-proxy.herokuapp.com/?https://noaa-nexrad-level2.s3.amazonaws.com/2009/06/03/KBLX/KBLX20090603_004417_V03.gz fetch('https://php-cors-proxy.herokuapp.com/?https://noaa-nexrad-level2.s3.amazonaws.com/2009/06/03/KBLX/KBLX20090603_004417_V03.gz') .then(res => res.arrayBuffer()) .then(rawData => { var l2rad = new Level2Radar(toBuffer(rawData)) const level2Plot = plot(l2rad, 'REF', {elevations: 1, background: 'rgba(0, 0, 0, 0)'}); }) .catch(err => console.error(err)); ``` 4. In `src/draw/index.js`, currently at line `90` (at the time of writing this), replace ```javascript const canvas = createCanvas(cropTo, cropTo); ``` with ```javascript const canvas = document.getElementById('myCanvas'); ``` This will allow the project to interact with the DOM. Then, right after `ctx` is declared (on the next line), add these two lines: ```javascript ctx.canvas.width = cropTo; ctx.canvas.height = cropTo; ``` In the end, from the current state of the repo, you should have ```javascript // create the canvas and context const canvas = document.getElementById('theCanvas'); const ctx = canvas.getContext('2d', { alpha: options.alpha }); ctx.canvas.width = cropTo; ctx.canvas.height = cropTo; ctx.antialias = options.antialias; ctx.imageSmoothingEnabled = options.imageSmoothingEnabled; ``` 6. Run [`browserify`](https://browserify.org) in the root project folder to compile the project into a web app: ``` browserify demos/myTest.js -o bundle.js ``` 7. In the root project folder, make a file called `index.html` and put this code in that file: ```htmlPlease excuse the lengthy instructions, I just wanted to add them for the sake of displaying the little amount of changes needed for this to work in a browser.
Given all of this, I was wondering your opinion on an idea I had to make this better. First, I was wondering if there was a way to easily render high-quality graphics onto the map. Using this function:
you are able to set the DPI of the canvas, making the resolution of the outputted image higher. However, it is still a raster image being rendered, and I haven't found a way to change this, since
<canvas>
renders pixels, not vector nodes. Do you have an idea on how, given this current system I have put forward, could one render each radial gate as a vector object, instead of part of a raster image? Maybe a plugin that allows for modification of<canvas>
?Perhaps a better idea to that regard would be to find a way to render the plotted data as a GeoJSON object, instead of putting the data into
canvas
? Mapbox supports GeoJSON easily, and renders it very quickly. It might require some georeferencing, but you would end up having a polygon for each gate in the GeoJSON object, with aproperty
key containing thedBZ
value of that gate. This would allow the map to render each polygon's shape, and then draw their color from that property value. Does this sound doable, and if so, how might I go about doing it, in your opinion?I found some articles detailing how someone managed to do just this: https://observablehq.com/@00ad408474591e33/weather-data-mapping-gridded-radar-data-from-ksgf-with-d3-de https://observablehq.com/@00ad408474591e33/mapping-gridded-radar-data-from-khtx-with-a-voronoi-diagram
I appreciate any help you can give - I really do think this library you've made can be made into something cool.
EDIT: An issue I am running into is that whenever I load a file onto the website version, it seems to do fine. But ANY FILE after June 2016 (when they changed the file compression format detailed here) will not load. What irks me is that these later files load fine in the CLI version of
neared-level-2-data
andnexrad-level-2-plot
. I don't know what the issue here is, but if you have any idea what it is I would greatly appreciate it. I have attached a video of me using the fileKTLX20130520_200356_V06.gz
and it working fine, but then the fileKLWX20220623_014344_V06
giving errorshttps://user-images.githubusercontent.com/80776609/179282877-8e5df6ab-69ab-4e9c-a0da-ed3398a375f6.mov