AerisWeather Maps provides a wide array of weather information in a graphical form for use in a variety of applications. Our growing set of weather layers include past, current and future options, along with unique customization options allowing you to create the maps you want.

Maps is designed with simplicity, usability, and ease of integration in mind. Whether you need static maps added to a web page, visual display or fully interactive maps for web and mobile users, AerisWeather Maps includes integration options for you.

Static Map Example

Need to add a weather map to a website? Use AerisWeather's Maps with an <img> tag:

Here we use a simple URL to the image. You can use the Map Builder to obtain a custom map url:

<img src="https://maps.aerisapi.com/[client_id]_[client_key]/flat,radar,admin/500x300/minneapolis,mn,5/current.png" style="width: 500px; height: 300px;" />

Animation Example

Use our AMP Visualizer to add a radar animation of the past 3 hours:

Here we add the radar animation in the ‘aerismap’ div:

var ampAnimation = new AerisMaps.Visualizer("#aerismap", {
	loc: "minneapolis,mn",
	keys: {
         id: '[client_id]',
         secret: '[client_key]'
    },
    autoplay: true,
	map: {
		zoom: 5,
		size: {
			width: 500,
			height: 300
		},
		layers: ["flat","radar","admin"]
	},
	animation: {
		from: -3 * 3600,
		duration: 2
	}
});

Interactive Map Example via Leaflet

Looking for interactive maps? AMP easily integrates with popular libraries such as Leaflet:

With the above example we create a map within the aerismap div tag, add an Open Street Maps (OSM) base map with an AMP Radar layer on top:

var map = L.map('aerismap').setView([44.96, -93.27], 5);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.tileLayer('https://maps.aerisapi.com/[client_id]_[client_key]/radar/{z}/{x}/{y}/current.png', {
    subdomains: '1234',
    attribution: '©AerisWeather',
}).addTo(map);

Alternatively, an interactive map using AerisWeather Map layers for the base and overlays too:

var map = L.map('aerismap').setView([44.96, -93.27], 5);
L.tileLayer('https://maps.aerisapi.com/[client_id]_[client_key]/flat,radar,admin/{z}/{x}/{y}/current.png', {
    subdomains: '1234',
    attribution: '©AerisWeather',
}).addTo(map);

AerisWeather's Interactive Map App Example

Need a full featured interactive map with animation and other options? Try our AerisWeather Javascript SDK:

const aeris = new AerisWeather('[client_id]', '[client_secret]');
const utils = aeris.utils;
aeris.apps().then((apps) => {
    const map = new apps.InteractiveMapApp('#app', {
        map: {
            strategy: 'leaflet',
            zoom: 4,
            layers: 'radar'
        },
        panels: {
            layers: {
                buttons: [{
                    id: 'radar',
                    value: 'radar:80',
                    title: 'Radar'
                }]       
            },
            search: {
                position: {
                    translate: {x: -50}
                }
            }
        }
    });
});

Mobile Integration

Looking for integration within mobile applications? Check out AerisWeather Mapping usage within our Android and iOS SDKs:

Get Started Today!

Check out the map builder for quick map creation, review our growing list of available layers or learn more with via our Getting Started section.

Start mapping today with a free developer account!

Last modified: July 30, 2021