Background

My colleague and I have developed a web-app for visualizing gridded time-series data (in the arctic) using leaflet.js with webgl-heatmap.

The source data is in netCDF format, which we have been processing to geojson for each parameter attribute and and time-step. This data is then accessed via an api depending on what the user has selected.

Problem

It is difficult to stylize a color gradient for the heatmap to accurately reflect levels of the data, and WebGL presents problems for various browsers (and of various versions).

Inspired by the geojson-vt plugin, our idea now is to render each cell as a geojson polygon, and update the style (i.e. color and opacity) of those cells according to their values for the current data selection.

Proposed work-flow

1. netcdf → PostGIS
2. grid cell geometries → vector tiles
3. user data selection & time-step → query PostGIS for values → style grid cells

Question

What workflow and tools would be best suited to achieve this?

Background

My colleague and I have developed a web-app for visualizing gridded time-series data (in the arctic) using leaflet.js with webgl-heatmap.

The source data is in netCDF format, which we have been processing to geojson for each parameter attribute and and time-step. This data is then accessed via an api depending on what the user has selected.

Problem

It is difficult to stylize a color gradient for the heatmap to accurately reflect levels of the data, and WebGL presents problems for various browsers (and of various versions).

Inspired by the geojson-vt plugin, our idea now is to render each cell as a geojson polygon, and update the style (i.e. color and opacity) of those cells according to their values for the current data selection—possibly processing this as vector tiles to improve perfomance.

Proposed work-flow

1. netcdf → PostGIS
2. grid cell geometries → vector tiles
3. user data selection & time-step → query PostGIS for values → style grid cells

Question

What workflow and tools would be best suited to achieve this?