You are viewing the technical documentation for Sharetribe. If you are looking for our no-code documentation, see our new help center.

Last updated

Map configurations

This article discusses configuration settings for maps, with which you can customize the appearance and functionality of the maps in your marketplace.

Table of Contents

Configure default locations

You can configure the search field on the landing page to show the user a predefined list of locations from which to search. Enabling this feature can make searching for common locations faster for your users and reduce the need to call the Mapbox Geolocation API.

A screenshot of the search bar in Sharetribe Web Template

This feature is not enabled by default. To enable it, you need to add the locations to the configDefaultLocationSearches.js file.

To disable the first result on the list to search for the user's "Current location", you can change the configuration variable suggestCurrentLocation in the configMaps.js file to false. The currentLocationBoundsDistance variable (found in the same file) defines the distance in meters for calculating the bounding box around the current location.

For a more detailed guide on how to change the default locations, refer to the tutorial.

Configure fallback bounding boxes

The Mapbox Geocoding API does not always return a bounding box with the results. The SearchMap component needs a bounding box to adjust the zoom level of the map when displaying a location.

Suppose the Geocoding API does not return a bounding box. In that case, the map uses the default values defined in GeocoderMapbox.js. The configuration specifies a default distance to generate the bounding box with for all different Mapbox Geocoding data types.

Restrict location autocomplete to specific country or countries

If your marketplace works only in a specific country or countries it might be a good idea to limit the location autocomplete to those countries. You can specify whether to use the limitation in config/configMaps.js. Search for variable countryLimit and uncomment the line to make it active. Provide the country or countries in an array using ISO 3166 alpha 2 format (eg. GB, US, FI). If there are multiple values, separate them with commas.

How to use other map providers

The default map setup of the template uses library called mapbox-gl-js. It supports quite many other map providers too. Thus, if you wish to use a map provider other than Google Maps or Mapbox, first check if the map provider you are considering is supporting this library. If they are, the change might be quite easy. Note: if you change the map tile provider you should also change geocoding API too (i.e. the API endpoint for LocationAutocompleteInput component).