Interactive Map Application

The AerisWeather JavaScript SDK includes a fully-functional, feature rich interactive map application, which can serve as your own weather dashboard or be intergrated into your custom weather applications.

Getting started with a map application is easy, especially since it uses an interactive map from the SDK as the mapping component. Alongside the core map component, the map application uses a series of panel components to provide additional functionality to the map application, such as a layers menu panel, place search field, time slider and range selector and an info panel to display data associated with a specific place or map element.

The interactive map application feature is part of the Apps module of the library. Therefore, you’ll need to use the apps() method on your AerisWeather instance in order to begin using any of the map app-related components and features. Read more about working with the Apps module.

Getting Started

Initialize your interactive map application with your DOM target where it will be rendered and desired configuration options using the new apps.InteractiveMapApp(target, opts) constructor. For example, the following will render a map application in the DOM target with id ia-map using the Leaflet mapping library initialized at zoom level 4 with radar and satellite layers and layer toggle controls for radar, satellite and alerts:

aeris.apps().then((apps) => {
    const map = new apps.InteractiveMapApp('#ia-map', {
        map: {
             strategy: 'leaflet',
             zoom: 4,
             layers: 'satellite,radar'
        },
        panels: {
            layers: {
                buttons: [{
                    id: 'radar',
                    value: 'radar:80',
                    title: 'Radar'
                },{
                    id: 'satellite',
                    value: 'satellite:75',
                    title: 'Satellite'
                },{
                    id: 'alerts',
                    value: 'alerts',
                    title: 'Alerts'
                }]       
            }
        }
    });
});
Interactive map application using the Leaflet JS mapping library
Interactive map application using the Leaflet JS mapping library

Alternatively, if you’re providing a callback function to the apps() method:

// using callback function
aeris.apps((apps) => {
    const map = new apps.InteractiveMapApp('#ia-map', {
        map: {
             strategy: 'leaflet',
             zoom: 4,
             layers: 'satellite,radar'
        },
        panels: {
            layers: {
                buttons: [{
                    id: 'radar',
                    value: 'radar:80',
                    title: 'Radar'
                },{
                    id: 'satellite',
                    value: 'satellite:75',
                    title: 'Satellite'
                },{
                    id: 'alerts',
                    value: 'alerts',
                    title: 'Alerts'
                }]       
            }
        }
    });
});

Panels

An InteractiveMapApp instance contains a series of panel components to provide the necessary functionality and user interactions for the application. Each panel is highly customizable and can be positioned within your application container as desired.

Layers Panel

The Layers panel allows you to configure a series of layer options that can be toggled on and off by the user at runtime and is fully configurable. The Layers panel offers many other features, such as creating a series of filters associated with a single layer, like storm reports, or grouping similar layers, like satellite.

Layers panel component of the interactive map application
Layers panel component of the interactive map application

Refer to the Layers Panel documentation for additional configuration and usage information.

Timeline Panel

The Timeline panel displays the map timeline’s current time position within the timeline’s time range. It also provides timeline controls, such as toggling playback of the map’s animation or showing data for the current time, and a timeline slider control. The timeline slider control gives you and your users the ability to view map data for any time within the timeline’s current range and allows them to change the time range based on configuration options you allow.

Timeline panel component of the interactive map application
Timeline panel component of the interactive map application

Refer to the Timeline Panel documentation for additional configuration and usage information.

Info Panel

The Info panel allows you to display fully-customizable views and content as needed. This panel is typically used to display views relevant to the data associated with a selected marker or polygon on the map, but can also be used to display information for a specific coordinate when the user clicks on the map.

By default, an interactive map application displays a basic weather view in the Info panel when a user clicks anywhere on the map. This functionality can be extended to handle marker and/or polygon selections in your own applications. A series of basic weather views are included already, but the Info panel component is flexible and highly customizable to support your own custom views and content.

Info panel component of the interactive map application
Info panel component of the interactive map application

Refer to the Info Panel documentation for additional configuration and usage information.

Place Search Panel

The Place Search panel provides users a method for searching for any location from the Aeris Weather API and showing that location on the interactive map. This feature also allows you to display local weather information for the location that the user selects from the search results.

Search panel component of the interactive map application
Search panel component of the interactive map application

Refer to the Search Panel documentation for additional configuration and usage information.

Legends Panel

The Legends panel is responsible for displaying and managing a LegendView instance by adding and removing legends when layers are added and/or removed from the map. By default, this panel is collapsed and can be expanded and collapsed at runtime by the user.

Legend panel component of the interactive map application
Legend panel component of the interactive map application

Refer to the Legends Panel documentation for additional configuration and usage information.

Last modified: May 10, 2019