Tutorials
beginner
No code

Prototype apps with Mapbox in Framer X

Prerequisite
Familiarity with Framer X.

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. This prototype will consist of three different frames, each using a different mapping function. The prototype will simulate an app that allows users to search, uses animations to display the search result, and then displays a list of local landmarks.

Get started

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.

Install 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, visit the Framer documentation site.

  1. In Framer X, click on the Store icon.
  2. Search for Mapbox in the search bar.
  3. Select the Mapbox component, then click Install.

Use the Mapbox component

For the first frame, you will use the Mapbox component to create a map with a functional search bar.

  1. Once the Mapbox component has installed, click on the Tools icon.
  2. Click the Frame button (or press the F key) to add a new frame to your project. The example in this tutorial uses the Apple iPhone 8 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.
  3. Click on the Components icon. There are several component options: Mapbox, SequentialLocationMap, and MarkerMap.
  4. Click on the Mapbox component and drag it onto the frame.
  5. A new Mapbox map will populate inside the frame. You can resize and position the map within the frame.

Add your Mapbox access token

The Mapbox component shows a functional map by default, but it also contains a text watermark in the upper left side of the map that says "Get your access token." When you add your access token, the text watermark will disappear.

  1. Navigate to your Mapbox account page. Click on the clipboard icon next to copy your default public token to copy it.
  2. In Framer X, paste this access token in the Access Token field. Press the Enter key on your keyboard to integrate it into the current frame.

Next, you will change the map style to a Mapbox designer style.

Change the map style

The Mapbox component gives you access to several Mapbox core styles by default (Mapbox Light, Mapbox Dark, Mapbox Streets, Mapbox Satellite, and Mapbox Satellite Streets), and you can use these styles even if you do not add your access token. But to access any Mapbox designer styles, or a custom map style of your own creation, you will need to use your Mapbox access token, as described in the last section.

To change the map design:

  1. In Framer X, click on the Map Style dropdown menu.
  2. Click on the LeShine style.

The map in the Mapbox component will update to use the LeShine Mapbox designer style.

Update the map location

The Mapbox component comes with a list of default locations for you to use in your prototypes. You can also add a custom location if you choose.

  1. Click the City dropdown menu.
  2. Click on "Washington DC, USA".

The location shown in the map will change to Washington DC.

Next, you will add the functional Mapbox search bar to this frame.

  1. Click on the Show button next to the Search option.
  2. Use the Position dropdown menu to move the bar to the top left side of the map.
  3. Use the Offset field to move the search bar down 15 pixels.
  4. The Drop Pin option is True by default. In this case, leave the setting as True since you want search results in your prototype to be marked with a pin.

To preview this frame, click on the Preview icon on the top right side of the Framer X screen. In the Preview screen, you can type a location into the search bar and select a result. The map will fly to the selected location.

Use the SequentialLocationMap component

Next, you will create a new frame using the SequentialLocationMap component. In this frame, you will prototype a search results screen that shows changes in pitch, bearing, and zoom.

  1. Click the Frame button (or press the F key) to add another iPhone 8 frame to your project.
  2. Click on the Components icon and drag the SequentialLocationMap component onto the new frame.
  3. Paste your access token in the Access Token field. Press the Enter key on your keyboard to integrate it into the current frame.
  4. Click on the Map Style dropdown menu and choose the LeShine style.

Set the map location

  1. Click on the Code tab to expand it.
  2. Click on the dropdown menu next to File and select New File. (If prompted to do so, download Visual Studio Code.)
  3. Framer X will open a .tsx file in Visual Studio Code. Delete the contents of this file and paste in the following code:
import { Override } from "framer";

// To control what locations the map looks at, provide an
// array of location values. All properties for the locations are optional,
// with any unspecified values reverting to the current map's values.
// Valid properties are:
// latitude, longitude, zoom, bearing, pitch
export const CameraMoveSequence: Override = () => {
  return {
    locations: [
      // set the location to Sydney, Australia
      { bearing: 0, pitch: 0, zoom: 11, latitude: -33.86729979946806, longitude: 151.209683984967 },
      // zoom in to the location
      { zoom: 13 },
      // change the pitch of the map
      { pitch: 60 },
      // change the bearing of the map
      { bearing: 90 }
    ]
  };
};
  1. Save the file. If you choose, you can rename the file using Save As, but the file must retain the .tsx extension.
  2. In Framer X, click on the dropdown menu next to File and select your new file.
  3. Click on the dropdown menu next to Override and select CameraMoveSequence.
  4. Set the value of the Autoplay field to True. This will start the animation automatically in Preview mode.

To preview this frame, click on the Preview icon on the top right side of the Framer X screen. The preview will show Sydney and will move through the animations that you set up in the .tsx file.

Use the MarkerMap component

Next, you will create a new frame using the MarkerMap component. In this frame, you will prototype a map that displays several marker locations.

  1. Click the Frame button (or press the F key) to add another iPhone 8 frame to your project.
  2. Click on the Components icon and drag the MarkerMap component onto the new frame.
  3. Paste your access token in the Access Token field. Press the Enter key on your keyboard to integrate it into the current frame.
  4. Click on the Map Style dropdown menu and choose the LeShine style.

Set the marker locations

The MarkerMap component requires a file with valid GeoJSON formatting to set the marker locations.

  1. Open Visual Studio Code or the text editor of your choice.
  2. Create a new file and name it sydney_attractions.json.
  3. Paste the following code into the new file:
[
  {
    "name": "Sydney Opera House",
    "location": { "longitude": 151.21507755097377, "latitude": -33.85725554523418 },
    "focusLocation": { "zoom": 9 },
    "category": "cultural attraction",
    "details": "World-famous opera house designed by Jørn Utzon. Opened in 1973."
  },
  {
    "name": "Bondi Beach",
    "location": { "longitude": 151.27362005956923, "latitude": -33.89084702828488 },
    "focusLocation": { },
    "category": "beach",
    "details": "A popular beach located in a Sydney suburb of the same name."
  },
  {
    "name": "Darling Harbour",
    "location": { "longitude": 151.20180875882124, "latitude": -33.87151653767559 },
    "focusLocation": { },
    "category": "cultural attraction",
    "details": "A large recreational and pedestrian precinct situated on the west side of the Sydney central business district."
  },
  {
    "name": "Sydney Harbour Bridge",
    "location": { "longitude": 151.21064244901527, "latitude": -33.8522736348907 },
    "focusLocation": { },
    "category": "cultural attraction",
    "details": "Distinctive bridge between the Sydney central business district and the North Shore. Opened in 1932. "
  },
  {
    "name": "Royal Botanical Gardens",
    "location": { "longitude": 151.21602755096444, "latitude": -33.86416527202888 },
    "focusLocation": { },
    "category": "cultural attraction",
    "details": "The oldest botanical garden in Australia. Opened in 1816."
  }
]
  1. In Framer X, click the Choose File button next to the Location option. Choose the sydney_attractions.json file.
  2. Paste the longitude 151.2356 into the Longitude field.
  3. Paste the latitude -33.8682 into the Latitude field.
  4. Change the value of Zoom to 11.
  5. Click on the Show button next to the Search option.
  6. Use the Position dropdown menu to move the bar to the top left side of the map.
  7. Use the Offset field to move the search bar down 15 pixels.

To preview this frame, click on the Preview icon on the top right side of the Framer X screen. The preview will show Sydney and the markers set at each landmark described in sydney_attractions.json. If you click on a marker in Preview mode, it will display a card for the marker with information from the .json file's name, category, and details properties.

Connect the frames

Finally, you will connect these three frames together so that they create one prototype.

  1. Click the first frame. You will see a purple outline around the frame that shows that it is selected.
  2. Click the purple circle on the right side of the frame and drag it so that it connects the first frame to the second.
  3. To connect the second and third frames, you will create a button on the second frame. Click the Frame button (or press the F key) to add a new frame on top of the second frame. If you choose, you can adjust the location, size, color, and opacity of the new button using the controls on the right side of the screen. You can also add text to the button, such as "Show me places to visit!"
  4. Select the button and type the L key to create a link. Drag the link and connect it to the third frame.

Finished product

You have created a prototype using the Mapbox component for Framer X. When you click the Preview button, you can see your new search app prototype. Type "Sydney" into the search bar and select the option "Sydney, New South Wales, Australia". The prototype will fly to Sydney and move through the animations you set in the SequentialLocationMap component. Then click on the button, which will pull up the markers that show the map locations you set in the MarkerMap component.

Next steps

Was this page helpful?