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.

Table of Contents

• Getting Started
  • Prerequisites
  • Installation
  • Usage
• Resources
• License
• Credits

Getting Started

Prerequisites

Before you begin, ensure you have met the following requirements:

• You have installed Node.js and npm.
• You have a GitHub account.

Installation

1. Clone the repository:

   git clone https://github.com/scottgriv/WTZ-Map.git
   cd WTZ-Map
   

2. Install dependencies:

   npm install
   

3. Obtain API keys:

   • TimeZoneDB - Sign up and get your API key.
   • OpenWeatherMap - 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:

   NUXT_ENV_OPENWEATHER_API_KEY=your_openweathermap_api_key
   NUXT_ENV_TIMEZONEDB_API_KEY=your_timezonedb_api_key
   

5. Run the application locally:

   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 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
• OpenWeatherMap
• Iowa State University's Mesonet

Technologies:

• JavaScript
• HTML
• CSS
• Nuxt.js
• Vue.js
• Leaflet
• Axios
• Leaflet.timezones

Maps Free Tile Providers (No API Key Required)

• Esri
• OpenStreetMap
• CartoDB
  Tile Providers Requiring API Key
• Mapbox
• Stadia x Stamen
• HERE Maps
• Thunderforest
• MapTiler

[!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 provides certain freedoms while preserving rights of attribution to the original creators.
• For more details, see the LICENSE file in this repository. in this repository.

Credits

Author: Scott Grivner Email: [email protected] Website: scottgrivner.dev Reference: Main Branch