Work with Stores

Detailed guide on using the StoresService to search and autocomplete on stores.

Overview
Getting started
Stores Search

Overview

The StoresService class is a part of the Woosmap Map JavaScript API that allows you to interact with store data. It provides methods for searching stores, autocompleting store names and compute bounds for a stores search request.

Following operations from Stores are supported:

Stores Search lets you search for stores using query.
Stores Autocomplete provides details of an autocompleted address.
Stores Bounds provides bounds for stores search.
Store By ID lets you retrieve a store by its unique identifier.

Review the example below to see how to search for stores and display results using the Woosmap Map JS:

Getting started

Before using the Stores Search service in the Map JavaScript API, it is required to have a secure and valid Woosmap API key and enable the Stores Search API for it.

Next, you must load the Map JS API library by including a script tag in your HTML page as follows:

        <script async
        src="https://sdk.woosmap.com/map/map.js?key=YOUR_API_KEY&callback=initMap">
</script>

Stores Search

Request Stores Search

The woosmap.map.stores.StoresSearchRequest is an object literal used when invoking the StoresService.search() method from the Woosmap Map JS API. This object sends a request to the Search endpoint of Woosmap Stores API.

Here are the fields included in the StoresSearchRequest object:

        {
    latLng?: woosmap.map.LatLng | woosmap.map.LatLngLiteral,
    page?: number,
    polyline?: string,
    query?: string,
    radius?: number,
    storesByPage?: number,
    zone?: boolean
}

latLng (optional): To bias the results around a specific latitude and longitude.
page (optional): Page number when accessing paginated stores.
polyline (optional): Find stores nearby an encoded polyline and inside a defined radius.
query (optional): Search query combining one or more search clauses. Each search clause is made up of three parts structured as field : operator value. Example: query=name:'My cool store'|type:'click_and_collect'.
radius (optional): To bias the results within a given circular area. Unit in meters.
storesByPage (optional): If your request returns a high number of stores, the result will be paginated. You can then request stores by page using page and storesByPage parameters (Default is 100, max is 300).
zone (optional): Whether to search for stores intersecting a zone.

Below is a sample StoresSearchRequest to retrieves a maximum of 15 stores within a 50km radius of the specified location:

        const storesSearchRequest = {
    latLng: {lat: 43.610, lng: 3.876},
    radius: 50000,
    storesByPage: 15,
};

The search() method from woosmap.map.StoresService is asynchronous and returns a Promise object. This Promise resolves to a StoresSearchResponse object upon successful operation.

        const storesService = new woosmap.map.StoresService();
storesService
    .search(storesSearchRequest)
    .then((response) => {
        console.log(response.features);
    })
    .catch((error) => {
        console.log(error);
    })
    .finally(() => {
        console.log("done");
    });

The StoresSearchResponse is a GeoJSON of type “FeatureCollection”. For more information on the stores format, see the StoresSearchResponse on the reference.

Display Stores Search Results

To display the stores returned by the search() method, you can add Markers or use the Map Data Layer. Data layer has the advantage of being able to display GeoJSON source. Here is an example of how to display stores using this layer:

        const myMap = new woosmap.map.Map(document.getElementById("map"));

myMap.data.setStyle((feature) => {
    return { icon: "https://images.woosmap.com/dot-marker.png" };
});

const storesService = new woosmap.map.StoresService();
function handleStoresSearch(latlng, originalLatLng) {
  const searchRequest = {
    storesByPage: 15,
    latLng: latlng
  };
  storesService
    .search(searchRequest)
    .then(displayStoresSearchResults)
    .catch(handleError);
}

function displayStoresSearchResults(stores) {
    myMap.data.addGeoJson(stores);
}

‹ Localities Geocode Distance ›

Was this article helpful?

Have more questions? Submit a request