This would be good to use in websites like sporting fixtures, outdoor events, travel / tourism, severe weather tracking, and also for farmers and growers. The stack has basic settings to control what part of the world to show on start. Plus different options to change the visual display of the radar map.

Two configurations are offered in the Radar stack:
  • iFrame Embed uses a bare-minimum of code and offers the widest compatibility with different themes and frameworks.
  • Leaflet.js / Open Street Maps reduces branding, keeps more the the codebase local to your website and provides extra code options for customising the radar loop animation sequence buttons.

Examples

These are some examples of the Radar stack, with different mapping styles and graphics applied.

Setup

To use the stack, simply install it into RapidWeaver in the normal way. Open your Stacks Library and search for 'Radar'. Drag and drop a copy of the stack into your webpage. Within the stacks side panel, you have various settings to customise the behaviour and style of your weather radar map. All settings have information tooltips on mouseover.

Please note: a caching bug in RapidWeaver Preview mode may result in the radar visuals not updating immediately when you make changes to either the Radar Graphics or Map Type. The workaround solution is to preview the page in a normal web browser (e.g. Firefox, Safari or Chrome).

Customising the loop sequence buttons

This is available to change with the configuration set to Leaflet.js / Open Street Maps in the stack settings. You are presented with input boxes to change the labels and Font Awesome icons applied to the buttons. A box exists to enter class selector names for button styles that your theme already supports. For example if you are using a ThemeFlood theme, you can easily enter Bootstrap button classes, which most of our themes support. This way, you can style the buttons consistently to match other buttons your theme already does. Or supply your own CSS code to restyle the buttons. Paid help is available for custom designed and coded buttons.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.