Mapbox is a location platform for interactive maps, geocoding, and routing. The Mapbox connector lets your RShift Sites app render maps in the browser with Mapbox GL JS and call Mapbox’s location APIs through RShift Sites’ connector gateway. It’s designed for apps that want Mapbox’s map styles and Mapbox GL JS, or that already run their location features on Mapbox.
Mapbox is available as an app + chat connector: one shared connection that works in the project chat while you build and in your published apps.
With Mapbox, your app can:
- Show interactive maps with Mapbox GL JS and custom Mapbox styles
- Turn addresses into coordinates and search for places
- Calculate routes and turn-by-turn directions
- Compute travel-time areas and distance matrices between many points
- Render static map images for previews and thumbnails
Mapbox is a good fit when you ask for Mapbox by name or need something specific to it. For a quick prototype with generic maps, geocoding, or directions, the managed Google Maps Platform connection needs no account or keys. Pick one provider per app: Google’s terms do not allow showing Google Maps Platform data, such as geocoding, places, or routes, on a non-Google map like a Mapbox map.
Common use cases and example apps
These examples show what you can build with Mapbox, each with a prompt to start from.
| Example app | Example prompt | Description |
|---|---|---|
| Store locator | Use Mapbox and build a store locator with clustered pins, address search, and a sidebar that lists the nearest locations. | Help visitors find the closest location on a map. The app geocodes searches, renders pins with Mapbox GL JS, and updates the list as the map moves. |
| Delivery dispatch board | Use Mapbox and build a dispatch board that shows today’s stops on a map, calculates route distance between pickup and dropoff, and sorts jobs by arrival time. | Plan routes and arrival times for field operations. The app calls Mapbox routing on the server and draws stops and paths on an interactive map. |
| Real estate listings | Use Mapbox and build a property listing app where people browse homes on a map, filter by neighborhood, and open detail pages from each pin. | Browse listings on a map-first experience. The app centers the map on search results, renders listing pins, and links each pin to a detail page. |
| Travel itinerary planner | Use Mapbox and build a trip planner where people add stops, see them on a map, and view driving distance and time between each leg. | Visualize multi-stop trips with distances and times. The app geocodes stops, draws the route on a Mapbox map, and shows leg-by-leg summaries. |
| Event venue finder | Use Mapbox and build an event finder where people search by city, see venues on a map, and filter by capacity or event type. | Discover venues through map search and filters. The app geocodes venue addresses, renders them as pins, and filters the map and list together. |
| Delivery zone planner | Use Mapbox and build a tool that shows how far a courier can travel from each depot in 15, 30, and 45 minutes. | Draw travel-time areas around your locations. The app requests isochrones from Mapbox on the server and shades the reachable areas on the map. |
| Static map previews | Use Mapbox and build an admin page that shows a thumbnail map image for each saved location. | Show map previews without loading a full interactive map. The app requests static map images from Mapbox on the server and displays them in lists or cards. |
How to connect Mapbox
Who can create Mapbox connections depends on your plan and workspace settings. App + chat connectors are available by default on Free, Pro, and Business plans. On Enterprise plans, they are effectively disabled at first: Who can create connections and clients defaults to No one until an admin changes it in Connectors → Admin settings → App + chat connectors.
You can create multiple Mapbox connections using different tokens, which is useful for separating environments (for example, development and production) or using different Mapbox accounts.
When the connection is created, you can link it to the projects where you want to use it. Anyone building in a project can ask RShift Sites in the project chat to link their project to it.
Prerequisites
Before connecting Mapbox, make sure you have:
- A Mapbox account
- At least one Mapbox access token: a public token (
pk.) for maps in the browser, a secret token (sk.) for geocoding and routing, or both - Permission to create connections in your RShift Sites workspace (see Who can create connections and clients)
Step 1: Get Mapbox access tokens
Mapbox uses two token types, and they are not interchangeable. A public token (pk.) loads maps in the browser. A secret token (sk.) is for everything that runs on the server: geocoding, directions, matrices, isochrones, and static map images, all called through RShift Sites’ connector gateway. A map-only app can connect with a public token alone. Any server-side feature needs a secret token on the connection.
To create Mapbox access tokens:
Open your Mapbox account
Sign in to Mapbox.
Open access tokens
Go to Access tokens.
Get a public token
Copy your default public token (it starts with pk.), or create a new one. Before you publish, restrict it to your app’s URLs in the token’s settings.
Create a secret token (if you need server-side features)
Click Create a token, give it a descriptive name (for example, RShift Sites integration), choose the scopes your app needs, and copy the token starting with sk.. Mapbox shows a secret token only once.
Store the tokens securely
Copy each token and store it securely. You’ll paste them into RShift Sites in the next step.
See Mapbox documentation for more: Access tokens.
Step 2: Connect Mapbox to RShift Sites
You can create multiple connections using different tokens.
Open Mapbox in Connectors
Open Connectors and select Mapbox. For the other places to open the catalog from, see Where to find connectors.
Add a connection
Click Add connection.
Configure the connection
-
Display name: name the connection, for example
Mapbox Prod. This name is only used inside RShift Sites to identify the connection. 2. Secret token (optional): paste yoursk.token if your app needs geocoding, directions, or other server-side Mapbox features. 3. Public token (optional): paste yourpk.token if your app shows Mapbox maps in the browser. The field is marked Public because the value appears in your published app.Both fields are optional, but you need at least one. Create token next to each field opens your Mapbox access tokens page.
Choose who can use this connection
Under Sharing, the connection is private to you by default and shows a Private label. To share it, click Share with others. Then add workspace members by email, or click Invite entire workspace to make the connection available to everyone in your RShift Sites workspace.
See Who can use connections and clients for more information.
Connect
Click Connect. RShift Sites verifies each token you provide against the Mapbox API before saving the connection.
When connected, anyone building in a project can ask RShift Sites in the project chat to link their project to Mapbox (based on configured connection-level access). Your RShift Sites apps can then show Mapbox maps with the public token and geocode, route, and search with the secret token.
Public and secret tokens
The connector uses the two tokens for different jobs:
- The secret token is used for server-side Mapbox calls. RShift Sites routes them through the connector gateway, which adds the token for you, so it never appears in your app’s code or in the browser. If the connection has no secret token, server-side calls fail with a
secret_token_requirederror. - The public token is used by Mapbox GL JS in the browser. RShift Sites exposes it to your app’s frontend as the
VITE_LOVABLE_CONNECTOR_MAPBOX_PUBLIC_TOKENenvironment variable. Restrict it to your app’s URLs in your Mapbox account so other sites cannot use it.
If you connect with only a public token, your app can show maps but not geocode or route. Add a secret token to the connection when you need those features.
Limitations
The Mapbox connector cannot:
- Rotate tokens automatically. To rotate, create new tokens in Mapbox and update the RShift Sites connection.
- Support per-end-user Mapbox login. Each connection represents a single Mapbox account shared across all projects linked to it.
If a token is revoked or deleted in Mapbox, update the RShift Sites connection with a valid token before API calls can succeed again.
Manage your {connector_0} connection
Connections are managed from Connectors: select {connector_0}, then open the connection.
- Unlink projects to remove {connector_0} access from specific projects while keeping the connection available for others. See Unlink projects from a connection for the steps.
- Delete the connection to remove it from the workspace entirely. Deleting is permanent. It removes the credentials from all linked projects, and app features that use {connector_0} stop working until a new connection is added. See Delete a connection for the steps and who can delete.