Animation

You can easily include an instance of your preferred Aeris Maps using our open-source Visualizer class for Javascript that allows you to animate across a time range, add title bars and custom branding overlays. Simply download the Javascript files or link to the aerismaps-visualizer.min.js file from our CDN and include them on your page:

<script src="//cdn.aerisapi.com/js/aerismaps-visualizer.min.js"></script>

Once you have the aerismaps-visualizer.min.js file linked in your project, create an instance of AerisMaps.Visualizer with your preferred configuration options and start playback. Animations are supported for any number of layer combinations and time periods whether in the past or future. Refer to the Github page for the project for complete usage and configuration details and documentation.

For example, you could include a radar and satellite animation for the past 2 hours for Minneapolis with a duration of 2 seconds:

var animation = new AerisMaps.Visualizer("#map", {
	loc: "minneapolis,mn",
	keys: keys,
	map: {
		zoom: 6,
		size: {
			width: 500,
			height: 300
		},
		layers: ["flat","satellite","radar","admin-cities"]
	},
	animation: {
		from: -2 * 3600,
		duration: 2
	},
    overlays: {
        title: "Radar / Satellite",
        branding: {
            img: "https://www.aerisweather.com/img/logos/watermark-small.png"
        }
    }
});

Click map to play animation

 

 

The following animation example shows road conditions around the Houston metro area for the past 4 hours:

var animation = new AerisMaps.Visualizer("#map", {
	loc: "houston,tx",
	keys: keys,
	map: {
		zoom: 7,
		size: {
			width: 500,
			height: 300
		},
		format: "png",
		layers: ["flat-dk","road-conditions","counties-dk","admin-dk"]
	},
	animation: {
		from: -4 * 3600,
		duration: 3,
		intervals: 15
	},
    overlays: {
        title: "Road Conditions",
        branding: {
            img: "https://www.aerisweather.com/img/logos/watermark-small.png"
        }
    }
});

Click map to play animation

 

 

You can also create future animations using forecast model data, such as the following showing forecast temperatures for Seattle for the next 12 hours with an optional map title:

var animation = new AerisMaps.Visualizer("#map",{
	loc: "seattle,wa",
	keys: keys,
	map: {
		zoom: 7,
		size: {
			width: 500,
			height: 300
		},
		layers: ["flat","ftemps-hrrr","water","counties","admin"]
	},
	animation: {
		from: 0 * 3600,
		to: 12 * 3600,
		intervals: 10,
		duration: 2
	},
	overlays: {
		title: "Forecast Temps",
        branding: {
            img: "https://www.aerisweather.com/img/logos/watermark-small.png"
        }
	}
});

Click map to play animation