UltraWeather

Live demo: User-friendly weather forecast

At a glance, quickly determine:

• Is it warmer than yesterday? Colder than the day before?
• Is it warm enough for short sleeves?
• Do I need sunscreen? An umbrella?

UltraWeather also gives a better intuitive sense of the temperature.

UltraWeather options are set via the URL:

• https://uw.leftium.com Default is location based on IP address.
• https://uw.leftium.com/london By city name.
• https://uw.leftium.com/london,,GB Force country to Great Britain.
• https://uw.leftium.com/55105 Sometimes ZIP codes work.

Locations are retrieved from the OpenWeather geocoding API, and sorted to prefer some countries like the US.

• https://uw.leftium.com/?api=openweather
  • Possible API's: darksky,openweather,visualcrossing
  • Get mock data: mockdarksky,mockopenweather,mockvisualcrossing
  • Short versions: ds, mds

• https://uw.leftium.com/?debug&api=mds,mow,mvc Returns data from three API's, inspectable in the browser dev console. Normally only data from the first successful call is returned.

git clone https://github.com/Leftium/ultra-weather.git
cd ultra-weather

yarn            # Install dependencies.
netlify init    # Connect to Netlify.
    # Answer like this at prompts:
    # Your build command: "yarn dev"
    # Directory to deploy to: "public"
    # Netlify functions folder: "functions"
netlify dev     # Start the local server!

The above will fall back to mock data, since no API keys are configured. To show live weather data, set up your API keys:

cp .env-example .env
## Edit .env file with your own API keys
netlify dev

All these services offer a generous free tier:

• OpenWeather This API is also used to geocode place names to lat/long.

• Visual Crossing

• Dark Sky (Unfortunately Dark Sky API does not accept new signups.)

• ip-api Used to geocode IP address to lat/long. No API key needed, but listed here for reference.

• Blog post tutorial
• Netlify Dev