PRO JCI Plugin and the API of openweathermap.org

The API of openweathermap.org gives Feeds like https://samples.openweathermap.org/ and inside that JSON like https://samples.openweathermap.org/data/2.5/weather?q=London&appid=…

This can be used by the PRO JSON Content Importer Plugin for searching the weather:

For that xyou need a Shortcode and a JCI-Template.


1. The Shortcode:

[jsoncontentimporterpro id=ID_OF_TEMPLATE httpstatuscodemustbe200=no]

is all you need as Shortcode on a WordPress-Page, – Post or CPT.
“httpstatuscodemustbe200=no” is required, as the API answers with an http-Error when a place can’t be found.

2. The JCI-Template:

There fill these fields: URL:
http://api.openweathermap.org/data/2.5/weather?q={%if urlparam.cit %}{{urlparam.cit}}{% else %}München{% endif %}&lang=de&units=metric&APPID=YOUR_API_KEY
urlparam4twig:
cit
twig:
{% set sea = "" %}
{% if urlparam.cit == "" %}
{% set sea = "London" %}
{% else %}
{% set sea = urlparam.cit %}
{% endif %}

<form action=...>
<input type=text name=cit placeholder="Place: Cityname..." value="{{sea}}">
<input type=submit id=jciinput value="Search for the weather on that place">
</form>
<hr>
{% if cod!="200" %}
Place not found
{% else %}
<h1><a href="https://www.google.com/maps/search/{{coord.lat}},{{coord.lon}}" target="_blank" rel="noopener noreferrer">{{name}}</a></h1>
<img align="right" src="http://openweathermap.org/img/wn/{{weather.0.icon}}@2x.png" title="{{weather.0.description}}" width="75">{{weather.0.description}} <br>
Windspeed: {{wind.speed}} m/s, Winddirection: {{wind.deg}}<br>
Temperature: {{main.temp}} &#8451;, feeels like: {{main.feels_like}} &#8451;<br>
Pressure: {{main.pressure}} hPa, Humidity:  {{main.humidity}}%
{% endif %}
<hr>
<style>
#jciinput[type=submit] {
    border-radius: 5px;
    width: 280px;
    height:35px;
    background: #f4f4f4;
}
</style>