Explore Trees in Singapore
This is a personal side project to fuel my curiosity on these factors:
- Plotting more than 500,000 data points on Mapbox GL JS. End up using Tippecanoe to convert
- Data visualization of all tree data, in 4 criterias:
- Type; Tree, Flowering, Heritage
- Girth (meters)
- Age (years)
- Family (to group up the large number of species)
- Discovery of trees.
- Prominent/important trees stand out more by having larger radii.
- Super fast info card by just hovering on the tree markers (for devices with a mouse).
Begin by installing all the essential dependencies.
Scripts provided (should be executed in order):
npm run trees- fetch all raw tree data from Trees.SG (NOT included in this repository) and generate
grid-*.jsonfiles in the
npm run chunk- read all the raw data and generate a cleaner
trees-everything.geojson(NOT included in this repository).
npm run family- fetch family categories for the trees.
npm run pre-tiles- generate the needed
GeoJSONfiles before converting to
MBTiles(NOT included in this repository).
npm run tiles- generate the ultimate final
trees.mbtilesfile (NOT included in this repository), to be uploaded on Mapbox Studio as a tileset.
npm start- start a local server for the site.
Copyright & license
- Data from Trees.sg © National Parks Board
- Map © Mapbox © OpenStreetMap
- SVG icons from Font Awesome
- Code licensed under MIT