Request a Map Image

Request a map image from the Aeris Maps 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>Aeris 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: August 09, 2019