Tiled Toronto map
A step change from the East Toronto streetmap. It keeps the ideas — the addressable SVG, the filters, the rotor — but builds a live, context-aware map of the whole city out of pre-rendered SVG tiles, with far more content and improved navigation.
A first pass: this page will get the fuller treatment the other maps have once we sit down with it properly.
What it is
The East Toronto streetmap is a single rendered tile: one SVG of one area. The tiled Toronto map takes the same approach to city scale. It emulates the way Google Maps and OpenStreetMap work — a grid of tiles fetched as you pan — but with one crucial difference: it does not serve PNG images with pins drawn on top. It serves pre-rendered SVG tiles, so the semantic map information a raster PNG throws away is preserved all the way to the reader. Inside those tiles you get a better-rendered version of the East Toronto content, with improved navigation and a great deal more of it.
Live and context-aware
Unlike the other three demos, this map knows where you are. If you are in downtown Toronto, it locates your position on the map. If you are not, it falls back to a simulation that starts from a default location downtown, so the experience is the same wherever you open it from.
Why a tile server of my own
The first attempt used OpenStreetMap directly: pull the PNG tiles, then pull the semantic metadata and draw it over them. For the level of detail this map wants, that was grindingly slow — up to ten seconds or more to assemble a single tile, which makes panning around the map frustrating rather than fluid.
So the map is served by a separate tile server of its own, one that hands back efficient, pre-compiled SVG tiles with all the semantics already baked in. That is the unique selling point of this map against the live OpenStreetMap implementations that query an Overpass endpoint at view time: the heavy work happens once, at tile-generation time, not on every pan.
Try the interactive demo
Open the tiled Toronto map (opens in a new window)
Once opened, the demo takes over keyboard navigation, focus management, and screen-reader announcements, so it runs on its own surface rather than inside this page — which is why it opens in a new window. Close it to come back here.
The viewer is a passive client: it fetches the pre-rendered SVG tiles from a separate origin (tiles.a11ybob.com), the way a real deployment would point at a CDN. Allow location access to be placed on the map if you are in downtown Toronto; otherwise it starts from a default location downtown.
Source
GPL-3.0. The viewer: github.com/bobdodd/tiled-toronto-map. The tile server: github.com/bobdodd/tile-server. The tiles are rendered from OpenStreetMap data, © OpenStreetMap contributors, under ODbL.