covid-19-map

Timeline of the spread of COVID-19.

Live

covid-19-timeline.netlify.com

Motivation

I wanted to have a visualisation of the spread which also shows the decline in numbers as people recover. But also try some tech!

TechStack

• Vue 3
• Google Maps API
• Cloud Functions
• Netlify

Data Source

disease.sh/

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Customize configuration

See Configuration Reference.

Cloud Function

The function is just a proxy over the data source to avoid CORS. The source is in the project, but is deployed manually at GCP console currently.

Google Maps API

Public API key is restricted to https://covid-19-timeline.netlify.com/

For local development, add VITE_API_KEY=TOKEN to a .env.development.local file with a secret key not restricted to a website.

Tool for styling the map: mapstyle.withgoogle.com/