Display a Basic MapView
Render a basic map view. The following example will display a map view centered on Seattle, WA with custom layer controls for switching between weather data layers.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Xweather JavaScript SDK - Basic MapView</title>
<script defer src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js"></script>
<link rel="stylesheet" href="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.css">
<style>
#map {
margin: 30px auto;
width: 600px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
window.onload = () => {
const aeris = new Xweather('CLIENT_ID', 'CLIENT_SECRET');
aeris.views().then(views => {
const map = new views.Map(document.getElementById('map'), {
map: {
center: 'seattle,wa',
zoom: 6,
size: {
width: 600,
height: 400
}
},
controls: {
layers: [{
value: 'temperatures,water-flat',
title: 'Temps'
},{
value: 'radar',
title: 'Radar'
},{
value: 'alerts',
title: 'Alerts'
}]
}
});
});
};
</script>
</body>
</html>