Request a Map Image

Request a map image from the AerisWeather Mapping Platform (AMP). The following example will display current temperatures centered on Minneapolis, MN and output the valid time of the data.

Basic map example
Basic map example
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AerisWeather 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>

Last modified: July 30, 2020