London Neighbourhoods
An offline-first, multilingual guide to London, Ontario for newcomers, with a custom OpenStreetMap-based map, address search and printable PDFs in English, Spanish and Arabic.
Why this project exists: I volunteer with Canada Connects and the South London Neighbourhood Resource Centre, meeting weekly with newcomers so they can practise their English. A couple from Colombia told me one of the hardest parts of arriving was learning the city: what the neighbourhoods are called, where things are, and why you would go there. I built this guide for people in that situation, so it had to work on a phone with no data plan, in their own language, and on paper.
Focus: Offline-first architecture with a build-time service worker · Internationalization, including full right-to-left layout for Arabic · Geospatial data processing from OpenStreetMap · Accessible, mobile-first UI for low-bandwidth users
Highlights
- Covers 20 neighbourhoods, all 16 London Public Library branches, the 4 ServiceOntario offices, 15 notable parks and 121 coffee shops
- Custom vector map generated from OpenStreetMap, with pan, pinch-to-zoom, layer toggles and shareable links to any place
- Full interface in English, Spanish and Arabic, with cross-language search: “library”, “biblioteca” and “مكتبة” all find libraries
- Works with no connection after the first visit, and can be installed to the home screen
- Printable 4-page PDF guide in each language, generated with Playwright from the same data as the website
- Privacy by design: no tracking, no cookies, no backend, and never asks for the user's location
Notable challenges
- Building a fully offline street and intersection search (~3,100 streets, ~5,600 intersections) from raw OpenStreetMap data, tolerant of how people actually type addresses in three languages
- Placing zoom-aware street labels that never overlap each other or a map marker, using the same logic for the interactive map and the printed PDF
- Mirroring the whole interface for Arabic with CSS logical properties instead of a separate stylesheet, while keeping addresses and codes left-to-right
- Keeping the full site, map, scripts and styles at about 45 KB compressed per page so it loads on limited data plans
Screenshots
Click any image to view full size
