Place Search Panel

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 (opens in a new tab) endpoint of the Xweather Weather API.

Example place search panel

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:

accountAccountAccount instance to use when performing the place search requests.
fieldobjectConfiguration options for the search field component.
field.placeholderstringPlaceholder text for the input field.Search for place...
field.autocompletebooleanA Boolean indicating whether a search request should be triggered whenever the input field's value changes.true
field.autoselectbooleanA Boolean indicating whether the first search result should be automatically selected, allowing the user to use the Enter key to select it.true
field.dataobjectConfiguration for requesting and formatting data based on search results. function that returns a Promise that performs the necessary search request using the passed query argument from the field's current value. function that is used to format each result returned by the search request before rendering it in the field's search results.
classNamestringA CSS class name to add to the panel, which can be used for additional style customizations.
positionobjectOptions to configure the position of the panel within its parent container.
position.pinstringThe position to pin the panel to relative to its parent container. Supports topleft, top, topright, left, center, right, bottomleft, bottom, or bottomleft.
position.translateIPointAmount 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.