Place Search Panel

An interactive map application contains a place search panel component, which displays a search field allowing the user to pan and zoom the map to a specific location. The search requests use your Aeris account to perform searches against the places endpoint of the Aeris Weather API.

Example place search panel

If you’re creating a PlaceSearchPanel instance directly, such as for use outside of InteractiveMapApp, use the following code to create a search control and link it with your InteractiveMap instance:

const target = document.getElementById('map-search');

// account info is needed to request place information from the API
const account = aeris.account();

// custom configuration options for the panel
const panelConfig = {
    account: account
const panel = new PlaceSearchPanel(panelConfig);

// update the map center when a location is selected from the results
// `map` is an instance of InteractiveMap
panel.on('select', (e) => {
    // get the selected location's coordinate info from the event data
    const { result: { loc }} = || {};
    if (loc) {
        const { lat, long: lon } = loc;
        const coord = { lat, lon };
        map.setView(coord, 8);

// add the panel to the DOM

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


The following options are supported when configuring your PlaceSearchPanel instance:

Option Type Description Default
account Account Account instance to use when performing the place search requests.
field object Configuration options for the search field component.
field.placeholder string Placeholder text for the input field. Search for place...
field.autocomplete boolean A Boolean indicating whether a search request should be triggered whenever the input field’s value changes. true
field.autoselect boolean A Boolean indicating whether the first search result should be automatically selected, allowing the user to use the Enter key to select it. true object Configuration for requesting and formatting data based on search results. Function A function that returns a Promise that performs the necessary search request using the passed query argument from the field’s current value. Function A function that is used to format each result returned by the search request before rendering it in the field’s search results.
className string A CSS class name to add to the panel, which can be used for additional style customizations.
position object Options to configure the position of the panel within its parent container. string The position to pin the panel to relative to its parent container. Supports topleft, top, topright, left, center, right, bottomleft, bottom, or bottomleft.
position.translate IPoint Amount to translate the panel in the x and y axis relative to its pinned position. { x: 0, y: 0 }

Default Configuration

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

    field: {
        placeholder: 'Search for place...',
        data: {
            formatter: (result) => {
                if (!result) return null;
                if (! return null;

                const parts = [ucwords(];
                if ( == 'US') {
                } else {

                let val = parts.join(', ');
                if (result.type && result.type == 'airport') {
                    val += ' (Airport)';

                return val;

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

Last modified: November 16, 2020