Display your assets on Woosmap Map using Marker Clustering

Guides
2

The above demo displays assets from a static GeoJSON file.
Of course, you can also use the ones hosted in your Woosmap project.

You’ll first need to retrieve all assets before passing them to Supercluster library.

Since the Woosmap Search API limits the number of assets fetched at one time, you need to call the API repeatedly to get all your stores. Each search request is limited to 300 assets as a maximum.

Here is a sample which implements recursive Promises in Javascript. Calls to Woosmap Search are done through Woosmap Map JS class woosmap.map.StoresService.

const storesService = new woosmap.map.StoresService();

const getAllStores = async () => {
    const allStores = [];
    const query = { storesByPage: 300 };
    
    const getStores = async (storePage) => {
      if (storePage) {
        query.page = storePage;
      }
      return storesService
        .search(query)
        .then((response) => {
          allStores.push(...response.features);
          if (query.page === response.pagination.pageCount) {
            return allStores;
          }
          return getStores(response.pagination.page + 1);
        })
        .catch((err) => {
          console.error(err);
          throw new Error("Error getting all stores");
        });
    };
    return getStores();
  };

  getAllStores().then((stores) => {
    index = new Supercluster({/*options*/}).load(stores);
  });

Details of the above code:

  1. Define the asynchronous function getAllStores() to fetch all the assets from Woosmap
  2. Define the asynchronous function, getStores(), to run the actual query on your project. It takes storePage as a parameter. This is the function that will be called recursively.
  3. Set the starting page number for the query.page based on the storePage and query.storesByPage to the max allowed number 300.
  4. Call the StoresService search function. This function returns a Javascript Promise.
  5. Add the fetched assets features to the allStores list.
  6. When all assets have been fetched (i.e storePage is equal to response.pagination.pageCount) resolve the Promise with allStores list as the value.
  7. As long as there are more assets to fetch, recursively call the getStores() function with the storePage as the input parameter.

The features returned from Woosmap Search API follow the GeoJSON standard so you can pass directly the results of getAllStores as a parameter to SuperCluster.load().

See full demo here: