Mapbox

Mapbox

Mapbox

Overview

The Mapbox, Sequential Location Map, and Marker Maps components are in maintenance mode and no updates are currently planned.

Easily add an interactive, searchable map to your Framer prototypes with the Mapbox component. This component uses Mapbox maps to help you prototype location-aware products and apps, without needing to write any code. You can add your own custom location data, complete with popup cards and search functions, with the Marker Map component. Want to move the camera around the map? The Sequential Location Map component allows you to add latitude, longitude, zoom, and even bearing or pitch to your design work.

Customize your map

The Mapbox components show a functional map by default. The Mapbox, Sequential Location Map, and Marker Map components ship with core Mapbox map styles: Mapbox Light, Dark, Streets, Outdoors, Satellite, and Satellite Streets.

When you add your Mapbox access token, the “Get your access token” text will be removed. Using your Mapbox access token also gives you access to Mapbox designer map styles (like Whaam!, Terminal, North Star, and more) and to your custom Mapbox Studio map styles.

Get a Mapbox access token

Sign up for a Mapbox account at mapbox.com/signup.

Navigate to your Mapbox account page. Click on the clipboard icon next to copy your default public token to copy it.

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.

Using the Mapbox component

Drag and drop a Mapbox map into your Framer X projects with the Mapbox component. You can set the map location and add a functional search bar (globally or only within your map view).

To learn more, watch our tutorial on using the Mapbox component.

Set 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.

Click the City dropdown menu, and choose your desired location. The location shown in the map will change to the one you have chosen.

The Mapbox component gives you the option to add a functional search bar to your prototype.

Click on the Show button next to the Search option. Use the Position dropdown menu to move the bar to the top left, top middle, or top right side of the map. Use the Offset field to move the search bar up, down, left, or right on the prototype. The Drop Pin option is True by default. This setting marks the search results in your prototype with a pin.

Now you can type a location into the search bar and select a result, and the map will fly to the selected location.

Using the Sequential Location Map component

The Sequential Location Map component will fly to any location, either on click or on autoplay.

To learn more, watch our tutorial on using the Sequential Location Map component.

Set custom locations

Set your custom locations through Overrides. Click the Code tab in the properties panel. In the “File” dropdown, select New file. Copy and paste the following code snippet into the .tsx file:

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: [
      // first location
      { bearing: 0, pitch: 0, zoom: 11, latitude: 41.385063, longitude: 2.173404 },
      // second location
      { zoom: 13 },
      // third location
      { pitch: 60 },
      // fourth location
      { bearing: 90 }
    ]
  };
};

Save the file. If you choose, you can rename the file using Save As, but the file must retain the .tsx extension. Click on the dropdown menu next to File and select your new file. Click on the dropdown menu next to Override and select CameraMoveSequence. Set the value of the Autoplay field to True. This will start the animation automatically in Preview mode.

Using the Marker Map component

The Marker Map component allows you to upload custom data from a JSON file and add a custom marker directly in the Framer UI.

To learn more, watch our tutorial on using the Marker Map component.

Set the marker locations

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

In your text editor, create a new JSON file that follows the formatting in this example file. The headers need to be "name", "location", "focusLocation", "category", and "details", but you can change the content to fit your marker locations.

[
  {
    "name": "Walnut Hills",
    "location": { "longitude": -74.5, "latitude": 42 },
    "focusLocation": { "zoom": 12, "bearing": 0, "pitch": 60 },
    "category": "park",
    "details": "This is my favorite location."
  },
  {
    "name": "Marble Mountain",
    "location": { "longitude": -77.0353, "latitude": 38.8895 },
    "focusLocation": { "zoom": 10, "bearing": 0, "pitch": 60 },
    "category": "park",
    "details": "This is an excellent park."
  },
  {
    "name": "Evergreen Pond",
    "location": { "longitude": -71.35, "latitude": 42.419 },
    "focusLocation": { "zoom": 10, "bearing": 90 },
    "category": "zoo",
    "details": "I love this zoo."
  }
]

Click the Choose File button next to the Location option. Choose the new JSON file.

When 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. "focusLocation" is what the camera will animate to when you click a marker.

Additional components

Additional components used by the Mapbox component live inside the details/ folder. Want to manipulate the map at a lower level? Use MapboxMapCore, MapSearchGeocoder, or other utilities as your starting point. Happy mapping!