On 17 March 2018, National Parks Board launched an all-new web site called Trees.sg. On the next day, I started my journey in getting the data and visualizing it to my heart's content.
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: Building ExploreTrees.SG. πππ
All scripts for fetching and cleaning up data are in the scripts
folder. Node.js and npm
are required to run them.
Begin by installing all the essential dependencies.
npm install
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 generategrid-*.json
files in thedata
folder.npm run family
- fetch family categories for the trees, and generatespecies-info.json
,families-species.json
andfamilies.json
.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 cleanertrees-everything.geojson
(NOT included in this repository).npm run minify
- generate minified/compressed data fromtrees-everything.geojson
intotrees.min.json
,trees.min.mp.ico
andtrees.min.mp.gz
(not included in this repos)..ico
file extension is used to mask the.mp
extension which is actually a MessagePack file. It's NOT an icon file and the.ico
file 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.mp
as uncompressedapplication/octet-stream
. Cloudflare compressesimage/x-icon
..gz
file is not used but only to show how large the file size is after gzipped.
npm run pre-tiles
- generate the neededGeoJSON
files before converting toMBTiles
(NOT included in this repository).npm run tiles
- generate the ultimate finaltrees.mbtiles
file (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 indist
folder for deployment.
- Data from Trees.sg Β© National Parks Board
- Map Β© Mapbox Β© MapTiler Β© OpenStreetMap contributors
- SVG icons from Font Awesome
- Code licensed under MIT