Interactive Map Examples

Display an interactive map

Render a basic interactive map. The following example will display an interactive map centered on the United States with alerts and radar weather layers. The animation timeline range is also set to start six hours in the past and end at the current time.

Use an existing map

Setup an interactive map using an existing third-party map instance. The following example will use an existing Mapbox map when setting up an interactive map instance.

Animate an interactive map

Animate an interactive map. The following example will enabling toggling the map animation with radar and stormreports layers for the past 6 hours.

Customize a point data layer

Customize a stormreports point layer with just snow-related reports and custom marker styling using shields. The following example will render snow report totals across the Great Lakes region for the past 24 hours using custom marker styling.

Create a custom map content source

Create a custom map content source and add it to an interactive map. 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.

Creating a custom GeoJSON map content source

Create custom GeoJSON content sources using local and remote data and add it to an interactive map. The following example will add two separate GeoJSON sources to the map – one using local GeoJSON object and the other loading GeoJSON data from a remote source.

Create an interactive map using Google Maps

An InteractiveMap can be created using Google Maps by changing the map config strategy to 'google' and set the accessToken to your Google key.

Using app panels with interactive map

Render a basic interactive map with various panels and controls used by InteractiveMapApp and provided by the Apps module. The following example will display an interactive map with the timeline, legend, place search and local weather info panels similar to InteractiveMapApp but without the auto-managed map app container.

Handling Mapbox style changes

Render a basic interactive map using Mapbox with the ability to change the base map style.