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.


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


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

up vote 2 down vote accepted

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

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.

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

  • Had not heard of of tippecanoe. Great tips, thanks! I would like to leave this open for a bit to encourage any additional insights, but I'll mark this accepted next month when I resume work on this project. Thanks! – ryanjdillon Jan 15 '17 at 19:54
  • Sounds good. Feel free to reach out if you have more questions. – Dan Skorski Jan 18 '17 at 0:06

Your Answer


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.