JavaScript SDK - Request a Map Image

Request a map image from Xweather Maps. The following example will display current temperatures centered on Minneapolis, MN and output the valid time of the data.

Basic map example


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Xweather JavaScript SDK - Basic Map Request</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-ts {
        font-family: 'Helvetica','Arial',sans-serif;
        font-size: 14px;
        margin-top: 6px;
    }
    </style>
 
</head>
<body>
 
<div id="map"></div>
<p id="map-ts"></p>
 
<script>
 
    window.onload = () => {
 
        const target = document.getElementById('map');
        const ts = document.getElementById('map-ts');
        
        const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');
        
        const request = aeris.map().layers('flat-dk,temperatures,water-flat-dk,counties-dk:60,admin-dk');
        request.center('minneapolis,mn').zoom(6);
        request.size(600, 400);
 
        request.get().then((result) => {
            const { image, metadata: { validDate }} = result;
            if (image) {
                target.innerHTML = `<img src="${image.src}">`;
            }
            if (validDate) {
                ts.innerHTML = `Valid: ${aeris.utils.dates.format(validDate, 'h:mm a z, M/d/yyyy')}`;
            }
        }); 
    };
    
</script>
 
</body>
</html>