ExploreTrees.SG - 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.
- 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).
👇 👇 👇 Read more about it 👇 👇 👇
Begin by installing all the essential dependencies.
Scripts provided (should be executed in order):
- Data collection:
npm run trees- fetch all raw tree data from Trees.SG (NOT included in this repository) and generate
grid-*.jsonfiles in the
npm run family- fetch family categories for the trees, and generate
npm run pois- fetch Points of Interets, mainly the parks, community gardens, heritage roads and skyrise greeneries.
- Data manipulation:
npm run chunk- read all the raw data and generate a cleaner
trees-everything.geojson(NOT included in this repository).
npm run minify- generate minified/compressed data from
trees.min.mp.gz(not included in this repos).
.icofile extension is used to mask the
.mpextension which is actually a MessagePack file. It's NOT an icon file and the
.icofile extension is meant to fool the server to apply Gzip/Brotli compression on it, since there's no official MIME type for MessagePack. GitHub Pages serves
application/octet-stream. Cloudflare compresses
.gzfile is not used but only to show how large the file size is after gzipped.
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.
- Dev server:
npm start- start a local server for the site.
- Production build:
npm run build- build the assets in
distfolder for deployment.
Copyright & license
- Data from Trees.sg © National Parks Board
- Map © Mapbox © MapTiler © OpenStreetMap contributors
- SVG icons from Font Awesome
- Code licensed under MIT