Connect your app to Mapbox

1. 1

   Sign in to your Mapbox account and go to the 'Access tokens' page.

   You need to get special codes (tokens) from Mapbox that allow your Lovable app to use its services.

2. 2

   Create or copy a public token (starts with 'pk.') for showing maps in your app's browser view, and a secret token (starts with 'sk.') if you need features like address search or directions.

   Different Mapbox features require different types of tokens. Public tokens are for visible maps, and secret tokens are for behind-the-scenes calculations.

3. 3

   Go to the 'Connectors' section in Lovable, select 'Mapbox', and click 'Add connection'.

   This is where you tell Lovable about your Mapbox account and the tokens you just got.

4. 4

   Give your connection a display name, then paste your public token and/or secret token into the appropriate fields.

   The display name helps you identify this connection later, and pasting the tokens links your Lovable app to your Mapbox account.

5. 5

   Choose who in your Lovable workspace can use this Mapbox connection.

   This controls access to the Mapbox features and ensures only authorized team members can use it in their projects.

6. 6

   Click 'Connect'.

   This finalizes the connection, and Lovable will check if your tokens are valid.

Connect my app to Mapbox. I need to embed interactive maps, geocode addresses, and calculate routes. I have my Mapbox public token (pk.YOUR_PUBLIC_TOKEN) and secret token (sk.YOUR_SECRET_TOKEN).

Mapbox GL JS

A special tool from Mapbox that helps your app display interactive maps directly in a web browser.

Geocode

The process of converting a human-readable address (like '1600 Amphitheatre Parkway') into geographic coordinates (latitude and longitude) that can be placed on a map.

Public token (pk.)

A special code from Mapbox that is safe to share in your app's public-facing code. It's used for displaying maps in a web browser.

Secret token (sk.)

A highly sensitive code from Mapbox that must be kept private. It's used for powerful features like searching addresses, calculating routes, or generating map images behind the scenes, not directly in the user's browser.

Connector gateway

A secure pathway within Lovable that allows your app to safely use secret tokens and access external services like Mapbox without exposing sensitive information.

Server-side APIs

Services or functions that run on a remote computer (server) rather than directly in your app on the user's device. These are often used for tasks that require more processing power or sensitive information.

Frontend code

The part of your app that runs directly in the user's web browser or on their device. This is what users see and interact with.

Backend code

The part of your app that runs on a server, hidden from the user. It handles data storage, complex calculations, and secure operations.

• Never use your secret token (sk.) in your app's public-facing code, as it functions like a password and could be misused.
• Do not use a public token (pk.) for server-side Mapbox features like geocoding or directions; it won't work and is not secure for those purposes.
• Remember that all Mapbox usage is billed by Mapbox, not Lovable, so keep an eye on your Mapbox plan.
• If your Mapbox tokens are revoked or deleted, your app's Mapbox features will stop working until you update the connection in Lovable with valid tokens.
• You must configure allowed website addresses (domains) for your public token in your Mapbox account dashboard for production apps, as Lovable does not do this automatically.