Connect your app to Mapbox

1. 1

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

   You need specific keys (tokens) from Mapbox to allow Lovable to use its services.

2. 2

   Copy your public token (starts with 'pk.') for showing maps in the browser, and create and copy a secret token (starts with 'sk.') if your app needs features like geocoding or routing.

   Public tokens are for visible map features, while secret tokens are for behind-the-scenes calculations. Keep secret tokens private.

3. 3

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

   This is where you tell Lovable about your Mapbox account.

4. 4

   Give your connection a name, then paste your public token into the 'Public token' field and your secret token into the 'Secret token' field (if you have one).

   This links your Mapbox tokens to your Lovable project, allowing it to use Mapbox features.

5. 5

   Choose who can use this connection within your Lovable workspace, then click 'Connect'.

   This determines if only you or other team members can use this Mapbox connection in their projects.

Connect my app to Mapbox. I need to display interactive maps and also use geocoding and routing features. I have my public and secret Mapbox tokens ready.

Mapbox GL JS

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

Geocode

To convert a human-readable address (like '1600 Amphitheatre Parkway') into precise geographical coordinates (like latitude and longitude) that a computer can understand and use on a map.

Connector gateway

A secure tunnel that Lovable uses to send requests to services like Mapbox on your app's behalf, keeping sensitive information like secret tokens hidden from your app's public code.

Public token

A special key from Mapbox that starts with 'pk.' and is safe to use in your app's visible parts, like for displaying maps in a web browser. It's less powerful than a secret token.

Secret token

A powerful, private key from Mapbox that starts with 'sk.' and should never be shared publicly. It's used for behind-the-scenes tasks like calculating routes or converting addresses, and Lovable keeps it secure.

Isochrones

Lines on a map that connect all points reachable from a starting location within a specific travel time (e.g., all places you can get to in 15 minutes by car).

• Using Google Maps Platform data (like geocoding or routes) on a Mapbox map is against Google's terms.
• Sharing your secret token publicly, as it acts like a password and grants full access to your Mapbox account's features.
• Forgetting to restrict your public token to your app's URLs in Mapbox settings, which could allow others to use your token.
• Not having a secret token when your app needs server-side features like geocoding or routing, which will cause those features to fail.
• Not updating your Lovable connection if a Mapbox token is revoked or deleted, as your app's Mapbox features will stop working.