Interactive Map App Examples

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.

Create a custom map app data source

Create a custom data source and add it to an interactive map app. The following example will setup a vector data source that loads a custom list of facilities and renders them on the map.

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.

Adding opacity controls to InteractiveMapApp

Add raster layer opacity controls to an interactive map application. The following example will display an interactive map application with controls for each raster layer for adjusting its current opacity on the map. This example uses the built-in opacity control supported by layer panel buttons.

Plotting Minutely Precip Data in the Interactive Map App Info Panel

The following example will demonstrate how to access minutely precip data upon clicking and plot that data in the info panel using Chart.js.

Create an Interactive Map App using MapLibre

An InteractiveMapApp can be created using MapLibre by changing the map config strategy to 'maplibre'. Also notice in the config how we moved the legend over to the lower left as well as slightly bumping the timeline up.