Rob Nguyen

Atlas

A data pipeline that turns OpenStreetMap into 23 printable route guides and an interactive 3D tool that walks visitors from anywhere on campus to the ISTEP office, door to door.

Built Oct to Nov 2026 Concept, routes and step text, testing

Two panels of the Atlas tool: a route from Queen's Park station on the campus map, and the whole trip into the Myhal Centre in 3D. Each panel has From and To fields and numbered steps.
The Claude-artifact build: one self-contained file with no network use.

Result

  • 23printable route guides
  • 11,216nodes in the campus graph
  • 18 of 20hand-checked routes step-free

21 of the guides already ship inside Virtual Office, and on-site checks such as door accessibility are still open.

The problem

ISTEP is on floor 7 of the Myhal Centre, and visitors get lost. The main doors aren't on St. George St., two campus roads restrict cars, and events also run at other venues across campus.

What I built

A pipeline that turns OpenStreetMap into 23 printable guides and an interactive 3D tool. The tool routes in the browser, so nobody's start point leaves the device, and it imports the guides' routes and step text, so the two never disagree.

Printable guide: Queen's Park station to the Myhal Centre, 700 m, 9 minutes, 4 easy steps, with a rotated campus map, an orange route with numbered step dots, and a photo for each step.
A printable guide: map, step text and a photo per step. Contact details removed in this copy.

Calls I made

  • Route on the device. In-browser routing, no analytics, and a note on what the page sends.
  • One source of truth. The 3D tool imports the printed guides' routes and text.
  • Hide what isn't confirmed. Unconfirmed accessibility details are hidden, not guessed.

More images

  • One-page visitor guide titled Visiting ISTEP, with an area map and sections for getting here by subway, streetcar and from Union Station, driving and parking, cycling, and inside Myhal.
  • A softened 3D cutaway of the Myhal Centre: a blue floor 1 slab, an orange floor 7 slab, the elevator core between them, an orange route line and a green beacon rising through the roof.
  • Printable guide for driving to the Myhal Centre, with a map of two road approaches, a note on campus-road restrictions and parking, and numbered steps with photos.

See all (4)

Full detailsHow it works, the full feature list, decisions, numbers and next steps

Tools

  • Python (standard library and Pillow)
  • Overpass API, Nominatim, OSRM routing
  • Wikipedia data
  • Vanilla JS, MapLibre GL, Leaflet, inline SVG
  • Headless Edge

Not yet checked on site.

The label Atlas shows wherever a detail hasn't been confirmed in person.

The problem

  • ISTEP is on floor 7 of the Myhal Centre, and visitors get lost.
  • The main doors aren't on St. George St. They're wooden doors marked "55", off a walkway on the south side.
  • Two nearby campus roads restrict vehicles, and there's no free parking on campus.
  • Events also run at other venues (the Faculty Club, Hart House, Convocation Hall, a Galbraith lecture room), so guests need directions there too.

What I built

OutputWhat it does
Interactive tool (one 2.1 MB file)Search From and To by building, U of T code or room. It shows the steps and a 3D map with an "inside Myhal" cutaway tour, plus Use my location, Preview walk (an animated fly-along), 2D or 3D, Avoid stairs, Copy link, Copy as email text, Print, and modes for arriving at or leaving ISTEP.
Claude-artifact build (3.3 MB)The same tool with zero network use: its own embedded base map, no outside links, and a fallback to directions and floor maps after 12 seconds if WebGL is blocked.
23 printable guides (HTML and PNG)12 routes to Myhal (gates, two subway stations, the streetcar, nearby buildings, driving); 7 routes from Myhal; 2 to a Galbraith lecture room; a one-page visitor guide (transit, driving, parking, bike share); and an "inside Myhal" cross-section.
Guide indexA card grid in four sections.
Parking map (Leaflet)31 lots plus 4 street stretches, sorted by walking distance, with filters, distance rings, a walking route per lot, rates, clearances and EV chargers. A "top 3 parking" version adds step photos.
Earlier versionsA campus-wide walking tool and a 3D map that used an online router, both kept as predecessors.

How it works

Atlas data pipeline, step by step:

  1. OpenStreetMap: Paths, outlines, doors and transit, via Overpass
  2. Building codes: Wikipedia list matched to map names and addresses
  3. A clean graph: Main network only; 11,216 nodes, 876 KB
  4. Routes: OSRM through hand-placed waypoints, cached; in-browser Dijkstra for the tool
  5. Step text and maps: Hand-written steps; SVG maps rotated 16.4 degrees
  6. Guides and tool: 23 printable guides and the interactive 3D tool
The Atlas pipeline: one source of truth feeds both the printed guides and the interactive tool, so they never disagree.

Data

  • Overpass gives walkable paths, building outlines (including multipolygons), entrances and transit.
  • Wikipedia's building list supplies U of T building codes, matched to map names through normalization, an alias table and address matching.
  • Only the main connected network is kept, so a door never snaps to an isolated path.
  • Each door gets a compass side, and unnamed paths borrow the name of the nearest parallel road.
  • The output is a compact 876 KB graph.

Routing

  • Printed guides: OSRM foot and car routes, forced through hand-placed waypoints, then cached. The cache file is written atomically so OneDrive syncing can't corrupt it, and a fix trims the router's end so routes reach Myhal's real doors.
  • Interactive tool: routing runs entirely in the browser. It's a hand-written multi-source Dijkstra over about 11,000 nodes, with a no-stairs mode. It weights each entrance by its indoor walk, and prefers a hand-checked route where one exists.
  • Step text is written by hand with a small mini-markup, and leg distances recompute automatically.

Rendering

  • A custom SVG map maker rotates the map 16.4 degrees so King's College Rd. points up, with a true-north arrow and a scale bar.
  • Labels are placed greedily to avoid collisions, with arrows every 70 px and numbered step dots.
  • PNGs come from headless Edge at 2x, trimmed automatically.
  • In 3D, MapLibre extrusions build the floor slabs, a route ribbon and a green beacon rising through the roof at the office. A "dollhouse" tour stops at the whole building, floor 1 and floor 7.

Quality checks

  • check_routes.py flags routes that double back, cross mapped stairs, or have a step anchored more than 30 m from the line. 18 of the 20 hand-checked routes are flagged step-free.
  • Vendored libraries are pinned by SHA-384, and the build stops if they change.
  • A build check fails if any stray online link remains in the offline version.
  • build_all.py checks its prerequisites, then runs data, guides and tool in order.

Key decisions

  • Single files that open with a double-click, with no CDN.
  • Privacy: routes are computed on the device, with no analytics and a "what this page sends" note. Moving to in-browser routing also removed the need to send anyone's start point to an online router.
  • One source of truth: the tool imports the guides' routes and text, so the two never disagree.
  • Nothing guessed: unconfirmed accessibility details are hidden rather than guessed; "Not yet checked on site" labels appear where they apply; and parking rates are stamped "checked 28 Sept. 2026".
  • Accessibility: an ARIA combobox search, live regions, SVG labels, Avoid stairs and step-free flags.
  • Licences: every photo carries its Wikimedia author and licence, and the OpenStreetMap and OpenFreeMap credits are kept.

Results and status

  • Built and complete, but not hosted yet. The README lists the options (GitHub Pages, Cloudflare Pages or a utoronto.ca host), with a Content-Security-Policy ready.
  • Some on-site checks are still open, including door accessibility and after-hours access.
  • 21 of the guides went into Virtual Office v0.16.7. That copy predates the Nov 1 to 2 rebuild.
In numbers
Graph11,216 nodes and 13,566 edges
Buildings458, of which 137 have U of T codes; 649 doors
Guides and routes23 guides; 20 hand-checked routes
Parking31 lots
Photos16 from Wikimedia Commons
CodeAbout 2,970 lines of Python across 12 scripts

What I'd do next

  • Publish Atlas once the floor-level detail is cleared.
  • Finish the on-site checks and update the labels that say "not yet checked".
  • Refresh the guides inside Virtual Office from the Nov 1 to 2 rebuild.
  • Feed the routes into a guest and visitor kit.

Before and after: the front-entrance guide

Before: the first front-entrance guide from Oct 2, with a map, a driving note and four steps with photos.
Before: the first front-entrance guide (Oct 2).
After: the rebuilt front-entrance guide from the Nov 1 to 2 rebuild, with distance, time and step counts in the header and a refined map.
After: the same route from the Nov 1 to 2 rebuild.

All the guides in this copy

Twenty-one of the 23 guides. The "inside Myhal" cross-section is held back because it shows the interior layout, and one route to a café is held back because it names the business throughout. The office's phone and email are removed from every guide in this copy. Photo credits are under each photo and on the credits page.

  • Printable guide: Bahen Centre to the Myhal Centre, with a map and numbered steps.
    Bahen Centre to the Myhal Centre
  • Printable guide: College streetcar to the Myhal Centre, with a map and numbered steps.
    College streetcar to the Myhal Centre
  • Printable guide: Convocation Hall to the Myhal Centre, with a map and numbered steps.
    Convocation Hall to the Myhal Centre
  • Printable guide: Driving to GB 202, a Galbraith Building lecture room, with a map and numbered steps.
    Driving to GB 202, a Galbraith Building lecture room
  • Printable guide: Driving to the Myhal Centre, with a map and numbered steps.
    Driving to the Myhal Centre
  • Printable guide: Faculty Club to the Myhal Centre, with a map and numbered steps.
    Faculty Club to the Myhal Centre
  • Printable guide: Front entrance to GB 202, with a map and numbered steps.
    Front entrance to GB 202
  • Printable guide: Front entrance (Alumni Gates) to the Myhal Centre, with a map and numbered steps.
    Front entrance (Alumni Gates) to the Myhal Centre
  • Printable guide: Hart House to the Myhal Centre, with a map and numbered steps.
    Hart House to the Myhal Centre
  • Printable guide: Visiting ISTEP: the one-page visitor guide, with a map and numbered steps.
    Visiting ISTEP: the one-page visitor guide
  • Printable guide: Queen's Park station to the Myhal Centre, with a map and numbered steps.
    Queen's Park station to the Myhal Centre
  • Printable guide: Sandford Fleming Building to the Myhal Centre, with a map and numbered steps.
    Sandford Fleming Building to the Myhal Centre
  • Printable guide: Spadina and College to the Myhal Centre, with a map and numbered steps.
    Spadina and College to the Myhal Centre
  • Printable guide: St. George station to the Myhal Centre, with a map and numbered steps.
    St. George station to the Myhal Centre
  • Printable guide: Myhal Centre to the Bahen Centre, with a map and numbered steps.
    Myhal Centre to the Bahen Centre
  • Printable guide: Myhal Centre to Convocation Hall, with a map and numbered steps.
    Myhal Centre to Convocation Hall
  • Printable guide: Myhal Centre to the Faculty Club, with a map and numbered steps.
    Myhal Centre to the Faculty Club
  • Printable guide: Myhal Centre to Hart House, with a map and numbered steps.
    Myhal Centre to Hart House
  • Printable guide: Myhal Centre to the Sandford Fleming Building, with a map and numbered steps.
    Myhal Centre to the Sandford Fleming Building
  • Printable guide: Myhal Centre to the Wallberg Building, with a map and numbered steps.
    Myhal Centre to the Wallberg Building
  • Printable guide: Wallberg Building to the Myhal Centre, with a map and numbered steps.
    Wallberg Building to the Myhal Centre

Map data © OpenStreetMap contributors (ODbL). Base map in the tool: OpenFreeMap. Photos in the guides: Wikimedia Commons, each credited with its author and licence under the photo and on the credits page.

Close details