Skip to main content
This is the React InstantSearch v7 documentation. If you’re upgrading from v6, see the upgrade guide. If you were using React InstantSearch Hooks, this v7 documentation applies—just check for necessary changes. To continue using v6, you can find the archived documentation.

​
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”.
The geoSearch hook doesn’t let you search around a central point or within polygons. If you want this, you need to build your own UI on top of the Algolia API.
View demo

​
Example: React Leaflet

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>
  );
}
⌘I