MapsGL Search Control

The MapsGLSearchControl component provides a pre-configured search interface specifically designed for MapsGL integration. It combines the base Search compound component with styling and behavior optimized for map-based location search.

Features

• Grouping of results into Cities and Places
• Recent location history tracking
• Geolocation support
• Loading state indicators
• Responsive design
• Customizable result formatting

Usage

Below is an example of how MapsGLSearchControl can be used in an interactive way within a tabbed interface.

import { useEffect, useState, useRef } from 'react';
import { MapsGLSearchControl } from '@xweather/map-ui-sdk/mapsgl/MapsGLSearchControl';
import { Tabs } from '@xweather/map-ui-sdk/components/tabs';
 
export default function App() {
    const [currentTab, setCurrentTab] = useState<string | null>(null);
    const searchInputRef = useRef<HTMLInputElement>(null);
    const [coordinates, setCoordinates] = useState<{ lat: number; lon: number } | null>(null);
 
    useEffect(() => {
        if (currentTab === 'search') {
            searchInputRef.current?.focus();
        }
    }, [currentTab]);
 
    const handleSelectResult = (result) => {
        const { lat, long } = result.loc;
        setCoordinates({ lat, lon: long });
    };
 
    return (
        <Tabs.Provider value={currentTab} onChange={setCurrentTab}>
            <Tabs.List>
                <Tabs.Button value="search">Search Tab</Tabs.Button>
                <Tabs.Button value="settings">Settings Tab</Tabs.Button>
            </Tabs.List>
 
            <Tabs.Content value="search">
                <MapsGLSearchControl
                    className="sm:w-90"
                    inputRef={searchInputRef}
                    onSelectResult={handleSelectResult}
                />
            </Tabs.Content>
            {/* Settings Tab */}
        </Tabs.Provider>
    );
}

Customization

While the component provides a complete, styled interface out of the box, you can customize its appearance through:

• The className prop for container styling
• Custom result formatting via resultFormatter

MapsGL Integration

The control is designed to work seamlessly with the MapsGL SDK:

• Automatically formats location data from the API
• Handles coordinate systems appropriately
• Maintains consistent styling with other MapsGL controls
• Manages loading states during API requests

Related Components

• Search - The base compound component

API Reference

MapsGLSearchControl

The main component that provides a complete search interface for MapsGL.

Search Results

Results are automatically grouped into three categories:

1. Recent - Previously selected locations
2. Cities - Population centers
3. Places - Points of interest and other locations

Each group is only displayed if it contains results.