View: MapViewer

The first example below can be pasted into the body of your HTML document. For each additional snippet, you can replace the snippet within the first example which is located between the JavaScript comments.

Display a MapViewer component with navigation options to change the zoom level and layer data types centered on Austin, TX:

<link href="https://cdn.aerisapi.com/wxblox/latest/aeris-wxblox.css" rel="stylesheet"/>
<script src="https://cdn.aerisapi.com/wxblox/latest/aeris-wxblox.js"></script>

<!-- DOM target where the WeatherBlox view will be rendered -->
<div id="wxblox"></div>

<script>
const aeris = new AerisWeather('CLIENT_KEY', 'CLIENT_SECRET');
aeris.on('ready', () => {
	// Insert view / layout code below
	
var view = new aeris.wxblox.views.MapViewer('#wxblox', {

	    map: {

		loc: 'austin,tx',

	        data: ['radar']

	    },

		controls: {

			layers: [{

				code: 'radar',

				title: 'Radar'

			},{

				code: 'satellite',

				title: 'Satellite'

			},{

				code: 'alerts',

				title: 'Advisories'

			},{

				code: 'temperatures,clip-us-flat',

				title: 'Temps'

			}],

			regions: [{

				zoom: 7,

				title: 'Local'

			},{

				zoom: 5,

				title: 'Regional'

			},{

				region: 'us',

				title: 'National'

			}]

		}

	});

	view.load();
	// End view / layout code
});
</script>

Display a MapViewer component with navigation options to change the zoom level and layer data types centered on Austin, TX:

$view = new Aeris\WxBlox\View(’/layouts/maps/viewer’, ‘austin,tx’, array(

	‘map’ => array(

		‘data’ => array(‘radar’)

	),

	‘controls’ => array(

		‘layers’ => array(

			array(‘code’ => ‘radar’, ‘title’ => ‘Radar’),

			array(‘code’ => ‘satellite’, ‘title’ => ‘Satellite’),

			array(‘code’ => ‘alerts’, ‘title’ => ‘Advisories’),

			array(‘code’ => ‘temperatures,clip-us-flat’, ‘title’ => ‘Temps’)

		),

		‘regions’ => array(

			array(‘zoom’ => 7, ‘title’ => ‘Local’),

			array(‘zoom’ => 5, ‘title’ => ‘Regional’),

			array(‘region’ => ‘us’, ‘title’ => ‘National’)

		)

	)

));

$content = $view->html();

echo $content;

Display a MapViewer component with navigation options to change the zoom level and layer data types centered on Austin, TX:
https://wxblox.aerisapi.com/[api_key]/[secret_key]/views/maps/viewer/austin,tx?opts=%7B%22map%22%3A%7B%22loc%22%3A%22austin%2Ctx%22%2C%22data%22%3A%5B%22radar%22%5D%7D%2C%22controls%22%3A%7B%22layers%22%3A%5B%7B%22code%22%3A%22radar%22%2C%22title%22%3A%22Radar%22%7D%2C%7B%22code%22%3A%22satellite%22%2C%22title%22%3A%22Satellite%22%7D%2C%7B%22code%22%3A%22alerts%22%2C%22title%22%3A%22Advisories%22%7D%2C%7B%22code%22%3A%22temperatures%2Cclip-us-flat%22%2C%22title%22%3A%22Temps%22%7D%5D%2C%22regions%22%3A%5B%7B%22zoom%22%3A7%2C%22title%22%3A%22Local%22%7D%2C%7B%22zoom%22%3A5%2C%22title%22%3A%22Regional%22%7D%2C%7B%22region%22%3A%22us%22%2C%22title%22%3A%22National%22%7D%5D%7D%7D