Configuration

You may need to customize the configuration of a WeatherBlox view beyond just the API data request parameters, such as overriding the default options that control the final output. Most WeatherBlox views have additional customization options that you can override via their constructor method when you create an instance of them. Refer to the documentation for each view or layout for additional information regarding the configuration options currently supported.

Global Configuration

The global configuration for your WeatherBlox setup manages things like link formatting, icon locations and mappings, and the units to display. The library provides all of the defaults necessary to get started without worrying about any of these settings, but you can override these defaults to provide additional customization.

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).

Below is the default configuration object, specifically related to the available link types taken from the full configuration object:

{
    links: {
        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'
        }
    },
    icons: {
        path: '//cdn.aerisapi.com/wxblox/icons/',
        ext: 'png',
        mapping: {}
    },
    unitsType: Units.Type.Imperial,
    units: {
        imperial: {
            temp: '°F',
            speed: ' mph',
            distance: ' mi',
            height: ' ft',
            pressure: ' in',
            percent: '%',
            precip: '"',
            rain: '"',
            snow: '"',
            text: ''
        },
        metric: {
            temp: '°C',
            speed: ' kmh',
            distance: ' km',
            height: ' m',
            pressure: ' mb',
            percent: '%',
            precip: ' mm',
            rain: ' mm',
            snow: ' cm',
            phrase: 'met'
        }
    }
}

array(
    'timeout' => 10,
    'links' => array(
        'loc' => '{{place.state}}/{{place.name}}',
        'local' => array(
            'main' => '/local/{{loc}}.html',
            'radar' => '/local/{{loc}}/radar.html',
            'history' => array(
                'day' => '/local/{{loc}}/history/{{year}}/{{month}}/{{date}}.html',
                'month' => '/local/{{loc}}/history/{{year}}/{{month}}.html',
                'year' => '/local/{{loc}}/history/{{year}}/{{month}}.html'
            ),
            'forecast' => array(
                'day' => '/local/{{loc}}/forecast/{{year}}/{{month}}/{{date}}.html'
            ),
            'normals' => array(
                'month' => '/local/{{loc}}/normals/{{month}}.html'
            ),
            'sunmoon' => array(
                'month' => '/local/{{loc}}/sunmoon/{{year}}/{{month}}.html',
                'year' => '/local/{{loc}}/sunmoon/{{year}}/{{month}}.html'  
            ),
            'calendar' => array(
                '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' => array(
            'main' => '/maps/{{region}}/{{type}}.html',
            'default' => '/maps/us/radar.html'
        )
    )
);

To override these default configuration values using WeatherBlox, you just need to use the aeris.wxblox.config.set() JavaScript method (or Aeris\WxBlox\Config::getInstance()->set() PHP method) to set your desired value for the configuration’s key path.

For example, the following would change the icon path to a custom icon set used across various WeatherBlox views:

aeris.wxblox.config.set('icons.path', 'https://www.mydomain.com/images/wxicons/');

Heads Up! Some configuration options aren’t available when using the WeatherBlox API method since the views are rendered on our servers before being available to your application. However, you can modify the returned HTML content as needed before rendering the output.

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. Review our documentation on handling links for more information on customizing links within your WeatherBlox implementation.

Last modified: July 15, 2019