air-quality-edge-functions

KO | EN

gitlite — search

#react #llm #android #machine-learning #rust #docker #macos #nodejs #java #vue #awesome-list #pytorch #ios #openai

air-quality-edge-functions

(★ 9)

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.

air-quality-edge-functions Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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 "<your_key_here>"
ntl env:set NEXT_PUBLIC_GOOGLE_API_KEY "<your_key_here>"

# start the dev server
ntl dev
```

air-quality-edge-functions

air-quality-edge-functions Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

air-quality-edge-functions

air-quality-edge-functions Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README