Rendering gridded time-series data with Leaflet.js

Question

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?

Answer 1

We recently went through something similar to this and found the following tools helpful:

tippecanoe (https://github.com/mapbox/tippecanoe) - We used this to convert our high resolution geojson files to manageable vector tiles. This was used as the base.

tile-join (same address) - after we had the base tiles, we joined the data to the vector set. This created a final set of tiles that we could render on the client side. In each of the tiles, there was the appropriate resolution of geojson object as well as all of the properties we wanted to map.

mapboxgl - here we used the data driven styling to set the fill color of each of the polygons. https://www.mapbox.com/help/gl-dds-ref/

express (Self-hosting Mapbox vector tiles) - this was used to serve up the tiles to the client.