Forecast Icon Hosting

Tempest Owners Feature Requests
,
1

Weatherflow should host current condition icons on the web where developers can use them in custom integrations using a standard URL format that matches the returned icon name, like weatherflow.com/icons/clear-day.png or something similar for each.

These Possible Icon Values:

  • clear-day
  • clear-night
  • cloudy
  • foggy
  • partly-cloudy-day
  • partly-cloudy-night
  • possibly-rainy-day
  • possibly-rainy-night
  • possibly-sleet-day
  • possibly-sleet-night
  • possibly-snow-day
  • possibly-snow-night
  • possibly-thunderstorm-day
  • possibly-thunderstorm-night
  • rainy
  • sleet
  • snow
  • thunderstorm

https://weatherflow.github.io/Tempest/api/swagger/

2

As it stands now, I have hosted my own set of icons and named them to match and use the following code to access them.

<script defer>
  // Fetch weather current conditions from API
  const options = {method: 'GET', headers: {accept: 'application/json'}};
    fetch('https://swd.weatherflow.com/swd/rest/better_forecast?station_id={snip}&units_temp=c&units_wind=mps&units_pressure=mb&units_precip=mm&units_distance=km&api_key={snip}', options)
      .then(response => response.json())
      .then(response => {
        const currentConditions = response.current_conditions;
        const currentConditionsText = currentConditions.conditions;
        const currentConditionsIcon = currentConditions.icon;
        const imageSrc = `/images/${currentConditionsIcon}.png`;
        document.getElementById('conditions').textContent = currentConditionsText;
        document.getElementById('conditions-icon').setAttribute('src', imageSrc);
    })
    .catch(err => console.error(err));
  </script>

<img id="conditions-icon" src="" alt="" style="display: block; margin-left: auto; margin-right: auto;">
1 Like