Background
Andrei Kashcha's city-roads is a small, beautiful idea: type a city name and it draws every road in it — nothing else. It pulls the road network live from OpenStreetMap through the Overpass API, then renders the lines with WebGL. The result is a clean, poster-like fingerprint of a place built purely from its streets.
This recreation keeps that spirit but asks a question the original deliberately leaves out: what does the land underneath the streets look like? Roads bend around hills, hug rivers, and climb passes — so this version layers the city's road network on top of real elevation data, plus water, green space, and rail, to make a richer map. Everything runs in the browser with no API keys and no build step, matching the rest of this site.
What's different here
| Aspect | Original city-roads | This version |
|---|---|---|
| Roads | Uniform line weight | Weighted by class — motorways thick, footpaths thin |
| Terrain | None | Elevation contours + optional hillshade from real DEM tiles |
| Underwater | None | Bathymetry — ocean & bay depth shading with isobaths (negative topography) |
| Other features | Roads only | Water, green space, rail, and optional buildings |
| Styling | Custom color picker | Cartographic theme presets (topo / blueprint / ink / night) |
| Rendering | WebGL (w-gl) | Canvas 2D — simpler, still smooth for city-scale data |
| Export | SVG / PNG poster | PNG (SVG export is on the roadmap below) |
Where the topography comes from
The hard part of "add terrain" is getting elevation into the browser without a backend. This map uses the openly-licensed AWS Terrain Tiles (Mapzen "Terrarium" encoding), which pack height into the RGB channels of ordinary PNG tiles:
elevation_metres = (red × 256 + green + blue ÷ 256) − 32768
- Figure out which map tiles cover the city's bounding box and download them.
- Decode every pixel back into a height value to build an elevation grid.
- Trace contour lines through that grid with a marching-squares algorithm.
- Optionally compute a hillshade (shaded relief) by lighting the slopes from the northwest.
- For the bathymetry layer, read the below-sea-level values the same way and shade the ocean and bays by depth (log-scaled, so a shallow bay stays visible next to a deep abyss) with isobaths.
- Project contours, relief, depth, and roads through the same Web-Mercator transform so they line up perfectly.
How to use it
- Type a place (
Boulder, Colorado) or tap a suggestion chip, then press Render map. - Drag to pan, scroll / pinch to zoom. Press PNG to download a poster.
- Toggle layers — roads, contours, hillshade, bathymetry, water, green, rail, buildings — and pick a theme. Turn on Bathymetry for coastal places to shade the sea floor by depth.
- Tune the contour interval, line weight, and road detail to taste.
Topographic cities are the most fun: try Innsbruck, Cape Town, San Francisco, or Kyoto. Very large cities can be slow or hit Overpass rate limits — switch to "Major roads" or pick a smaller place.
Brainstorm: candidates to push the cartography further
The whole point of the exercise is layering more meaning onto the map. Here are the enhancement candidates I considered — the ones tagged shipped are already in the viewer; the rest are the roadmap.
Elevation contours
Marching-squares isolines with bold index contours every fifth line and an auto-chosen interval.
Hillshade relief
NW-lit shaded relief blended under the streets to give the terrain a tactile, 3-D feel.
Road hierarchy
Line weight scales with road class so the arterial skeleton reads at a glance.
Water · green · rail
Rivers, lakes, parks, forests, and railways as styled layers — context the original omits.
Bathymetry (negative topo)
Shades the ocean & bays by depth with isobaths, decoded from the DEM's below-sea-level values. Inland lakes above sea level read flat — the open data stores their surface, not the bed.
SVG / poster export
Vector output for crisp large-format printing, matching the original's poster use-case.
Hypsometric tint
Color the land by elevation band (greens → browns → white) like a classic relief atlas.
Place & street labels
Curved street-name labels and neighborhood text with collision-aware placement.
Slope-aware roads
Color or thicken roads by the gradient they climb — a literal "hilliness" map for cyclists.
3-D terrain view
Drape the road network over the DEM and tilt the camera (WebGL) for an oblique relief view.
Transit & cycle networks
Overlay bus/metro lines, cycle routes, and trails as a distinct mobility layer.
Watershed & flow
Derive drainage direction from the DEM to draw synthetic streams and basin boundaries.
Data & credit
Roads and features: © OpenStreetMap contributors (ODbL), fetched via Overpass API. Geocoding by Nominatim. Elevation from AWS Terrain Tiles (Mapzen / Tilezen, public domain & various open sources). Original concept & inspiration: city-roads by Andrei Kashcha (MIT).