Visualizing the Metals, Dalkey
The Metals is the local name given to the route of an old horse-powered railway that ran from Dalkey Quarry down through Glasthule to Dún Laoghaire Harbour in the 19th century. Having walked this route almost daily since moving to the area in 2015, I decided it would make a great subject for a digital story. The result is a browser-based 3D terrain explorer that lets you fly over the landscape and trace the route those granite-laden carts descended each day in the early 1800s, switching between a modern satellite view and an 1837 Ordnance Survey map sourced from the National Library of Scotland's Digital Archive.
The key technical enabler was the ready availability of LiDAR elevation data, made freely available by the Irish government via the Department of Climate, Energy and the Environment's ArcGIS web viewer. I processed the raw GeoTIFF tiles using QGIS to stitch and crop the area of interest, then wrote a Python script to convert the result into a 16-bit greyscale heightmap that Three.js could use for displacement mapping, a technique where a flat plane's vertices are pushed up or down according to the brightness of each pixel.
Generating the route path involved using QGIS's draping tool to trace the Metals visually against a satellite reference and then bake accurate elevation values into each waypoint. I then wrote a second Python script to georectify that data for use in Three.js — projecting each point through WGS84 longitude/latitude → Irish Transverse Mercator easting/northing → heightmap pixel offset → scene coordinates.
For the 3D rendering I used Three.js abstracted through @react-three/fiber and @react-three/drei, which let you describe a 3D scene using JSX components rather than imperative WebGL calls. Both map layers, satellite and the 1837 OS map, are draped over the same displaced mesh, making swapping between them genuinely striking as you can see exactly how much the region has changed over the past two centuries.
I also replaced Three.js's default orbit camera with a dolly-along-view approach that moves you forward into the terrain as you scroll, rather than zooming toward a fixed point — a subtle change that makes exploration feel significantly more natural. Points of interest along the route are anchored in 3D space using Drei's <Html> component and open a detail panel on click. The app is hosted on AWS Amplify, which is a great fit for a static client-side application of this kind.