> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# useGeoSearch

> React Hook for location-based search inside a bounding box on a map.

<Note>
  This is the **React InstantSearch v7** documentation.
  If you're upgrading from v6, see the [upgrade guide](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-v6-to-react-instantsearch-v7).
  If you were using React InstantSearch Hooks,
  this v7 documentation applies—just check for [necessary changes](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-hooks-to-react-instantsearch-v7).
  To continue using v6, you can find the [archived documentation](https://algolia.com/old-docs/deprecated/instantsearch/react/v6/api-reference/instantsearch/).
</Note>

## About this Hook

The `geoSearch` hook lets you search for results based on their position within a specified area (a bounding box).
It also provides features such as "search on map interactions".

<Note>
  The `geoSearch` hook doesn't let you [search around a central point](/doc/guides/managing-results/refine-results/geolocation/how-to/filter-results-around-a-location)
  or [within polygons](/doc/guides/managing-results/refine-results/geolocation/how-to/filter-results-inside-a-polygonal-area).
  If you want this, you need to build your own UI on top of the Algolia API.
</Note>

<Card title="Open CodeSandbox" icon="codesandbox" href="https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/react-instantsearch/geo-search?file=/src/Airports.tsx">
  Run and edit the useGeoSearch example in CodeSandbox.
</Card>

## Example: React Leaflet

<CodeGroup>
  ```jsx JavaScript theme={"system"}
  import { useGeoSearch } from "react-instantsearch";
  import {
    MapContainer,
    Marker,
    Popup,
    TileLayer,
    useMapEvents,
  } from "react-leaflet";

  export function CustomGeoSearch(props) {
    const { items, refine } = useGeoSearch(props);

    function onViewChange({ target }) {
      refine({
        northEast: target.getBounds().getNorthEast(),
        southWest: target.getBounds().getSouthWest(),
      });
    }

    useMapEvents({ zoomend: onViewChange, dragend: onViewChange });

    return (
      <MapContainer
        center={[48.85, 2.35]}
        zoom={10}
        minZoom={4}
        scrollWheelZoom={true}
      >
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        {items.map((item) => (
          <Marker key={item.objectID} position={item._geoloc}>
            <Popup>
              <strong>{item.name}</strong>
              <br />
              {item.city}, {item.country}
            </Popup>
          </Marker>
        ))}
      </MapContainer>
    );
  }
  ```

  ```tsx TypeScript theme={"system"}
  import { useGeoSearch, UseGeoSearchProps } from "react-instantsearch";
  import { LeafletEvent } from "leaflet";
  import {
    MapContainer,
    Marker,
    Popup,
    TileLayer,
    useMapEvents,
  } from "react-leaflet";

  type Airport = {
    airport_id: string;
    city: string;
    country: string;
    name: string;
    nb_airline_liaisons: number;
  };

  export function CustomGeoSearch(props: UseGeoSearchProps) {
    const { items, refine } = useGeoSearch<Airport>(props);

    function onViewChange({ target }: LeafletEvent) {
      refine({
        northEast: target.getBounds().getNorthEast(),
        southWest: target.getBounds().getSouthWest(),
      });
    }

    useMapEvents({ zoomend: onViewChange, dragend: onViewChange });

    return (
      <MapContainer
        center={[48.85, 2.35]}
        zoom={10}
        minZoom={4}
        scrollWheelZoom={true}
      >
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        {items.map((item) => (
          <Marker key={item.objectID} position={item._geoloc}>
            <Popup>
              <strong>{item.name}</strong>
              <br />
              {item.city}, {item.country}
            </Popup>
          </Marker>
        ))}
      </MapContainer>
    );
  }
  ```
</CodeGroup>