Creating a Mapbox key

Stockist supports using either Google Maps or Mapbox to power the map imagery in your store locator.
While Google Maps is well-known, setting up a license key to use Google Maps on your own site is a relatively challenging process and is prone to breaking later on.
As an alternative, Stockist supports powering your store locator’s map using Mapbox. Mapbox is another map company that focuses on providing maps to be used on your website. Their maps are similar to Google’s and offer a similar level of free monthly usage, but are much easier to set up.

Creating your key

Follow these steps to set up a Mapbox key:

  1. Sign up for an account with Mapbox on their website: https://account.mapbox.com/auth/signup/


    Choose a username (a good choice is your business name in lowercase without spaces, e.g. jennyscupcakes), enter your email address, and select a password.

    We suggest saving your account details in a secure place in case you need to access your account later on.


    On the next screen, you might be asked to enter billing details for your key. Mapbox has a generous free tier that covers about 10,000 visits to your store locator map every month, so for most small and medium sites there's no extra cost. However, Mapbox does ask for billing details in case your map exceeds this amount of traffic, in which case they offer additional usage on a pay-as-you-go basis.

  2. Once your account is created, you'll end up on the Account overview screen of the Mapbox dashboard. In the left menu, click Tokens:

  3. Click Create a token:

  4. Enter a name for your key to remember what it's for - "Stockist Store Locator" is a good choice:

  5. Under Token scopes, leave everything as-is (no changes needed). All "public scopes" should be selected, and all "secret scopes" should be un-selected.

  6. Under Token restrictions, enter your website domain only, then click Add URL:

    Even though the field says URL, only enter your site's domain name alone. The full map page URL won't work.

  7. If your site is on Shopify, you'll also want to add your myshopify.com domain and the preview domain that Shopify uses when viewing draft themes (shopifypreview.com). When done, the list will look something like this:

  8. Click Create token to finish creating your map key:

  9. Once your key is created, you'll be taken to the Access tokens page. Copy the key that was just created by clicking the clipboard icon next to the key in the list:

    Make sure you're copying the key that was just created, not the "Default public token".

  10. Add the token to your Stockist account on the Map provider page of the Stockist dashboard:

Troubleshooting

After you set up a Mapbox key, if the map on your website starts showing up gray (without the roads/imagery behind the pins), this indicates an issue with your key. In this case, please check:

  • That your key was copied correctly and fully into the Stockist dashboard
  • The the domain added in the URL field matches the address bar in your browser when viewing your map page
  • That the list of URLs contains just your domain in the allowed list (e.g. example.com only, not example.com/pages/store-locator)

We're also happy to help investigate any issues - feel free to get in touch through the Contact us page in the dashboard.

Related Articles