Mapping the Rain: How I Used AI to Build a Quick GIS Demo for Hong Kong’s Flooding Data

Living in Yuen Long and commuting daily to HKUST in Sai Kung means spending a lot of time on the road, so I need to keep a close eye on the weather and traffic conditions.

This June, as Hong Kong entered the rainy season, the city experienced heavy and continuous rainfall. Out of curiosity, I began searching for average rainfall statistics and public information on drainage blockage points. Looking at the data, I started wondering whether there was a better way to visualise these geographical locations and understand the patterns. The best solution was clearly a map — a Geographic Information System (GIS).

Industry-standard software like ArcGIS and QGIS is available, but it requires training and time to learn. I asked myself: what if I just want to create a quick demonstration? This led me to look into AI-assisted tools.

Later, I was inspired by a project from Keith Li (an entrepreneur and developer in Hong Kong) titled “The Battle of Hong Kong · 1941.” He created an animated 3D map that tells the story of Hong Kong’s battlefields in 1941, built using prompts with Claude Opus 4.8. I decided to adapt this approach for my own project.

The Workflow: From Data to Deployment

First, I collected data on flooding blackspots from the Drainage Services Department (DSD) and rainfall distribution maps from the Hong Kong Observatory (HKO). Then I used Google Gemini to get the initial latitude and longitude coordinates for these locations. Because AI-generated coordinates can sometimes lack precision, I manually verified and corrected the data using Google Maps and digital positioning tools.

Once the dataset was ready, I started a dialogue with Claude (you could use other AI models) to build, debug, and fine-tune the webpage. I began with a foundational prompt and iteratively refined the interface through conversational debugging.

Finally, I deployed the project on Vercel for hosting. You can interact with the live map below:

Map not loading or get a better browsing experience? Open it in a new tab: https://rain-fall-hong-kong.vercel.app/

For reference, below is the initial prompt I used to kickstart the project with Claude:

Write me a webpage: an interactive 3D map of Hong Kong using MapLibre GL JS (Esri satellite tiles + AWS terrain).

1. Frame it as a personal commute story (Yuen Long → HKUST, June rainy season); open with a fade-out intro overlay.
2. Toggleable layers: monthly rainfall surface (blue → red), 3D rain wall, rain particles, coastal ribbons, flood blackspots, low-lying area, and terrain landscape.
3. UI: title, layers panel, legend, month timeline.
4. Tap a dot → popup. Play button → slow street-level fly-through of the commute.

(Note: Because this is an AI-assisted prototype, some geographical data points and the rainfall distribution may require further calibration for precise accuracy.)

Conclusion

Please note that this method is not a replacement for professional GIS software, which remains essential for spatial analysis and planning. Instead, this AI-assisted workflow serves a different purpose: rapid prototyping, brainstorming, and fast-tracked digital storytelling for demonstration and presentation.

By lowering the technical barrier to entry, this approach lets individuals quickly turn ideas into an intuitive visual map. It offers a highly accessible entry point for scholars, researchers, and digital humanities projects to map local trends in Hong Kong — whether tracking cultural heritage buildings, monitoring urban greenery, mapping community services or more.

Give it a try, and use the power of maps to tell your own story.

References

1. Drainage Services Department. (n.d.). Flood prone areas. https://www.dsd.gov.hk/EN/Flood_Prevention/Our_Flooding_Situation/Flood_Prone_Areas/Coastal_Low_lying_or_Windy_Residential_Areas/index.html
2. Hong Kong Observatory. (n.d.). Climatological normal (1991–2020) — Annual rainfall map. https://www.weather.gov.hk/tc/cis/normal/1991_2020/rfmap13.htm
3. Li, Keith. (2026). 香港保衛戰 1941 = The Battle of Hong Kong 1941. https://keithli.com/demo/hk1941/
4. ArcGIS. (n.d.). 香港容易受風暪潮影響的地區、面積和人口. https://www.arcgis.com/apps/mapviewer/index.html?webmap=36add94013f74f05b582818d8bd715fe&extent=113.6963,22.0741,114.7104,22.6197