Weather Maps

The AerisWeather JavaScript SDK provides feature-rich weather maps that you can easily drop into your custom application to display any type of weather data currently offered from the Aeris Maps Platform (AMP) and Aeris Weather API. This weather map is highly configurable and customizable, giving you even more control over how it integrates into your project.

The SDK offers two types of weather maps: using static AMP base maps, or a fully-interactive map using a third-party mapping library such as Leaflet or Mapbox. Using the third-party map library method will provide a higher level of user interaction and customization with the data.

Interactive Map

Getting started with an interactive weather map is quick and easy. Simply follow the Getting Started guide for the JavaScript SDK, and then determine the third-party mapping library and its associated key you wish to use from those we currently support:

Key Library
leaflet Leaflet

Then initialize your interactive weather map with your DOM target where it will be rendered and desired configuration options using the aeris.interactive(target, opts) method. For example, the following will render a weather map in the DOM target with id ia-map using the Leaflet mapping library initialized at zoom level 4 with radar and satellite layers:

aeris.interactive('#ia-map', {
    strategy: 'leaflet',
    zoom: 4,
    layers: 'satellite,radar'
});

You can interact with your weather map after instantiation by either a chained then() block on aeris.interactive() method, which returns a Promise. Or, you can include a regular callback function as the third argument to aeris.interactive(). Each method will return the weather map instance as its only argument:

// using Promises
aeris.interactive('#ia-map', {
    zoom: 4,
    layers: 'satellite,radar'
}).then((map) => {
    // do stuff with the `map` instance...
    map.setCenter({ lat: 47.5, lon: -121.5 });
    map.setZoom(6);
});

// using callback function
aeris.interactive('#ia-map', {
    zoom: 4,
    layers: 'satellite,radar'
}, (map) => {
    // do stuff with the `map` instance...
    map.setCenter({ lat: 47.5, lon: -121.5 });
    map.setZoom(6);
});