The Mapbox component for Framer X allows designers to prototype location-aware products and apps, without needing to write any code. In this tutorial, you will learn how to use the Mapbox component to add a functional, data-rich map to a prototype in Framer X.
There are a few resources you’ll need before you get started:
- A Mapbox account and access token. Sign up for a Mapbox account at mapbox.com/signup. Your access tokens are on your Account page.
- A Framer account. You need to have Framer X installed on your computer. You should also have some familiarity with how to use Framer X.
Create a new style
The Framer X Mapbox component gives you access to many different core and designer Mapbox map styles. But for this tutorial, you will create a new style using Cartogram, Mapbox’s drag-and-drop map style creation tool.
- Select an image to use as the basis for your map style.
- Drag your image into Cartogram and drop it in the lower left panel.
- To adjust the colors that Cartogram chooses, you can select Colorful, Light, Dark, or Custom. If you choose Custom, you can move the color pickers in order to specify which colors the style should use.
- Cartogram will automatically save your new style to your Mapbox account. Next, open Framer X.
Add the Mapbox component
This section assumes that you have a working knowledge of how to navigate and use Framer X. If you need help with Framer X, check out the Framer documentation site.
- In Framer X, click on the Store icon.
- Search for
Mapboxin the search bar.
- Select the Mapbox component, then click Install.
- Once the Mapbox component has installed, click on the Tools icon.
- Click the Frame button (or press the
Fkey) to add a new frame to your project. The example in this tutorial uses the Apple iPhone 8 Plus preset size. You can choose any preset frame size you like from the dropdown menus on the right side of the screen, or you can click and drag to create a freestyle frame.
- Click on the Components icon.
- Under the Mapbox heading, there is a grey box — this is the Mapbox component. Click and drag this box into the frame you just created.
- A new Mapbox map will populate inside the frame. You can resize and position the map within the frame.
Change the map style
The Mapbox component gives you access to many Mapbox styles by default. For this tutorial, though, you will use the custom map style that you created using Cartogram.
- In Framer X, click on the Map Style dropdown menu and select Custom.
- Navigate to your Mapbox Studio page and find the style you created earlier.
- New styles are private by default, but a style needs to be public in order to be used in Framer X. Click on the Menu button next to your style and select Make public.
- Once the style has been made public, click on the Share & use button next to your style.
- Click on the Use tab.
- Scroll down and click on the clipboard icon to copy your access token.
- In Framer X, paste your Mapbox access token in the Access Token field.
- Go back to Mapbox and click on the clipboard icon to copy your style URL.
- In Framer X, paste the style URL in the field below the Map Style dropdown menu.
The map in your Framer X prototype will update to use your custom style. Next, you will update your prototype to use a custom location.
Update the map location
The Mapbox component comes pre-loaded with a list of default locations for you to use in your prototypes. For this tutorial, though, you will use a custom location.
- Click the Custom tab next to the Location field.
- Use the Mapbox Search Playground to find your desired coordinates. Type your desired location into the search bar. The result will display on the map as a red dot. Click on the dot, and your location’s latitude and longitude will show up in the search bar. This tutorial uses Barcelona as its view, with the coordinates
2.176466902110292,41.38267342902182. The first number in this coordinate pair is the location’s longitude. The second number in the coordinate pair is the location’s latitude.
- Paste the latitude of your chosen location into the Latitude field. This is the second number in the coordinate pair you got from the Search Playground.
- Paste the longitude of your chosen location into the Longitude field. This is the first number in the coordinate pair you got from the Search Playground.
- Use the Zoom slider to adjust the zoom level. The zoom level for this tutorial is set to
Congratulations! You have created a prototype using the Mapbox component for Framer X.
Want to stay in the loop about what’s coming next in the Mapbox component for Framer X? Sign up on our Framer X component page.