Handling Links

Some WeatherBlox views and layouts contain links that can be used to direct a user to a different weather-related page, such as viewing full weather advisory information or viewing a different day for an hourly forecast.

Both JavaScript and API methods of using WeatherBlox support the ability to customize link formatting, which can appear throughout the rendered views and are used to link to different areas of your site. For example, the NearbyObservations view contains links for each location that, when clicked, will take the user to the weather page for that location. Or for the Maps layout, clicking a new map layer or region will take the user to the page for that content (if not using JavaScript event handlers for the links).

Refer to our configuration guide for more information regarding the global configuration object.

Default configuration

Below is the default link configuration:

{
    loc: '{{place.state}}/{{place.name}}',
    local: {
        main: '/local/{{loc}}.html',
        radar: '/local/{{loc}}/radar.html',
        history: {
            day: '/local/{{loc}}/history/{{year}}/{{month}}/{{date}}.html',
            month: '/local/{{loc}}/history/{{year}}/{{month}}.html',
            year: '/local/{{loc}}/history/{{year}}/{{month}}.html'
        },
        forecast: {
            day: '/local/{{loc}}/forecast/{{year}}/{{month}}/{{date}}.html'
        },
        normals: {
            month: '/local/{{loc}}/normals/{{month}}.html'
        },
        sunmoon: {
            month: '/local/{{loc}}/sunmoon/{{year}}/{{month}}.html',
            year: '/local/{{loc}}/sunmoon/{{year}}/{{month}}.html'
        },
        calendar: {
            day: '/local/{{loc}}/history/{{year}}/{{month}}/{{date}}.html',
            month: '/local/{{loc}}/calendar/{{year}}/{{month}}.html',
            year: '/local/{{loc}}/calendar/{{year}}/{{month}}.html'
        },
        advisory: '/local/{{loc}}/advisories.html',
        maps: '/local/{{loc}}/maps.html'
    },
    maps: {
        main: '/maps/{{regionSlug}}/{{layers}}.html',
        default: '/maps/us/radar.html'
    }
}

Overriding links

To override these default configuration values using WeatherBlox, you just need to use the aeris.wxblox.config.set() method to set your desired value for the configuration's key path, which in most cases will just be a string value as demonstrated by the default configuration above.

For instance, the following will change the link used for the local.main link, which is for the main weather page:

aeris.wxblox.config.get('links.local.main', '/weather/locations/{{loc}}/');

This configuration will result in URLs like /weather/locations/wa/seattle/ or /weather/locations/tx/austin/ instead of the default.

Alternatively, you can use a callback function instead of a string to format the URL based on parameters passed to the function, which is typically location and/or date information. For example, the following uses a custom callback function for formatting the loc format uses through all location-based links:

aeris.wxblox.config.set('links.loc', function(data) {
    let place = data.place;
    return (place.state) ? place.country + '/' + place.state + '/' + place.name : place.country + '/' + place.name;
});

Disabling links

Some views and layouts support an option to disable links so that they either won't be rendered (if it's a button) or its elements won't contain links (if it's a row or element selection). Typically, this option is controlled by a Boolean links property on the view's configuration object at instantiation. Setting this value to false will remove and/or disable linked elements within that view. This value is typically set to true by default unless otherwise specified by a specific view's documentation.

Refer to each view's specific documentation to determine which views support disabling links and the proper configuration property to use.

Custom CSS Injecting HTML