Interactive Map App

The following examples demonstrate setting up and using the InteractiveMapApp component of the Javascript SDK.

Create an interactive map app

Render a basic interactive map application. The following example will display an interactive map application centered on the United States with radar, satellite and alerts and layer options. The radar layer is displayed initially by default.

Customize the timeline panel range

Render an interactive map application with a custom range for the timeline panel’s range slider options. The following example will display an interactive map application whose timeline panel range options are configured with a min/max of -60 hours to now and tick rendered every 6 hours.

Customize app info panel content

Create a custom info panel content view associated with a custom map content source. The following example will setup a vector content source that loads airport observations and renders their latest flight rules as point markers on an interactive map. It then configures a custom airport content view to display within the application info panel when an airport’s marker is selected.

Add map layer filters

Render an interactive map application with the ability to filter a vector layer’s visible data. The following example will display an interactive map application centered on the United States with radar, storm reports and storm cells layer options. Storm reports and storm cells toggle controls are configured to support filters, either toggling between filters (storm cells) or selecting one or more filter (storm reports).

Adding alert categories as map layer options

The following example will display an interactive map application centered on the United States with radar, satellite and alert layer options. Alerts can be selected to show all alerts or specific categories of alerts only.

Create an interactive map app using Google Maps

An InteractiveMapApp can be created using Google Maps by changing the map config strategy to 'google' and set the accessToken to your Google key. Also notice in the config how we moved the legend over to the lower left as well as slightly bumping the timeline up.

Accessing marker data to display in popups

The following example will demonstrate how to access marker data upon selection as well as how to show that data in a popup.

Adding custom buttons in the layers panel

Add custom buttons to an interactive map application. The following example will display an interactive map application with a custom base layer toggle control to switch between the default Leaflet map style and a dark theme from Aeris Maps layers.

Last modified: March 09, 2020