u10int/aeris-js-interactivemap-basic.html

## aeris-js-interactivemap-basic.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AerisJS Interactive Maps</title>
    <link rel="stylesheet" type="text/css" href="./aerisjs-int-map-styles.css">
    <style>
    body {
        font-family: 'Helvetica','Arial',sans-serif;
    }
    #int-map {
        height: 400px;
        margin: 10px 0;
        width: 600px;
    }
    button {
        background: #ccc;
        border: 0;
        border-radius: 3px;
        color: #333;
        cursor: pointer;
        font-size: 12px;
        font-weight: bold;
        outline: none;
        padding: 8px 12px;
    }
    button:hover {
        background: #999;
    }
    button.selected {
        background: #0082b3;
        color: #fff;
    }
    </style>
</head>
<body>
<script src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js" defer></script>
<link rel="stylesheet" href="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.css">

<div id="map-container">
    <div id="int-map"></div>
    <div id="btn-list">
        <button id="radar" class="layer-btn">Radar</button>
        <button id="alerts" class="layer-btn">Alerts</button>
        <button id="satellite" class="layer-btn">Satellite</button>
    </div>
</div>

<script>
window.onload = function() {

    const allButtons = [
        document.getElementById('radar'),
        document.getElementById('alerts'),
        document.getElementById('satellite')
    ];

    const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');

    aeris.views().then(views => {
        const mapTarget = document.getElementById('int-map');
        const map = new views.InteractiveMap(mapTarget, {
            center: {
                lat: 40,
                lon: -100
            },
            zoom: 4,
            strategy: 'leaflet'
        });

        const toggleBtn = (e) => {
            const clickedBtn = e.target;
            const btnLayer = clickedBtn.id;
            let zIndex;

            switch(btnLayer) {
                case 'alerts':
                    zIndex = 1;
                    break;
                case 'radar':
                    zIndex = 3;
                    break;
                case 'satellite':
                    zIndex = 2;
                    break;
            }

            if (e.target.className.includes('selected')) {
                console.log(`remove layer ${btnLayer}`);
                map.removeLayer(btnLayer);
            } else {
                console.log(`add layer ${btnLayer}`);
                map.addLayer(btnLayer, {
                    style: {
                        zIndex: zIndex
                    }
                });
            }

            clickedBtn.classList.toggle('selected');
        };

        // wait for the load to be fully initialized by the underlying
        // mapping strategy before trying to work with it
        map.on('load', () => {
            // add a click event handler to each button to add the layer toggle support
            allButtons.forEach(btn => {
                btn.addEventListener('click', toggleBtn);
            });
        });
    });
}
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>AerisJS Interactive Maps</title>
	<link rel="stylesheet" type="text/css" href="./aerisjs-int-map-styles.css">
	<style>
	body {
	font-family: 'Helvetica','Arial',sans-serif;
	}
	#int-map {
	height: 400px;
	margin: 10px 0;
	width: 600px;
	}
	button {
	background: #ccc;
	border: 0;
	border-radius: 3px;
	color: #333;
	cursor: pointer;
	font-size: 12px;
	font-weight: bold;
	outline: none;
	padding: 8px 12px;
	}
	button:hover {
	background: #999;
	}
	button.selected {
	background: #0082b3;
	color: #fff;
	}
	</style>
	</head>
	<body>
	<script src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js" defer></script>
	<link rel="stylesheet" href="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.css">

	<div id="map-container">
	<div id="int-map"></div>
	<div id="btn-list">
	<button id="radar" class="layer-btn">Radar</button>
	<button id="alerts" class="layer-btn">Alerts</button>
	<button id="satellite" class="layer-btn">Satellite</button>
	</div>
	</div>

	<script>
	window.onload = function() {

	const allButtons = [
	document.getElementById('radar'),
	document.getElementById('alerts'),
	document.getElementById('satellite')
	];

	const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');

	aeris.views().then(views => {
	const mapTarget = document.getElementById('int-map');
	const map = new views.InteractiveMap(mapTarget, {
	center: {
	lat: 40,
	lon: -100
	},
	zoom: 4,
	strategy: 'leaflet'
	});

	const toggleBtn = (e) => {
	const clickedBtn = e.target;
	const btnLayer = clickedBtn.id;
	let zIndex;

	switch(btnLayer) {
	case 'alerts':
	zIndex = 1;
	break;
	case 'radar':
	zIndex = 3;
	break;
	case 'satellite':
	zIndex = 2;
	break;
	}

	if (e.target.className.includes('selected')) {
	console.log(`remove layer ${btnLayer}`);
	map.removeLayer(btnLayer);
	} else {
	console.log(`add layer ${btnLayer}`);
	map.addLayer(btnLayer, {
	style: {
	zIndex: zIndex
	}
	});
	}

	clickedBtn.classList.toggle('selected');
	};

	// wait for the load to be fully initialized by the underlying
	// mapping strategy before trying to work with it
	map.on('load', () => {
	// add a click event handler to each button to add the layer toggle support
	allButtons.forEach(btn => {
	btn.addEventListener('click', toggleBtn);
	});
	});
	});
	}
	</script>

	</body>
	</html>