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
Example place search panel

Configuration

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
field.data object Configuration for requesting and formatting data based on search results.  
field.data.request Function A function that returns a Promise that performs the necessary search request using the passed query argument from the field’s current value.  
field.data.formatter 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.  
position.pin 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 (!result.place) return null;

                const parts = [ucwords(result.place.name)];
                if (result.place.country == 'US') {
                    parts.push(result.place.state.toUpperCase());
                } else {
                    parts.push(ucwords(result.place.countryFull));
                }

                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: August 08, 2019