connectors connectGeoSearch

Description

The GeoSearch connector provides the logic to build a widget that will display the results on a map. It also provides a way to search for results based on their position. The connector provides functions to manage the search experience (search on map interaction or control the interaction for example).

Requirements

Note that the GeoSearch connector uses the geosearch capabilities of Algolia. Your hits must have a _geoloc attribute in order to be passed to the rendering function.

Currently, the feature is not compatible with multiple values in the _geoloc attribute.

Usage

const search= instantsearch(/* parameters */);

const makeGeoSearch= instantsearch.connectors.connectGeoSearch(
  function renderFn(
      renderOpts: GeoSearchRenderingOptions,
      isFirstRendering: boolean) {
    // render the custom GeoSearch widget
  }
);

const  customGeoSearch = makeGeoSearch(instanceOpts: CustomGeoSearchWidgetOptions);
search.addWidget(customGeoSearch);

Connector options

GeoSearchRenderingOptions

• itemsArray<Object>

  The matched hits from Algolia API.

• positionLatLng

  The current position of the search.

• currentRefinementBounds

  The current bounding box of the search.

• refine(Bounds) => undefined

  Sets a bounding box to filter the results from the given map bounds.

• clearMapRefinement() => undefined

  Reset the current bounding box refinement.

• isRefinedWithMap() => boolean

  Return true if the current refinement is set with the map bounds.

• toggleRefineOnMapMove() => undefined

  Toggle the fact that the user is able to refine on map move.

• isRefineOnMapMove() => boolean

  Return true if the user is able to refine on map move.

• setMapMoveSinceLastRefine() => undefined

  Set the fact that the map has moved since the last refinement, should be call on each map move. The call to the function triggers a new rendering only when the value change.

• hasMapMoveSinceLastRefine() => boolean

  Return true if the map has move since the last refinement.

• widgetParamsObject

  All original CustomGeoSearchWidgetOptions forwarded to the renderFn.

• position[LatLng]

  The current position of the search.

LatLng

• latnumber

  The latitude in degrees.

• lngnumber

  The longitude in degrees.

Bounds

• northEastLatLng

  The top right corner of the map view.

• southWestLatLng

  The bottom left corner of the map view.

CustomGeoSearchWidgetOptions

• enableRefineOnMapMove[boolean]
  Default value: true

  If true, refine will be triggered as you move the map.

• transformItems[(Array<object>) => Array<object>]

  Function to transform the items passed to the templates.

Example

// This example use Leaflet for the rendering, be sure to have the library correctly setup
// before trying the demo. You can find more details in their documentation (link below).
// We choose Leaflet for the example but you can use any libraries that you want.
// See: http://leafletjs.com/examples/quick-start

let map = null;
let markers = [];

// custom `renderFn` to render the custom GeoSearch widget
function renderFn(GeoSearchRenderingOptions, isFirstRendering) {
  const { items, widgetParams } = GeoSearchRenderingOptions;

  if (isFirstRendering) {
    map = L.map(widgetParams.container);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution:
        '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(map);
  }

  markers.forEach(marker => marker.remove());

  markers = items.map(({ _geoloc }) =>
    L.marker([_geoloc.lat, _geoloc.lng]).addTo(map)
  );

  if (markers.length) {
    map.fitBounds(L.featureGroup(markers).getBounds());
  }
}

// connect `renderFn` to GeoSearch logic
const customGeoSearch = instantsearch.connectors.connectGeoSearch(renderFn);

// mount widget on the page
search.addWidget(
  customGeoSearch({
    container: document.getElementById('custom-geo-search'),
  })
);

Can't find what you are looking for? Open an issue, we'll get back to you.