jlengstorf / air-quality-edge-functions

This is a demo of updating a map to show air quality data for the user’s current location using Next.js Advanced Middleware, powered by Netlify Edge Functions.

Show Local Air Quality Based on the User's Location

Use AQI data to show the air quality near the current user. This is built using Next.js Advanced Middleware and powered by Netlify Edge Functions.

See the demo: https://air-quality-edge-functions.netlify.app

Dev Setup

To run this yourself, you need two sets of credentials:

1. NEXT_PUBLIC_AQICN_API_KEY — this is free and can be requested from the Air Quality Open Data Platform.

   This is used to create a map overlay showing the air quality on a map. (More info in the AQI docs.)

2. NEXT_PUBLIC_GOOGLE_API_KEY — this has a free tier and is created on the Google Maps Platform credentials page.

   You need to create a project (the credentials page will guide you through this) and enable both the Maps JavaScript API and the Geocoding API.

   Heads up! Make sure to restrict your API key to just the domain you intend to ship it on and to only have access to the APIs you need. Otherwise your key could be misused and you could end up with an unexpected bill!

Create a Netlify site, then add the above credentials as env vars.

Shortcut: Do it all via CLI!

Note: This assumes you have the GitHub CLI installed, which I highly recommend if you work regularly with GitHub.

# fork this repository
gh repo fork jlengstorf/air-quality-edge-functions

# move into the newly forked and cloned repo
cd air-quality-edge-functions/

# install dependencies
npm i

# install the Netlify CLI if you don't already have it
# details: https://docs.netlify.com/cli/get-started/
npm i -g netlify-cli

# create a new Netlify site
ntl init

# add your env vars
ntl env:set NEXT_PUBLIC_AQICN_API_KEY "<your_key_here>"
ntl env:set NEXT_PUBLIC_GOOGLE_API_KEY "<your_key_here>"

# start the dev server
ntl dev