I'd like to add a tabular weather forecast with climatic variables like temperature, wind, and chance of precipitation to my QGIS atlas composer. Does anyone have suggestions on how I can do this?


You could probably use a HTML Frame. This way you can master the way things are displayed and you can have an updated image or data based on internet or a server broadcasting those informations.

The button is on the insert objects toolbar in QGIS or you can go through the layout menu/insert html frame.

For HTML code, have a look below for an working example of HTML code you could insert (from OpenWeathermap - free for reasonable number of query on the API)

<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">
  <meta name="keywords" content="weather, world, openweathermap, weather, layer" />
  <meta name="description" content="A layer with current weather conditions in cities for world wide" />
  <meta name="domain" content="openweathermap.org" />
  <meta http-equiv="pragma" content="no-cache" />
  <meta http-equiv="Expires" content="-1" />
<script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/A72E43C7-AA15-E24F-ADA1-902DA2479692/main.js" charset="UTF-8"></script></head>
  <div style="font-size: medium; font-weight: bold; margin-bottom: 0px;">London</div>
  <div style="float: left; width: 130px;">
    <div style="display: block; clear: left;">
      <div style="float: left;" title="Titel">
        <img height="45" width="45" style="border: medium none; width: 45px; height: 45px; background: url(&quot;http://openweathermap.org/img/w/50d.png&quot;) repeat scroll 0% 0% transparent;" alt="title" src="http://openweathermap.org/images/transparent.png"/>
      <div style="float: left;">
        <div style="display: block; clear: left; font-size: medium; font-weight: bold; padding: 0pt 3pt;" title="Current Temperature">7°C</div>
        <div style="display: block; width: 85px; overflow: visible;"></div>
    <div style="display: block; clear: left; font-size: small;">Clouds: 90%</div>
    <div style="display: block; clear: left; color: gray; font-size: x-small;" >Humidity: 81%</div>
    <div style="display: block; clear: left; color: gray; font-size: x-small;" >Wind: 4.6 m/s</div>
    <div style="display: block; clear: left; color: gray; font-size: x-small;" >Pressure: 1012hpa</div>
  <div style="display: block; clear: left; color: gray; font-size: x-small;">
    <a href="http://openweathermap.org/city/2643743?utm_source=openweathermap&utm_medium=widget&utm_campaign=html_old" target="_blank">More..</a>
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-31601618-9', 'auto');ga('send', 'pageview');</script>
| improve this answer | |
  • The HTML object is exactly what I was looking for. Thank you! – jm90 Aug 16 '17 at 11:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.