Mapbox

Instructions

Follow the steps below to connect the example file above to a Mapbox account.

1. Sign in or sign up to Mapbox
2. Open the Mapbox.framerx file
3. In the Code tab, click on the access.ts file
4. Copy your Access Token from your Mapbox Account to the variable ACCESS_TOKEN

The result should look something like this:

const ACCESS_TOKEN = "pk.420eyJ1Ijoic3Rldm...";

Preview the Frame named Export to see it in action. Happy exploring.

Note: To use the real-time-geolocation features, you'll need to open the preview in your web browser or use a Live Preview to open the preview on your mobile device.

Learn More

The example file uses components from the Learn Design System package from the Framer X Store, including its Map component. You can find a second example of using this component here, in the framer-education repository. This component is pretty self-contained, so you could create your own by copying the component's source code into your project, installing the required packages, and continuing from there.

To learn more about how to interact with the Mapbox API directly (as in the example's map-actions.ts file), see the Mapbox GL JS docs.