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
- Web application for a weather forecast
jsWeather Joomla ModulejsWeather is a lightweight and versatile Joomla module that displays weather information for any location, including information such as, humidity, barometric pressure, wind, visibility. It was developed using the latest current version of openWeatherMap as weather data source.
Key features of jsWeather include:
- An easy use and dynamic display of weather data
- Uses weather data provided by a location name, geographic coordinates, or the geolocation of visitors.
- Data can be cached for better performance and system usage
- OpenWeatherMap API support
1. InstallationYou can 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 may download the jsWeather Module installation file from my website and install it via the admin backend.
2. ConfigurationTo use the module you need to get the free API key from OpenWeatherMap". Then open the setup menu for modules in the Joomla admin backend via "system->site modules" Click the "New button" in the menu and then select the module "jsWeather".
This opens the HTML form for configuring the module. Please use the necessary information for the configuration with the option "Toggle inline help" in the form. This displays help-texts for the respective module settings. Furthermore, take care on the other necessary Joomla settings (e.g. "Position", "Status", Menu assignment, etc.). For example, you can use the "Advanced" option to select the "default" or "horizontal" module layouts.
This application shows weather informations on any location - please choose your location to be displayed. The forecast shows weather developments in any location at midday for 5 days. In addition, a diagram shows how the daily temperature will develop.
Notes on this weather forecast
The data for this application is provided via a web service by "OpenWeathermap". This data is processed with the help of web application class "js_weather" and displayed in the above format.
Installation and ConfigurationThe installation is quite easy. Once you have downloaded the "jsweather-v1.0.zip" installation file, unzip it and download them all Upload folders and files to an accessible directory on your website. (or if you are using XAMPP, copy folders and files to an accessible directory. "Accessible" means you have access to all files via your web server (e.g. Apache) and browser. Please keep the directory structure and the Naming folders at (do not rename directories). Now edit the configuration file "sample_settings.php". Configure the following php variables:
- $key your API key from openWeatherMap
- $location your default location (e.g. Frankfurt")
- $use_ip Use of a geolocation server (e.g. "false or true")
- $cachetime / $cachetime2 Storage time for caching weather data in seconds (e.g. 3600 for 1h)
- $lang Language (e. g. "en" for English)
The jsweather.ini file contains messages for the languages "German, French and English. If necessary, you can adapt the entries or add new languages.
Now check whether with the url ""installation directoryjsweather/index.php, whether your installation was successful.
With Joomla, it is best to use the application with the options of the jphpx component or the jphpx Plugins as also implemented here in this documentation with the jphpx plugin-tag.
Use jsWeather on Joomla
Independent web application solutions can only be integrated into a Joomla environment to a limited extent (e.g. with Joomla's Iframe Warapper environment). Also Joomla does not allow that php code may be used in its content. With my joomla extension, jjphpx System Package, it is possible despite this limitation to run your own web solutions under the Joomla umbrella and also to use all the capabilities of Joomla. I will show here how this is also made possible for my web application jsWeather.
A solution is created in three quick and easy steps:
1. Set up jphpx code entries
Select the option "jphpx Application" or "jphpx Code Entry" via the "Components" menu item in the administrator backend. This calls the component and you can now define a new jphpx application with the "New" button. For this, a title of the application, the source (the path and the file name), the access and the activation must be entered. With the "Save" button, the new code entry becomes available after successful saving.
In this way create the entries for the following php application scripts
- Current weather: "your-directory/jsweather/jphpx/get_current_weather.php"
- Weather forecast: "your-directory/jsweather/jphpx/get_weather.php"
- Line graph: "your-directory/jsweather/phpRGraph/jphpx_line_temperatur.php"
- Delete Cache: "your-directory/jsweather/jphpx/delete_cache.php"
2. Set jsWeather configuration
In the configuration file "settngs.php" in the directory: "your-directory/jsweather/jphpx" update the id numbers of the jphpx code entries.
3. Use jphpx plugin or jphpx component
Note: Please check that jphpx plugin version 18.104.22.168 or higher has been installed.
In the last step you make the applications available for your Joomla site. Create a new Joomla article with e.g. explanatory or introductory text to your weather application. The respective jsWeather web application is defined with a jphpx plugin tag:
- For the current weather:
- For the weather forecast:
- For the current weather and weather forecast:
You may then create a menu-item to build a link to this new page with your weather information part.
How to use jsWeather with jphpx component or module please read jphpx reference about jphpx component and module.
jsWeather Application ClassThe jsWeather Application class is documented here for developers of php web applications. The interface for this is created with a php class. This "js_weather" class mainly supports the provision of weather data from OpenWeatherMap in the form of JSON objects for further processing and display, e.g. for a weather forecast or a display of the current weather situation.
Via the constructor "js_weather"
__construct ($api_key, $forecast = false)
a js_weather object is created. A required parameter is the API key of openWeatherMap, the second parameter defines whether data for the weather forecast or about the current weather should be delivered. Example:
my_weather = new js_weather ($api_key, true);
The method "setLocation"
setLocation ($location, $use_ip = false) specifies the location for the weather data. The format is either a place name or an indication of geographic coordinates. If the second parameter ($use_ip) is set to "true", an attempt is made to deliver the location via a geolocation server. The return value is "true" if the execution was successful. Example:
$rc = my_weather->setLocation("52.3472,14.5506");
The weather data is returned using the
get_weather_data ($dir = null) method. If the $dir parameter specifies a valid directory, the weather data will be saved in the file "save_weatherdata.$id" within directory "$dir". Saving will only be done if the request was successful. The $id suffix can be set using the setID($id) method. set (default is "1"). This function is used e.g. in the jsWeather joomla module for caching the weather data. Example:
$weather_info = $myweather->get_weather_data());The output format is always a JSON object. The structure of this object is documented in openWeatherMap, e.g. for weather forecast.
In addition, "getter" and "setter" methods are available for use:
- getUseIP () Checks if the geolocation server was successful
- getTag () Returns the country code (e.g. "en") of the website visitor if the geolocation assignment is successful
- getLocation () returns the defined location
- setLanguage ($tag) sets the national language (default "de" for German language)
- getLanguage() returns the local language
- setID ($id) sets an id
- getID () returns an id
- setUnits ($units) defines the temperature unit - "metric" or "1" for Celsius or "imperial" or "2" for Fahrenheit.
- getunits () returns the temperature unit
NotesThe js_weather class is defined under the namespace "js_weather" - i.e. to use the class successfully a "use - statement" is required (e.g. "use \myapp\js_weather").
ExamplesFor example, the jsWeather Application class is used by the Joomla jsWeather Module and the weather forecast shown here.
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.
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 1.0 for Joomla!
jsWeather Web-Application and js_weather class
Any questions? Visit the Support Forum or send an email to the developer, our webmaster.