Mapbox API Setup

The Houzez maps system provides different map options to the customer to integrate the map into the site. One of the map systems is MAP Box. Design interactive maps that run in any Mapbox and add your own fonts, icons, and textures to make your map fit seamlessly with your brand.

Get Map Box API key

To use the Mapbox API, you must register your app project on the Mapbox Console and get a Mapbox API key, which you can add to your app.

Step 1: Get an API Key from the Mapbox Console

Click the link below, which guides you through the process of registering a project in the Mapbox Console, activating the Maps JavaScript API and any related services automatically, and generating a generic, unrestricted API key.

Go to the Mapbox website Sign up or log in

Start Here

By clicking the link Start Here, you will be redirected to a page where you will log in to the Mapbox account or create a new account by clicking the Signup button, see the image here below.

Access your account dashboard

After creating the account or signing in to your account, you will see the dashboard below:

Find the Access Tokens section

Then clicks the Tokens button from the left menu:

Create a new token

Then clicks the Create Token Button: 

Add the Project name as a Token Name. For the default public token scopes are generally suitable for displaying maps on websites, so you don’t need to change anything here.

Then add the site URL. Restrict this token to specific URLs. You can add URLs one at a time or as a comma-separated list. Your URL's format is important. Learn more about how to format your URL on our access token documentation page. This feature is compatible with many Mapbox tools with some limitations. For web applications using Mapbox GL JS, it requires version 0.53.1 and higher. It is not currently compatible with Mapbox native SDKs.

Generate and copy the token

Then click the Create Token button:

Add the token to your Houzez theme

Then you will see the token created and copy that token from the site:

Paste it into your WordPress dashboard, navigate to:
Houzez Theme Options → Map Settings → Global Map System (choose Mapbox) → paste your copied API key into the Mapbox API key field → save changes.