Description

This shortcode retrieves the current weather conditions from OpenWeatherMap.org and displays them as a very clean, minimal widget that can be placed just about anywhere on your internal or external websites.

Only the current temperature and condition icon are visible initially, but on hover the location, high/low temperatures, conditions, "feels like" temperature, humidity, precipitation and wind speed are shown in a tooltip.

How-To

Sign up For OpenWeather API

While OpenWeather does have a free API, this shortcode relies on the "paid" One Call API 3.0. The good news is that it's still entirely free for up to 1,000 requests per day. They only take your credit card info in case you go over that 1,000 threshhold.

By default this shortcode's output is cached for two minutes, so even if someone sat there and reloaded your page non-stop for 24 hours, you'd still only end up with 720 requests per day. We've had this displayed on our internal home page for a couple weeks and at most we've had just over 100 requests in a single day.

They also provide a feature where you can set your own maximum number of requests per day. So, if you set your max to 1,000 and you ever reach that limit, their system will just cut you off until the next day and you won't ever end up with a bill.

Here's how to get your account set up:

1. Create an account
2. Check your email for a verification link. Verify your account and log in.
3. Sign up for the One Call by Call subscription
4. Find your API key and save it for later. You should have already received an automated email with your API key, but if you didn't, you can just go to their site and click on your username in the top right and choose My API Keys to get your key.
5. Optional: To set your maximum calls per day, go to your Billing Plans page, find the One Call by Call Base plan and click the pencil icon under "Calls per day (no more than)". Change the value to 1000 and hit save.

Shortcode Details

Create a new Lava Shortcode with the following details:

• Name: Weather Status Widget
• Tag Name: weather
• Tag Type: Inline
• Description: Displays the current weather conditions for the specified latitude and longitude using data from OpenWeatherMap.org

Documentation:

<p><strong>Usage:</strong></p>
<pre>{%- cache key:'UniqueCacheKey' duration:'120' tags:'weather-status' -%}
    {[ weather apikey:'1a2b3c4d5e6f7890' lat:'36.852458' lng:'-119.747348' locname:'Fresno, CA' ]}
{%- endcache -%}</pre>
<p class="alert alert-warning">Caching doesn't seem to work correctly inside of a shortcode, so make sure to wrap your shortcode call inside of your own <code>cache</code> command.</p>
<ul>
    <li><strong>apikey</strong> (string, required, default:<code>blank</code>) – API key from OpenWeatherMap.org.</li>
    <li><strong>lat</strong> (decimal, required, default:<code>blank</code>) – Latitude of the location to get the weather for.</li>
    <li><strong>lng</strong> (decimal, required, default:<code>blank</code>) – Longitude of the location to get the weather for.</li>
    <li><strong>locname</strong> (string, required, default:<code>blank</code>) – A short location name that will be displayed to the user when they hover over the current temperature.</li>
    <li><strong>units</strong> (string, optional, default:<code>imperial</code>) – The units of measurement to use. Valid options are <code>imperial</code> <small>(Fahrenheit/Miles)</small>, <code>metric</code> <small>(Celcius/Meters)</small> or <code>standard</code> <small>(Kelvin/Meters)</small>.</li>
</ul>
<p><strong>Output:</strong></p>
<span data-toggle="tooltip" data-html="true" data-placement="bottom" data-container="body" data-viewport=".main-content" data-original-title="<div class=&quot;pr-3&quot;>
    <strong>Fresno, CA</strong><br>
    <div class=&quot;my-1&quot;><span class=&quot;badge badge-danger&quot;>99°</span> <span class=&quot;badge badge-info&quot;>69°</span></div>
    Clouds<br>
    Feels Like: 96°<br>
    Humidity: 26%<br>
    Rain: 0%<br>
    Wind: 1mph<br><br>
    <small>Updated: 2:54 PM</small>
</div>
">
    <i class="fas fa-cloud-sun" title="Clouds"></i> <strong>97°</strong>
</span>

Shortcode Markup:

{%- capture url %}https://api.openweathermap.org/data/3.0/onecall?lat={{ lat }}&lon={{ lng }}&exclude=minutely,hourly,alerts&units={{ units }}&appid={{ apikey }}{% endcapture -%}
{%- webrequest url:'{{ url }}' -%}
    {%- unless results contains 'BadRequest' or results contains 'Unauthorized' -%}
        {%- case results.current.weather[0].icon -%}
            {%- when '01d' -%} {%- assign icon = 'fas fa-sun' -%}
            {%- when '01n' -%} {%- assign icon = 'fas fa-moon' -%}
            {%- when '02d' -%} {%- assign icon = 'fas fa-cloud-sun' -%}
            {%- when '02n' -%} {%- assign icon = 'fas fa-cloud-moon' -%}
            {%- when '03d' or '03n' or '04d' or '04n' -%} {%- assign icon = 'fas fa-cloud' -%}
            {%- when '09d' or '09n' -%} {%- assign icon = 'fas fa-cloud-rain' -%}
            {%- when '10d' -%} {%- assign icon = 'fas fa-cloud-sun-rain' -%}
            {%- when '10n' -%} {%- assign icon = 'fas fa-cloud-moon-rain' -%}
            {%- when '11d' or '11n' -%} {%- assign icon = 'fas fa-cloud-showers-heavy' -%}
            {%- when '13d' or '13n' -%} {%- assign icon = 'fas fa-snowflake' -%}
            {%- when '50d' or '50n' -%} {%- assign icon = 'fas fa-smog' -%}
            {%- else -%} {%- assign icon = 'fas fa-poo-storm' -%}
        {%- endcase -%}
        {%- assign conditions = results.current.weather | Select:'main' | Join:', ' -%}
        {%- assign precipitationLabel = 'Rain' -%}
        {%- assign precipitationProb = results.daily[0].pop | Default:'0' | AsDecimal | Times:100 | AsInteger -%}
        {%- if precipitationProb >= 10 -%}
            {%- assign rainAmount = results.daily[0].rain | Default:'0' | AsDecimal | DividedBy:25.4 -%}
            {%- assign snowAmount = results.daily[0].snow | Default:'0' | AsDecimal | DividedBy:25.4 -%}
            {%- assign snowUnits = 'in' -%}
            {%- if snowAmount > 12 -%}
                {%- assign snowAmount = snowAmount | DividedBy:12 -%}
                {%- assign snowUnits = 'ft' -%}
            {%- endif -%}
            {%- if snowAmount > 0 -%}
                {%- if rainAmount > 0 -%}
                    {%- assign precipitationLabel = 'Rain/Snow' -%}
                    {%- capture precipitationAmount %}(Rain: {{ rainAmount | Format:'#,##0.00' }} in, Snow: {{ snowAmount | Format:'#,##0.00' }} {{ snowUnits }}){% endcapture -%}
                {%- else -%}
                    {%- assign precipitationLabel = 'Snow' -%}
                    {%- capture precipitationAmount %}({{ snowAmount | Format:'#,##0.00' }} {{ snowUnits }}){% endcapture -%}
                {%- endif -%}
            {%- else -%}
                {%- capture precipitationAmount %}({{ rainAmount | Format:'#,##0.00' }} in){% endcapture -%}
            {%- endif -%}
        {%- endif -%}
        {%- capture tooltip -%}
<div class=&quot;pr-3&quot;>
    <strong>{{ locname }}</strong><br>
    <div class=&quot;my-1&quot;><span class=&quot;badge badge-info&quot;>{{ results.daily[0].temp.min | AsInteger }}&deg;</span> <span class=&quot;badge badge-danger&quot;>{{ results.daily[0].temp.max | AsInteger }}&deg;</span></div>
    {{ conditions }}<br>
    Feels Like: {{ results.current.feels_like | AsInteger }}&deg;<br>
    Humidity: {{ results.current.humidity | Default:'0' | AsInteger }}%<br>
    {{ precipitationLabel }}: {{ precipitationProb }}% {{ precipitationAmount }}<br>
    Wind: {{ results.current.wind_speed | Default:'0' | AsInteger }}mph<br><br>
    <small>Updated: {{ 'Now' | Date:'h:mm tt' }}</small>
</div>
        {%- endcapture -%}
<span data-toggle="tooltip" data-html="true" data-placement="bottom" data-container="body" data-viewport=".main-content" data-original-title="{{ tooltip }}">
    <i class="{{ icon }}" title="{{ conditions }}"></i> <strong>{{ results.current.temp | AsInteger }}&deg;</strong>
</span>
    {%- endunless -%}
{%- endwebrequest -%}

Parameters:

• apikey (blank)
• lat (blank)
• lng (blank)
• locname (blank)
• units imperial

Enabled Lava Commands:

Check the boxes for Cache and WebRequest.

All done!

Just take a look at the shortcode documentation to learn how to use it.

Follow Up

Please don't hesitate to leave a comment or hit me up on Rock Chat (@JeffRichmond) if you have questions or find any issues with this recipe.

Change Log

• 2023-02-03 - Swapped high and low temps. Removed extra percent sign after precipitation amount
• 2022-11-07 - Fixed typo that caused the wrong icon to be shown for rain. Removed cache command since it doesn't appear to work correctly inside shortcodes.
• 2022-11-02 - Fixed missing rain probability and added forcasted rain volume
• 2022-08-12 - Initial version