← Lab
Build logSide project2026 – now

Drafting Map

A pixel-art map of Belmont, CA that shows where the SamTrans school buses are at Ralston Middle School drop-off and pickup.

Status
In progress
My part
Design, data, code
Built with
OpenStreetMap, a fine-tuned image model
Live site
Coming soon

Facts row: keep it to four. When the product has its own domain, put the link in “Live site” and add an “Open ↗” button on the Lab card.

Cover · 16:9The latest render, or a short loop of a bus moving along its route.

Why

[Two or three sentences: what problem you saw, who it’s for, and why a map that looks like a game is the right answer.]

Why: one short paragraph in your own voice. The personal reason is the hook here; keep it real and specific.

The rule

This might become a product, so everything in the pipeline has to be safe to ship: open map data only, no Google map data, and no models trained on it.

The rule: the one constraint that shaped every decision below. Readers will see it come back in the log.

Build log

Each entry is one decision: what you did, why, and a picture of that version. Newest last, so the story reads in order. Replace “Log 0X” with the real date.

  1. Log 01

    Picked a look: SimCity 2000

    Chose the SimCity 2000 palette and a high-precision pixel-art style over a smooth illustration.

    WhyThe first version at 1 m per pixel looked jagged and lost detail when zoomed in.

    Before / afterThe 1 m/px test next to the SimCity-style render.
  2. Log 02

    Kept the buildings honest

    Stopped letting the AI redraw the map, and started drawing buildings and roads from OpenStreetMap data.

    WhyThe AI redraw turned buildings the wrong way. Real shapes and layout matter more than texture.

    ComparisonAI redraw vs. the OpenStreetMap version of the same block.
  3. Log 03

    Narrowed the bar

    Aimed for block-level accuracy, rendered the whole map in one batch, then hand-refined a few landmarks.

    WhyPerfect detail everywhere was slowing everything down. A whole map that’s right at block level is more useful than one perfect corner.

    Full mapThe first full batch render, with the hand-refined landmarks circled.
  4. Log 04

    Chose a 2D viewer

    Built the first version on a 2D viewer instead of three.js. Buses hidden behind buildings or trees show as see-through outlines.

    Why[One line on why 2D was enough for the first version.]

    ViewerA bus passing behind a building, shown as an outline.
  5. Nov 2026

    Training my own model

    Fine-tuning a custom image model on 30–40 training pairs made from this project, instead of patching a general model.

    WhyProgress was slow compared with other AI city maps, and fixes to the general model kept running out.

    Training pairsA few of the input / output pairs.

What’s next

  • Highlight each bus route
  • Afternoon buses for each grade (6, 7, 8)
  • Arrival times
  • Weather and day / night lighting
  • More map styles