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.

Below is the default link configuration for the Javascript and PHP package usages:

JavaScript
PHP
{
	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'
	}
}
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'
	)
)

Overriding Links

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() via the PHP package method) to set your desired value for the configuration's key path, which in most cases will just be a string 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:

JavaScript
PHP
Aeris.wxblox.config.set('links.local.main', '/weather/locations/{{loc}}/');
Aeris\WxBlox\Config::getInstance()->set('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:

JavaScript
PHP
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;
});
Aeris\WxBlox\Config::getInstance()->set('links.loc', function($place) {
	if (!empty($place) && isset($place['country'])) {
		if (strtolower($place['country']) == 'us') {
			return strtolower(implode('/', array($place['country'], $place['state'], $place['name'])));
		}
		return strtolower(implode('/', array($place['country'], $place['name'])));
	}
	return '';
}); 

If you're using WeatherBlox via the API but not our PHP package for loading and rendering views, you would need to use your own method for performing the necessary link formatting and replacement before outputting your view to the page.

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.

Last modified: October 11, 2018