This repository houses the source code for the Map Dashboard data visualization web application project. It uses Vue 3 and Vuetify.
We highly recommend VS Code for its great plugins. The project is also setup for auto-linting with VSCode on file save! You'll need at least the Vue - Official plugin. Once you open the source code in VSCode, some other convenient plugins should also be recommended to you.
This project currently uses Tableau to format geospatial input data. Tableau has an extensive library of tutorials and API documentation.
The Map Dashboard will display 3 types of map data:
- Base map using our data from Notion
- Water department polygons showing water volume (gradient of blue shades)
- Canopy density (using transparency layer or classified zones; gradient of green shades)
There are 2 types of map marker pins; pins can be grouped or clustered:
- Plants: green pins
- Animals: red pins
Users can hover over marker pins and map data to view a tooltip that displays any of the following information:
- Name of the animal or plant
- Water volume
- Canopy cover
Users can filter the map by:
- Animal vs plant
- Water volume
- Canopy density
| Component | Technology |
|---|---|
| Notion Database | Notion API |
| PostgresSQL Storage | Postgres + Post GIS (optiona) |
| Visualization | Tableau (Desktop/Server/Cloud) |
| Automation | GitHub Actions, Cron jobs |
| Water Data | Shapefiles/CSVs into Postgres |
| Canopy Data | Meta Canopy Map GeoTIFF/GeoJSON |