How to Create and Setup a Mapbox API Token

Are you looking to embed a map on your online store, website, or blog? Then you will need a Mapbox API token to make that map function properly.

To add a Mapbox map to your website, you will first need to get a Mapbox API token. In this article, we will show you how you can get a Mapbox API token. In addition, we will also explain how you can use this API token to add a fully-fledged Mapbox Map to your website.

So let’s get started.

What is a Mapbox API Key?

If you’re looking to embed a map into your website, a Mapbox API key is like a personalized access pass that allows your website to communicate with Mapbox’s map services. 

Mapbox provides highly customizable maps that enhance your site with interactive and visually appealing geographic information.

When you sign up for Mapbox, you receive an API key. This is essentially a code snippet that you’ll integrate into your website’s code where you want the map to appear. 

This key serves two main purposes: Firstly, it verifies to Mapbox that your website is authorized to use its services. Furthermore, it allows Mapbox to track how much you’re using their services. This is important for billing and ensuring fair access for all users.

You can generate a custom Mapbox API Token to access Map Tilesets, Vector Tilesets, SDK features, Turn-by-Turn Navigation, Location Search, and an API Library for creating maps from satellite imagery tilesets.

You can use the Mapbox API Token to access a variety of APIs, including the Mapbox GL JS library, which allows you to render interactive maps in JavaScript. With the token, you can also retrieve detailed documentation on how to use the APIs effectively for your mapping needs.

An alternative to a Mapbox API key would be a Google Maps API key, which is one of the most popular online map providers. If you would like to use a Goole Maps API key, please see the following guide article.

Moreover, you can take a look at the following article for a full comparison between Mapbox and Google Maps APIs.

How to Get a Mapbox API Key

Step 1 – Create a New Mapbox Account

To begin getting a Mapbox token, you will first need to go to the official Mapbox website and then create an account if you don’t already have one.

To create a Mapbox account, please follow the below steps:

1. On the Mapbox website, click on the “Get started for free” button
2. On the “Create an account” page, enter your personal details, business details, username, and password
   
3. Click on “Create Account” to finalize your account creation

Step 2 – Generate a Token

Once you have created a Mapbox account, you will be taken to the main dashboard, where you can create an API token.

To generate an API token, please follow the below steps:

1. Click on the “Create a token” under the “Access Token” section
   
2. On the next page, give the token a name
3. To restrict the token to your website, scroll down to the “URLs” section and add the website/domain URLs that you want to restrict this token to
4. You can even add multiple URLs; add the URLs and click on the “Add URL” button
5. Finally, click on the “Create Token” button
   
   

Once you press the “Create Token” button, the Mapbox API token will be created successfully. Furthermore, you can copy the token by clicking on the “Copy” icon.

You can access the token anytime you want by logging in to your Mapbox account.

Step 3 – Use the API Token

Now that you have created and restricted a Mapbox API token, you can use it to add a fully functioning Mapbox map to your website.

Let’s look at an example of where a Mapbox API token can be used.

Use Case for a Mapbox API Token

A Mapbox API token can be used to add a store locator widget to a website.

What is a Store Locator Widget?

A store locator widget is a section on a website that has the following elements:

1. A large map by a map provider such as Google Maps, Mapbox, etc.
2. A search bar
3. A list of the business owner’s stores

All the above elements work together to guide customers from the website to a physical store if they want to buy a product in-store after discovering it on the website.

Using the Mapbox API Token

Let’s say a business owner with multiple stores and a website wants to add a store locator widget to his website to help customers who want to make in-store purchases reach his stores.

To add a store locator widget to his website, this person can use the store locator app, WP Maps, to easily add a store locator widget to his website with minimum effort.

Before the store locator widget can be created and configured, the Mapbox API key must first be added to WP Maps so that the store locator map can function properly. WP Maps comes with a full Mapbox integration that adds many of the features of Mapbox to your website.

To add the Mapbox API Token to WP Maps, this person will simply need to follow the below steps:

1. Login to their WP Maps account
2. Click on the “Super Admin” tab on the left-hand panel
3. Select the “API keys” tab on the super admin page, and select the “Mapbox” sub-tab
4. Here, they can paste the API key so that the Mapbox map on their store locator widget functions properly
5. After the API token is added, all they need to do is click on the “Save Mapbox Token”
   

Once the Save Mapbox Token API is added, the process is complete. The business owner will now be in possession of a store locator widget that utilizes a Mapbox map. Furthermore, you can read this article on how to add a Mapbox Token to WP Maps.

Alternatively, WP Maps also comes with full Google Maps integration for business owners who prefer to use the Google Maps aesthetics.

Video Tutorial

The above video shows the entire process of adding the Mapbox API token to WP Maps. As a result, a store locator widget with a Mapbox map will be added to the website.

What are the Best Practices for Using a Mapbox API Token?

When using a Mapbox API key, adhering to best practices ensures secure, efficient, and cost-effective use of Mapbox services. 

Let’s take a look at some practices to use your Mapbox token more effectively.

Secure Your API Key

Securing your Mapbox API key is crucial to prevent unauthorized access and misuse, which could lead to unexpected costs due to excessive use of Mapbox services. 

To ensure your key remains private, it’s important not to hardcode it into your client-side code or include it in publicly accessible areas like GitHub repositories. Instead, the key should be stored using environment variables or server-side configurations. 

This approach allows your application to access the API key without exposing it in the source code, ensuring it remains hidden from public view and reducing the risk of misuse.

Additionally, restricting access to your API key through Mapbox’s dashboard adds an extra layer of security. By setting up restrictions, you can limit access to your API key based on specific IP addresses, URLs, or referrers. This means only requests coming from the specified sources will be allowed, significantly reducing the likelihood of unauthorized use. 

Implementing these restrictions helps you maintain control over who can use your Mapbox services, providing peace of mind and helping to avoid potential security breaches or unexpected charges on your account.

Monitor Usage

Regularly check your usage statistics in the Mapbox dashboard. This helps you understand your application’s demands and can alert you to unexpected spikes in usage that might indicate misuse.

Configure alerts to notify you when your usage approaches certain thresholds. This proactive measure can help prevent unexpected charges.

Optimize Map Loading

Load maps efficiently by only loading map resources when needed. For example, delay loading the map until it’s likely to be viewed by the user, such as on scroll or after clicking a button.

Use Vector Tiles to load maps. Vector tiles are smaller and faster than raster tiles, leading to quicker load times and a more responsive user experience.

Cache Appropriately

Use browser caching to manage requests. While dynamic map data should be fetched as needed, static assets like icons or style sheets can be cached to reduce unnecessary network requests.

Familiarize yourself with how Mapbox caches map tiles and data to optimize your application’s map loading performance while adhering to their policies.

Update and MaintainKeep SDKs Up-To-Date: Regularly update the Mapbox SDKs you are using. Updates can include performance improvements, new features, and security patches.

Review Documentation: Mapbox periodically updates its documentation and best practices. Staying informed helps you leverage new features and optimizations.

Mapbox API Token Usage Prices

Mapbox offers various pricing plans for its API usage, catering to different needs and usage levels. 

The pricing is typically based on factors such as the number of monthly active users (MAUs), requests made to the API, and the features utilized. 

The pricing structure may also include additional charges for services like geocoding, routing, and data storage.

For developers or small businesses with low usage requirements, Mapbox provides a free tier with limited usage allowances. 

Beyond the free tier, there are several paid plans offering increased usage limits and access to advanced features and support options. These plans are typically tiered based on usage volume, with higher tiers accommodating larger-scale applications or enterprises with higher demand.

It’s important for users to review the specific pricing details and terms provided by Mapbox to determine the most suitable plan for their needs. Additionally, keeping track of usage statistics and setting up alerts as mentioned earlier can help users manage their API usage efficiently and avoid unexpected charges.

Conclusion

If you are planning to add a map to your website, blog, or e-commerce store then you will need an API key or token to make the map embed function properly. Furthermore, if you want to add a map with the same style and functionality of Mapbox then you will first need to generate a Mapbox API token.

A Mapbox API token can even be used to add a store locator widget to your website by using store locator software such as WP Maps.