back to home

C.W. Chu College Interactive Map

Data Visualization Leaflet TypeScript

This began as a service-learning project for C.W. Chu College, one of the nine colleges at CUHK. The idea is simple: turn universities and schools into pins on a world map, so the college's ties with the rest of the world become visible. There are four layers with 761 records in total: 157 places our students went on exchange, 389 places incoming exchange students came from, 44 universities where our teachers earned their highest degree, and 171 mainland high schools. A year slider filters the data, and a sidebar collects 16 exchange stories.

The interactive map with flight lines from the college to exchange destinations
The rebuilt map, showing where students went on exchange. Open the live site

The staff side mattered as much as the map. The college office keeps its records in Excel, so the first version let staff upload a spreadsheet, geocoded the place names in batches of 40 to stay under the API limit, and redrew the map. It ran on PHP and MySQL behind a login, and in one 30-day period it served about 16,580 visits, most of them through a CDN.

In 2026 I rebuilt it as a static site with Vite, TypeScript and Leaflet, geocoding the data once offline. One bug taught me something: the map tile provider began stamping an API-key watermark onto every tile while still returning a normal image, so no status check could catch it. I only noticed by looking at the page, and switched to a basemap that needs no key.

I built it for one college because the data lives in each college office. The same system would work for the other eight, but each would need its own data agreement, which is an operations problem more than a technical one.