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

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 }} = 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);

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.

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.

Legend Panel Map Modules