Mapbox, react and pin locations

Pages
1

Hello hitchhiker community,
we are developing a new project in react and, as per the guide page, we are using Mapbox as the map for the store locator. We wanted to ask: is it possible for Mapbox to have location pins on the map before the search so that all the stores on the territory are visible? With previous projects, not in react, we had implemented them, but we don’t know if it is possible with this mode.
Thank you

2

Hey @Erica_Benedettelli,

You can do a useLayoutEffect() like this.

 const searchActions = useSearchActions();

  React.useLayoutEffect(() => {
    searchActions.setVertical('yourVerticalKey');
    searchActions.executeVerticalQuery();
  });

If you are using pages architecture, please follow this doc.

Rakesh

3

Hi @Rakesh_Keerthi, thank you very much for the suggestion.
We implemented it and actually now we see the stores before the search, but still geolocated, so limited to our search territory.
The idea was to show all the stores in the nation - in this case Italy - so that we would see the actual presence in the territory (we are talking about roughly 500 entities). Would this be possible?

4

@Rakesh_Keerthi could you have a look at Erica’s reply please?

5

Hey @Reya_Bakshi - apologies for the delayed reply, didn’t have a tab on this post.

Hey @Erica_Benedettelli ,

I don’t think you will be able to show 500 entities, as the call sends back 20 entities by default and maximum 50 (if set in the request like below) in response.

searchActions.setVerticalLimit(1-50);

And coming to the setting region, can you please try something like this?

If using searchActions as dependency. try the below.

const user_query = useSearchState((state) => state.query.input) || undefined;
const searchActions = useSearchActions();

React.useLayoutEffect(() => {
  if (!user_query) {
    /* If there is no existing query(onload), we set the query to "Italy" 
    and the vertical limit to 45 (within the range of 1 to 50). */
    searchActions.setQuery("Italy");
    searchActions.setVerticalLimit(45);
  } 
  searchActions.setVertical("yourVerticalKey");
  searchActions.executeVerticalQuery(); // As said above, we can return max of 50 entities as defined in verticalLimit.
}, [searchActions]);

if not

const searchActions = useSearchActions(); 
React.useLayoutEffect(() => {
  /* If there is no existing query(onload), we set the query to "Italy" 
  and the vertical limit to 45 (within the range of 1 to 50). */
  searchActions.setQuery("Italy");
  searchActions.setVerticalLimit(45);
  searchActions.setVertical("yourVerticalKey");
  searchActions.executeVerticalQuery(); // As said above, we can return max of 50 entities as defined in verticalLimit.
});

Further, you can use the pagination component to loop through the results.