https://github.com/scottgriv/wtz-map
Discover the current weather and time zone information for any location around the world using this interactive map.
https://github.com/scottgriv/wtz-map
api apis leaflet leaflet-map leafletjs map nuxt nuxt-js nuxtjs open-weather-api open-weather-map open-weather-map-api time-zone time-zones timezone weather
Last synced: 2 months ago
JSON representation
Discover the current weather and time zone information for any location around the world using this interactive map.
- Host: GitHub
- URL: https://github.com/scottgriv/wtz-map
- Owner: scottgriv
- License: mit
- Created: 2024-06-30T01:14:33.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-01-09T04:28:31.000Z (4 months ago)
- Last Synced: 2025-02-14T01:57:56.414Z (2 months ago)
- Topics: api, apis, leaflet, leaflet-map, leafletjs, map, nuxt, nuxt-js, nuxtjs, open-weather-api, open-weather-map, open-weather-map-api, time-zone, time-zones, timezone, weather
- Language: Vue
- Homepage: https://scottgriv.github.io/WTZ-Map/
- Size: 2.35 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
---------------
Weather Time Zone (WTZ) Map
This Nuxt application allows you to discover the current weather and time zone information for any location around the world. Simply input a location, and the app will display the relevant data, including weather conditions, time zone, and current time.
Application Preview
---------------
## Table of Contents
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Usage](#usage)
- [Resources](#resources)
- [License](#license)
- [Credits](#credits)
## Getting Started
### Prerequisites
Before you begin, ensure you have met the following requirements:
- You have installed [Node.js](https://nodejs.org/) and [npm](https://www.npmjs.com/).
- You have a GitHub account.
### Installation
1. **Clone the repository:**
```bash
git clone https://github.com/scottgriv/WTZ-Map.git
cd WTZ-Map
```
2. **Install dependencies:**
```bash
npm install
```
3. **Obtain API keys:**
- [TimeZoneDB](https://timezonedb.com/register) - Sign up and get your API key.
- [OpenWeatherMap](https://home.openweathermap.org/users/sign_up) - Sign up and get your API key.
4. **Set up environment variables:**
Create a `.env` file in the root directory of your project and add your API keys:
```plaintext
NUXT_ENV_OPENWEATHER_API_KEY=your_openweathermap_api_key
NUXT_ENV_TIMEZONEDB_API_KEY=your_timezonedb_api_key
```
5. **Run the application locally:**
```bash
npm run dev
```
The application should now be running on `http://localhost:3000`.
To deploy your Nuxt application to GitHub Pages, follow these steps:
6. **Add your API keys as GitHub Secrets:**
- Go to your GitHub repository.
- Click on `Settings`.
- Navigate to `Secrets and variables` > `Actions`.
- Click on `New repository secret`.
- Add the following secrets:
- `NUXT_ENV_OPENWEATHER_API_KEY`
- `NUXT_ENV_TIMEZONEDB_API_KEY`
> [!CAUTION]
> Secrets must have the `NUXT_ENV` prefix to properly work.
> See [this Nuxt.js documentation here](https://v2.nuxt.com/docs/configuration-glossary/configuration-env/#automatic-injection-of-environment-variables) for more information.
## Usage
1. Enter a location in the search bar.
2. Click the search button or hit the enter key.
3. View the corresponding data on the screen.
4. Click the reset button to clear the results and reset the map view.
## Resources
**APIs:**
- [TimeZoneDB](https://timezonedb.com/)
- [OpenWeatherMap](https://openweathermap.org/)
- [Iowa State University's Mesonet](https://mesonet.agron.iastate.edu/ogc/)
**Technologies:**
- [JavaScript](https://www.javascript.com/)
- [HTML](https://www.w3schools.com/html/)
- [CSS](https://www.w3schools.com/css/)
- [Nuxt.js](https://nuxtjs.org/)
- [Vue.js](https://vuejs.org/)
- [Leaflet](https://leafletjs.com/)
- [Axios](https://axios-http.com/)
- [Leaflet.timezones](https://github.com/dj0001/Leaflet.timezones)
**Maps**
_Free Tile Providers (No API Key Required)_
- [Esri](https://www.esri.com/en-us/capabilities/mapping/overview)
- [OpenStreetMap](https://www.openstreetmap.org/)
- [CartoDB](https://carto.com/)
_Tile Providers Requiring API Key_
- [Mapbox](https://www.mapbox.com/)
- [Stadia x Stamen](https://stadiamaps.com/stamen)
- [HERE Maps](https://www.here.com//)
- [Thunderforest](https://www.thunderforest.com/)
- [MapTiler](https://www.maptiler.com/)
> [!NOTE]
> Easily swap out your map provider by searching for the `Change Map Provider Here` comment in the code base.
> Replace the few lines of code below the comment with your map/tile provider or one of the providers mentioned above.
> By default, I'm using **Esri** with the `World_Topo_Map` (topological) style.
## License
This project is released under the terms of the **MIT License**, which permits use, modification, and distribution of the code, subject to the conditions outlined in the license.
- The [MIT License](https://choosealicense.com/licenses/mit/) provides certain freedoms while preserving rights of attribution to the original creators.
- For more details, see the [LICENSE](LICENSE) file in this repository. in this repository.
## Credits
**Author:** [Scott Grivner](https://github.com/scottgriv)
**Email:** [[email protected]](mailto:[email protected])
**Website:** [scottgrivner.dev](https://www.scottgrivner.dev)
**Reference:** [Main Branch](https://github.com/scottgriv/WTZ-Map)
---------------
