Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
AerisWeather JS SDK - Basic InteractiveMap Example
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.