https://github.com/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.
https://github.com/jlengstorf/air-quality-edge-functions
edge-computing localization netlify-edge-functions nextjs nextjs-middleware personalization
Last synced: about 2 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/jlengstorf/air-quality-edge-functions
- Owner: jlengstorf
- Created: 2022-09-03T22:04:24.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-09-04T00:09:29.000Z (over 2 years ago)
- Last Synced: 2025-03-09T01:46:47.607Z (about 2 months ago)
- Topics: edge-computing, localization, netlify-edge-functions, nextjs, nextjs-middleware, personalization
- Language: JavaScript
- Homepage: https://air-quality-edge-functions.netlify.app
- Size: 62.5 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://aqicn.org/data-platform/token/).
This is used to create a map overlay showing the air quality on a map. ([More info in the AQI docs.](https://aqicn.org/faq/2015-09-18/map-web-service-real-time-air-quality-tile-api/))
2. `NEXT_PUBLIC_GOOGLE_API_KEY` — this has a free tier and is created on the [Google Maps Platform credentials page](https://console.cloud.google.com/project/_/google/maps-apis/credentials).
You need to create a project (the credentials page will guide you through this) and enable both the [Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/overview) and the [Geocoding API](https://developers.google.com/maps/documentation/geocoding/start).
**Heads up!** Make sure to [restrict your API key](https://developers.google.com/maps/api-security-best-practices#application-restriction) 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](https://docs.netlify.com/welcome/add-new-site/), then [add the above credentials as env vars](https://docs.netlify.com/environment-variables/overview/#site-environment-variables).
### Shortcut: Do it all via CLI!
> **Note:** This assumes you have the [GitHub CLI](https://cli.github.com/) installed, which I highly recommend if you work regularly with GitHub.
```bash
# 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 ""
ntl env:set NEXT_PUBLIC_GOOGLE_API_KEY ""
# start the dev server
ntl dev
```