Skip to main content
The GeoSearch connector provides the logic to build a custom widget that displays results on a map and provides a way to search for results based on their position.
The GeoSearch connector uses the geosearch capabilities of Algolia. Your hits must have a _geoloc attribute to be displayed on the map.Currently, the feature is not compatible with multiple values in the _geoloc attribute.

​
Usage

import { connectGeoSearch } from 'instantsearch.js/es/connectors';

const customGeoSearch = connectGeoSearch(
  (renderOptions, isFirstRender) => {
    const { 
      items, 
      refine, 
      clearMapRefinement, 
      isRefinedWithMap, 
      toggleRefineOnMapMove,
      isRefineOnMapMove,
      widgetParams 
    } = renderOptions;
    const { container } = widgetParams;
    
    if (isFirstRender) {
      // Initialize your map here
      // This example is simplified - you would typically use a mapping library
      container.innerHTML = `
        <div id="map" style="height: 400px;"></div>
        <label>
          <input type="checkbox" id="refine-toggle" ${isRefineOnMapMove() ? 'checked' : ''} />
          Search on map move
        </label>
        <button id="clear">Clear map refinement</button>
      `;
      
      container.querySelector('#refine-toggle').addEventListener('change', () => {
        toggleRefineOnMapMove();
      });
      
      container.querySelector('#clear').addEventListener('click', () => {
        clearMapRefinement();
      });
    }
    
    // Update map markers with items
    console.log(`${items.length} results on the map`);
  }
);

search.addWidgets([
  customGeoSearch({
    container: document.querySelector('#geo-search'),
  }),
]);

​
Connector Options

​
enableRefineOnMapMove
boolean
default:"true"
If true, refine will be triggered as you move the map.
​
transformItems
(items: object[]) => object[]
Function to transform the items passed to the templates.

​
Render Options

​
items
Array<GeoHit>
The matched hits from Algolia API that have a _geoloc attribute.
​
position
{ lat: number, lng: number }
The current position of the search.
​
currentRefinement
{ northEast: { lat: number, lng: number }, southWest: { lat: number, lng: number } }
The current bounding box of the search.
​
refine
(bounds: { northEast: { lat: number, lng: number }, southWest: { lat: number, lng: number } }) => void
Sets a bounding box to filter the results from the given map bounds.
​
clearMapRefinement
() => void
Resets the current bounding box refinement.
​
isRefinedWithMap
() => boolean
Returns true if the current refinement is set with the map bounds.
​
toggleRefineOnMapMove
() => void
Toggles the fact that the user is able to refine on map move.
​
isRefineOnMapMove
() => boolean
Returns true if the user is able to refine on map move.
​
setMapMoveSinceLastRefine
() => void
Sets the fact that the map has moved since the last refinement. Should be called on each map move. The call triggers a new rendering only when the value changes.
​
hasMapMoveSinceLastRefine
() => boolean
Returns true if the map has moved since the last refinement.
​
sendEvent
function
Sends an event to the Insights middleware.
​
widgetParams
object
The options passed to the connector.

Build docs developers (and LLMs) love

Get started for freeTalk to us