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.
Using Docker is the best way to run the app for development, but if you have pnpm installed locally you can run it like any old Vue application. Please use only pnpm to run the project or handle dependencies! Different tools like yarn and npm are not interoperable with pnpm (or each other) and will cause problems when intermingled.
Once you have Docker running, you can build a container and enter it with
./scripts/start.sh
Once inside, run
pnpm install
To install the necessary packages, then run
pnpm dev
to start the development server. The app will run on port 8080 so make sure that is available on your local machine or you probably won't be able to access the app in your browser.
To exit the conainer, shut down the dev server with ctrl + c and you can just type exit.
To shut down the container, use
./scripts/stop.sh
You may need to rebuild the container from time to time and can do that with
./scripts/rebuild.sh
We use Vitest for testing, which has a hot reloading feature. This means you can write a test and it will re-run when you save the test file or the source file for the code you're testing. You can start this with
pnpm test
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 |