jsWeather offers a solution for preparing generally available weather data and displaying it in a user-friendly way. For this, the easy and safe to use weather application interface (API) from "OpenWeatherMap" is used.
OpenWeatherMap is a commercial online service that provides an interface for retrieving weather data, weather forecasts, and historical weather data for web application and mobile device developers. Some of the available data can be accessed after a registration for free.
With the use of OpenWeatherMap three program developments have been realized:
- jsWeather php class for simplified use of the OpenWeatherMap API
- jsWeather - a module for Joomla version 4 and version 5
- Web application for a weather forecast
jsWeather is a simple and versatile Joomla module that displays weather information for any location, including information such as humidity, air pressure, wind, visibility. It was developed by jschmidt-systemberatung using the latest version of openWeatherMap as a weather data source.
Main features of jsWeather include:
- An easy-to-use and dynamic display of weather data
- Optional display of the current weather, a 5-day weather forecast or a combined display of current weather and weather forecast.
- A temperature diagram with tooltips is provided in the respective daily details.
- Supports five different layouts for displaying the current weather or weather forecasts.
- Different layouts can be used for different modules on one page at the same time.
- Uses weather data provided via a location name, geographical coordinates or the geolocation of visitors.
- offers an interactive solution with the Joomla system extension jphpx
- for better performance and system usage, weather data can be cached. Since version 1.4, the Joomla database has been used as a cache backend.
- Language support
- New: all English texts from openweathermap are translated into the respective supported language. Either the Google Single Client Translation API or the Google Cloud Translation API can be used for this.
- English language support
- German language support
- New: Spanish language support
- New: French language support
- New: Dutch language support
- OpenWeatherMap API support
- current weather
- 5 day/3 hour forecast
- New: One Call API 3.0. Provides detailed weather information and may display weather alerts, among other weather informations.
1. Installation
You may install the jsWeather Module on your Joomla site using the "Install from web catalog" method, because the jsWeather Module is available in the Joomla extensions database. Or you download the jsWeather Module installation file from my website and install it via the admin backend.Weather in Chicago - 
 |
50°F |
 |
7:06 |  |
16:19 |
| Humidity: | 69% |
| Wind: | 22.0 mph S |
| Pressure: | 1,007 hPa |
| Visibility: | not obstructed |
|
29°F
|
||
|
14°F
|
||
|
30°F
|
||
|
|
34°F
|
||
|
|
49°F
|
||
|
50°F
|
||
|
Temperature Profile
|
|
- the Joomla "loadmodule" content plugin
- using the Ajax interface of my system plugin jphpx
- jsWeather Application using jphpx-component
Jooomla content plugin "loadmodule"
The Joomla Core content plugin "loadmodule" allows embedding Joomla modules into Joomla articles.Since Joomla version 3.9.0, in addition to the plugin alternatives "{loadposition xx}" and "{loadmodule yyy}", there is the variant "{loadmoduleid z}, which is also implemented by the plugin.
In this case, the plugin looks for the module whose id corresponds to the number z. For example, you can insert the module with the "id 200" into the article by inserting the plugin tag "" into the article text.
Application and use
To use the jsWeather module, the following steps must be carried out:- Create a jsWeather module via admin backend
- Note (remember) the ID of the module
- Create/edit a Joomla article
- Insert the plugin tag "{loadmoduleid x}" ("x" = module ID) into the Joomla article
jphpx Ajax interface
If the extension "jphpx" is installed, you can implement an interactive solution from jsWeather as an alternative. This makes it possible to request the relevant weather information by entering any weather location. You can see the solution here:
Installation of the jphpx Ajax interface
The necessary prerequisite is the installation of "jphpx " and the jsWeather Module. jsWeather version 1.4. provides all the necessary components for an implementation:
- html code and scripts for the user interface
- Scripts for integrating and rendering the modules in the Joomla article
Configure solution
The following steps are necessary for a successful implementation:
-
Create jsWeather module
Create a jsweather module to be used,
Note: no ned to assign module positions, you may leave these undefined.
Write down (remember) the title of your module (the title should not contain any spaces or special characters) -
Set up jphpx code entry
Using the “Components” menu item in the administrator backend, you select the “jphpx Application” or “jphpx Code Entry” option. This calls the component and you can now define a new jphpx application using the “New” button. Define the code source with the valuemodules/mod_js_weather/jphpx/load_jsweather.php. After saving, write down (remember) the "id" of the new jphpx code entry. -
Check/change runtime parameters
The runtime parameters are used to customize the HTML code and scripts for the user interface. To do this, edit the file: jphpx_loadmodule.inistored in directory../modules/mod_js_weather/jphpx. To may do this, using the editing function of the FTP client “Fillezilla” or a similar tool. The meanings of the parameters are provided in the file. The following settings must be changed to your configured values of modules and jphpx component.- "id" - jphpx Code Entry Id
- "module" - Title of the module to be used"
-
Include jphpx plugin tag
Finally, enter this jphpx plugin tag{jphpx [modules/jphpx/mod_js_weather/jphpx_loadmodule.php]}at the location of your Joomla article where the jsWeather modules should be rendered.
Create and deploy jsWeather Application with the jphpx component
if the “jphpx” system extension is installed, another alternative is to use jsWeather as a standalone application with the jphpx component. jsWeather version 1.4. provides all the necessary components for an implementation:
Configure solution
The following steps are necessary for a successful implementation:
-
Create jsWeather Module
Create a jsweather module to be used,
Note: no ned to assign module positions, you may leave these undefined. Write down (remember) the title of your module (the title should not contain any spaces or special characters) -
define jphpx Code Entries
Using the menu item "Components" in the administrator backend, you select the option "jphpx Application" or "jphpx Code Entry". This calls the component and you can now define new jphpx applications using the “New” button. Define the following code sources:- the jsweather app with the value
modules/mod_js_weather/jphpx/jphpx_jsweather_app.php - the module for rendering the jsWeather module.
modules/mod_js_weather/jphpx/load_jsweather.php
After saving, note (remember) the "id" of the jphpx code entry Modules for rendering the jsWeather Module. - the jsweather app with the value
-
Check/change runtime parameters
The runtime parameters are used to adapt the html code and scripts for the user interface. To do this, edit the file: jsphpx_jsweather_app_iniin the directory"../modules/mod_js_weather/jphpx". To do this, use the editing function of the FTP client “Fillezilla” or a similar tool. The meaning of the parameters is listed in the file. The following settings must be adjusted:- "id" - jphpx Code Entry of the rendering jsWeather module
- "module" - title of the module"
The text entries contained in file "jphpx_jsweather_app_ini." may also be changed or adjusted if required.
Since version 1.4.7, jsWeather supports the option to display share buttons for the js weather app. The solution is implemented by AddToAny. The sample configuration file
"jphpx_jsweather_app_sample.ini"is included for this purpose. The following settings can be used to be adopted into the current"jphpx_jsweather_app_ini"and enable the use of share buttons:share_buttonwith the value "1" the use is switched onaddtoanyContains the definitions for "addtoany" share buttonscontact_urlcontains the URL of a Joomla contact
Note If you install jsWeather the first time, the entries are already there and just need to be adjusted. - Create Menu item
To use the module, you must obtain the free API key from OpenWeatherMap". Then call up the module setup menu in the Joomla admin backend via "system->site Module". Click the "New button in the menu and then select the "jsWeather" module.
This opens the HTML form for configuring the module. Please use the necessary information for the configuration in the form with the option "Switch inline help". This will display help texts for the respective module settings. Furthermore, note the other necessary Joomla settings (e.g. B. "Position", "Status", menu assignment, etc.)
Module types
Weather applications usually not only show the current weather, but also usually show a weather forecast for several days. jsWeather also offers this option with its three different module types:
- current weather
The current weather data for a location is requested from openweathermap and prepared for display. - weather forecast
The weather data for a five-day weather forecast for a location is requested from openweathermap and prepared for display. - current/forecast
The current weather data for a location and the weather data for a five-day weather forecast for a location are requested from openweathermap and prepared for display.
Layout options (templates)
Module templates are used in Joomla to display the prepared data from modules. Different templates (layouts) are required for the different module types of jsWeather due to the different data preparation.
- The following layouts are used for the module type current weather:
- default indicates a vertical alignment of the module
- horizontal indicates a horizontal alignment of the module
- The following layouts are used for the module type weather forecast:
- The following layout is used for the module type current/forecast:
Stylesheets (Cascading Style sheets - CSS)
CSS was designed to largely separate display specifications from the content. If this separation is consistently implemented, only the content structure of a document and the meaning of its parts are described in HTML or XML, while CSS is used separately, preferably in separate CSS files, to specify the display of the content (e.g. layout, colors and typography).
The jsWeather module offers two ways of using CSS:
- five formatting options supported by the module
- the possibility of using your own formatting (your own CSS).
- jsweather provides the CSS file "jsweather_custom.css" as a prototype. It helps with the development of your own formatting option, but is also ready to be used.
Note: The file must be saved in the directory"../media/mod_js_weather/css".
- jsweather provides the CSS file "jsweather_custom.css" as a prototype. It helps with the development of your own formatting option, but is also ready to be used.
Notes
If you do not have version 1.4.5 installed, uninstalling jsWeather may cause a problem. In this case, first update to version 1.4.5 (or higher) and then the uninstallation should be successful.
When using geolocation servers, an attempt is made to deliver the geographic coordinates via the website visitor's Internet address. However, this location allocation can only be as accurate as the respective data provided by the internet providers. IP-based geolocation services can be expected to provide 55 to 80 percent accuracy for a user's region or state.
Weather data are never "precise" they always relate to a more or less large region. It is therefore quite possible that e.g. rain is displayed although there is no rain in sight at the selected location.
If you get a "400" error when entering a valid location, you should enter the place name in lower case and then try the request again. If this also leads to the same error, enter the geographic coordinates of the location.
Download jsWeather
jsWeather is free software (like Joomla!) - however you must follow the GPL license terms to use it. More about GPL and free software can be found at GNU Org.
To download jsWeather click the "download" image:
jsWeather module version 2.0 for Joomla!
Any questions? Visit the Support Forum or send an email to the developer, our webmaster.
