I was not very busy at work yesterday, so I decided to start getting familiar with Leaflet.js. I have always wanted to do something with maps, particularly for Hong Kong. As my first experience with Leaflet, I think I would make a simple map showing population in different neighbourhoods in Tai Po district, where I live in.
There are apparently many map tiles available for Leaflet, I found Leaflet-Providers which is amazing, I was thinking between OpenStreetMaps BlackAndWhite and Stamen TonerLite, and finally settled with the former.
Upon initializing the map object, it needs a centre point. I found it a lot easier to add a onClick handler to log the latitude and longitude, than to look it up in Google Maps.
The next thing I need is the GeoJSON of Hong Kong’s 431 neighbourhoods. It turns out someone has already done it, 2blam, you have my deepest respect and appreciation! For the current project, I only need the definition for neighbourhoods under Tai Po District and add the number of population as an additional property of each neighbourhood. Figures are based on 2011 Population Census.
The rest of it is just following the example provided by Leaflet, I just tweaked the styles a bit…
I would like to think this code and the GeoJSON (Thank you!) will serve as a basis. Showing data geographically, and specifically for Hong Kong is something I have always wanted to do.
It took me a couple of hours to maneuver around the example, the code and the GeoJSON, you can check it out on my GitHub.