Restor.eco

I built the first polygon drawer myself during the rewrite, with Google Maps markers for the vertices and polylines for the edges, each its own DOM element. That's fine for a simple shape. But sites on Restor can have up to 20,000 vertices, so 20,000 markers plus 20,000 edges means 40,000 DOM elements, and the browser just gave up.

So I rebuilt it in WebGL on deck.gl, with three composite layers, one per interaction mode: drawing a new polygon, editing an existing one, and idle. Only the polygon you're actually drawing or editing pays the heavy rendering cost. Self-intersection and overlap checks run in a web worker with Turf.js, and drag state stays out of React entirely.

Restor has 31 scientific data layers from Google Earth Engine, Google's platform for satellite data, from tree cover to soil carbon, each with its own legend and controls. Changing a layer's range or colours made React re-render, and the browser froze. There was also no good way to read the exact value of a single pixel.

The tiles are greyscale images, where each pixel's brightness stands for a value, like a year or a percentage of tree cover. A custom ShaderBitmapLayer for deck.gl turns that grey into colour on the GPU. The sliders feed straight into the shader, so moving them doesn't re-render React, recompile the shader or refetch tiles.

A tooltip on the map would have clashed with the existing tooltips, so the legend got something like a colour picker instead. On hover, I read that one pixel's grey value back from the GPU and run the same colour gradient on the CPU, so the legend can show exactly where the pixel sits on its scale. I designed the layer panel as well.

On Restor you can watch a site change over time, through Esri Wayback, an archive of satellite imagery going back more than a decade. A lot of the people looking are on slow mobile connections, and I didn't want to burn through the data of a farmer in Ghana.

The viewer runs on the ArcGIS Maps SDK, with one persistent layer per snapshot. Hidden snapshots sit at zero opacity instead of visible: false, so they're never torn down and recreated, and switching is just an opacity flip on tiles the browser already has. On open it only loads the first and last snapshot, the two most likely to be viewed, and hitting play prefetches three ahead.

The science team wanted charts for more than 30 ecological metrics, each wired to its own endpoint. A bespoke component per chart was never going to scale.

The charts are built from eleven primitives on visx (marks, scales, axes, grids and tooltips) that compose as compound components, each with its own isolated state, so axes, tooltips and the rest could be reused across chart types. They're all documented in Storybook.