Info Panel

An interactive map application contains an info panel component, which is used to display additional content related to a specific geographical coordinate/location or map element, such as a selected marker or polygon. An info panel contains built-in section views for basic weather information like observations and forecasts, but is fully extensible so you can provide your own views and content as needed.

Example info panel

If you're creating an InfoPanel instance directly, such as for use outside of InteractiveMapApp, use the following code to create an info panel and link it with your InteractiveMap instance:

const target = document.getElementById('map-search');
 
// custom configuration options for the panel
const panelConfig = {};
const panel = new PlaceSearchPanel(panelConfig);
 
// `map` is an instance of InteractiveMap
// update the map center when a location is selected from the results
panel.on('select', (e) => {
    // get the selected location's coordinate info from the event data
    const { result: { loc }} = e.data || {};
    if (loc) {
        const { lat, long: lon } = loc;
        const coord = { lat, lon };
        map.setView(coord, 8);
    }
});
 
// add the panel to the DOM
panel.addTo(target);
 
// show the panel using a configured view (e.g. "localweather") when the map is clicked
map.on('click', (e) => {
    const { coord: { lat, lon }} = e.data || {};
    // 'localweather' is a content view we've configured on our InfoPanel
    panel.showContent('localweather', 'Local Weather').load({
        p: `${lat},${lon}`
    });
});

Refer to the Using Content Views section below and our custom info panel content example for more information about setting up your info panel's content views.

If you're using an instance of InteractiveMapApp, you don't have to use the above code since the info panel is already instantiated and managed for you.

Configuration

The following options are supported when configuring your InfoPanel instance:

Content View Configuration

Content views contain one or more section views and are used when displaying content within an info panel. The following options define the configuration for a content view:

View Section Configuration

View sections represent data for a single data type and are used within content views when rendering an info panel's content. The following options define the configuration for a section view:

Default Configuration

The following is the default configuration object for a InfoPanel instance:

{
    views: undefined,
    sections: undefined
}

Also review the default configuration for an InteractiveMapApp instance that is applied to its internal info panel.

Built-in View Sections

A series of section views are already setup and configured for you for basic weather information, like observations, advisories, forecasts and threats. The following section views can be used within your own content view configurations:

As an example, the following is the configuration for the built-in place section view:

{
    data: (data) => {
        if (!data) return null;
 
        data = data.places || data;
        return data.place;
    },
    renderer: (data) => {
        return (`
            <div class="place">
                <p class="name">${data.name}${!isEmpty(data.state) ? `, ${data.state}` : ''}, ${data.country}</p>
            </div>
        `);
    }
}

In the above place section view, the data property receives the full data set from the parent content view and returns just the data required for the view. The renderer function then receives this filtered data and outputs the final HTML snippet for this section view within the context of the parent content view.

Handling Units

Oftentimes when outputting numerical data values you'll want to display them in terms of a particular unit of measurement, such as temperature or pressure. You can handle this in your view's renderer function by accessing the units property that's automatically added to the data object provided to your renderer. This units property will either be a value of imperial or metric:

{
    renderer: (data) => {
        const metric = data.units === 'metric';
        return (`
            <div class="temp">
                The current temperature is ${metric ? `${data.tempC}&deg;F` : `${data.tempF}&deg;C`}.
            </div>
        `);
    }
}

You can then output the correct value that corresponds to the current units value associated with the parent info panel instance. When the current units value changes from the info panel, then your views will automatically be re-rendered to allow you to update the data values based on the active units value.

Using Content Views

Since an info panel's content view consists of one or more section views, you can piece together your content views using the above built-in section views, your custom section views, or a combination of both. Simply provide your custom section and content view configurations within the sections and views properties of your info panel's main configuration object.

An InteractiveMapApp instance also configures a default local weather content view that can be used for displaying weather information for a single location or coordinate.

Configuring a Content View

The following is the views configuration containing the general local weather content view that's built into InteractiveMapApp for displaying local weather information for a particular location:

{
    views: {
        localweather: {
            request: () => {
                // main batch request instance
                const request = aeris.api();
 
                // add a request for all data we need for each section in the content view
                const forecastFields = `timestamp,dateTimeISO,tempF,tempC,icon,weatherPrimary,windSpeedMPH,windSpeedKPH,windSpeedMinMPH,windSpeedMinKPH,
                    windSpeedMaxMPH,windSpeedMaxKPH,windGustMPH,windGustKPH,snowIN,snowCM,precipIN,precipMM`.split(',').map((key) => `periods.${key}`);
                request.addRequest(aeris.api().endpoint('forecasts').fields(forecastFields.join(',')).filter('3hr').limit(7));
 
                request.addRequest(aeris.api().endpoint('places'));
                request.addRequest(aeris.api().endpoint('threats').radius('50mi'));
                request.addRequest(aeris.api().endpoint('alerts').fields('details.type,details.name,timestamps'));
                request.addRequest(aeris.api().endpoint('phrases/summary'));
                request.addRequest(aeris.api().endpoint('observations'));
                request.addRequest(aeris.api().endpoint('convective/outlook').action(ApiAction.CONTAINS));
                request.addRequest(aeris.api().endpoint('lightning/summary').action(ApiAction.CLOSEST).radius('60mi').limit(100));
 
                return request;
            },
            views: [{
                renderer: 'place'
            },{
                title: 'Active Threats',
                renderer: 'threats'
            },{
                title: 'Active Alerts',
                renderer: 'alerts'
            },{
                title: 'Impacts',
                renderer: 'hazards'
            },{
                title: 'Observations',
                renderer: 'obs'
            },{
                title: 'Outlook',
                renderer: 'outlook'
            },{
                title: 'Short-Term Forecast',
                renderer: 'forecast'
            }]
        }
    }
}

As demonstrated in the above example, when configuring a content view you must provide an array of section views to display and either the request to use for the view's data or the static data to use when rendering the view. This local weather content view uses all of the built-in section views that come with the SDK, so the renderer property values are just the section view keys documented above.

Refer to our examples section for more examples of creating custom section and content views for your info panel.

Showing Info Panel Content

Once you've configured your info panel's section and content views, you can show your map application's info panel using one of the configured content views easily using the showInfo() or showInfoAtCoord() method on your interactive map app instance.

At minimum, both methods require the content view key to render when showing the info panel. You can also provide a title to display in the title bar of the info panel and/or the static data to use when rendering the content view.

For instance, to show the built-in local weather content view for the coordinate where the map is clicked with a title of “Local Weather”:

app.map.on('click', (e) => {
    // the coordinate where the map was clicked is stored in the event
    // data, 'e.data.coord'
    app.showInfoAtCoord(e.data.coord, 'localweather', 'Local Weather');
});

The data will automatically be requested using the specified coordinate and the request configured for the content view.

If you're displaying content for a specific geographical coordinate, use showInfoAtCoord(). This method will automatically perform the configured request using the coordinate provided when called. However, if your content view needs to pass request parameters other than just the coordinate when loading its required data, use showInfo(). When using showInfo(), the associated info panel instance is returned and you are required to call load() with any request parameters your content view's request requires.

For example, if we've added a custom airports vector source to the map to display the current flight rules at major airports, we'd want to display additional information for an airport when clicking its marker on the map. We would then configure our info panel with a custom airport content view to use when an airport is selected. Since this related to airports and not a coordinate, we need to pass the airport code to the content view's request using showInfo() and then calling load():

app.map.on('marker:click', (e) => {
    const data = e.data.data || {};
 
    // check the source key that triggered the click event to make sure
    // we're only showing the info panel for airport markers
    const source = data.awxjs_source;
    if (source === 'airports') {
        const id = data.id;
        const place = data.place || {};
        const name = aeris.utils.strings.toName(place.name);
        app.showInfo('airport', `${id} - ${name}`).load({ p: id });
    }
});

In this example, the info panel will be shown and rendered immediately with the airport ICAO code and name displayed in the title bar. Instead of the airport content view being rendered at first, a loading indicator is displayed while the request for data is being made via our call to load(). Once data has loaded, the airport content view is rendered with the data and the info panel updates its content.

Refer to our collection of examples for complete demonstrations of creating and working with custom content views.