Chapter 14 · Cartography as interface
Meridian
Bay
A city that does not exist, generated from a seed, and lit from above. Three routes draw themselves across it. Six places have a story.
Nothing here is a tile server. The coastline, the grid, the harbour, the districts and every road are computed once, in plan space, and then projected through a real camera you can lift, yaw and fly.
dragpan the bay · Hfold the dock · 1grades
How it works
- Technique
- Plan-space rasterisation + a Mode‑7 strip projection. The city is baked to offscreen 2D canvases, then re-projected a scanline at a time onto the display canvas through a pitched camera. Canvas2D throughout — no WebGL context, no shader compile, no float texture.
- What it does
- Turns a place into something a visitor can hold in their head. Depth, orientation, distance and neighbourhood are all legible at a glance, because the map is a scene rather than a diagram. Routes draw themselves so a journey reads as a journey; callouts layer in as you look; the six locations carry the copy that makes the place worth visiting.
- Live demo
- The plate above is the real engine. Drag to pan, lift with TILT, fly with HEIGHT, open a location with its marker or the list in the dock. Every number in the readout is read from the frame you are looking at.
- Good for
- Destination and hospitality. Estates and developments. A venue wanting its neighbourhood rather than a postcode. Any site whose subject has a place in it.
- Combines with
- Scroll · typography · 3D tilt · SVG linework · a booking flow. The markers are ordinary buttons, so a location can be a link to a room, a menu or a checkout.
- Complexity
- Advanced. A seeded value-noise generator, a district partitioner, a road router, a strip projector and an HTML marker layer kept in sync with the camera — about 900 lines of the page.
- Performance
- One 2D context, one strip loop, devicePixelRatio capped at 2. The city bitmaps are redrawn only when a grade or a layer changes, not per frame. Frame time and the draw-call count are printed in the dock. If the host canvas cannot be acquired the page falls back to a static SVG plan — still the same city, still the same places.
A map is a scene, and a scene is a camera.
Almost every "map" on a commercial site is a diagram: north is up, everything is flat, and the visitor has to do the spatial work in their head. The cheapest honest fix is not a 3D engine. It is to give the plan a camera — a pitch, a heading, a focal length and an altitude — and then draw the plan through it a scanline at a time. Near rows are sampled large, far rows are sampled narrow, and the city recedes the way a city recedes when you are standing on the hill above it.
That single decision buys the thing a client actually wants. A hotel stops being a dot on a grey rectangle and becomes a place you can see the sea from. Distance becomes visible, so "ten minutes from the harbour" stops being a claim in the copy and starts being something the visitor measured with their own eyes.
The routes draw themselves, and that is not decoration.
A static line tells a visitor two endpoints. A line that draws itself tells them a direction, an order and a duration — the three things a route is actually for. Each arterial here is a routed polyline that follows the same road network the plate is drawn from, so it sits in the streets rather than floating over them, and each is revealed by arc length rather than by index, so it draws at a constant speed no matter how many segments it took to get there.
Reveal them in sequence and the map starts behaving like a briefing: the harbour, then the ring, then the connector, each one landing in a district the previous route has already established. Order is information, and it is the cheapest information in the whole page.
Markers are buttons. That is the point.
Every location on this plate is a real DOM button: 44px, focusable, labelled, in the tab order, and re-projected every frame by the same matrix that draws the ground. That sounds like a detail and it is actually the whole difference between an art piece and a website. A shader-drawn pin cannot be tabbed to, cannot be read by a screen reader, cannot carry a booking link, and cannot show a visitor where it is when they come back to it after hiding the chrome.
So the map is drawn, and the interface is real, and the two never lie about each other. Click a marker or tab to it and its story opens in the dock — never as a card dropped over the artwork.
What is measured is printed.
Frame time, the number of strip projections in the last frame, the camera's altitude in metres and the count of live markers are all read from the running engine and shown in the dock with their units. The grades change what is rendered, not what is labelled: Night Ink, Harbour Glass, Chartroom and Ash Plate each rewrite the palette the city is baked with, so the plate itself changes hue, not a badge.
Under reduced motion nothing loops: the city is baked, the routes are drawn whole, the camera holds its pose, and the page still has a complete composition to read. Nothing is blank, because blank is not an accessible fallback — it is an absent page.