Mapbox

Overview

Easily add an interactive, searchable map to your Framer prototypes with the Mapbox component. 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 allows you to add latitude, longitude, zoom, and even bearing or pitch to your design work.

Customize

The Mapbox component ships with core Mapbox map styles: Mapbox Light, Dark, Streets, Outdoors, Satellite, and Satellite Streets. Add your Mapbox accessToken to unlock Mapbox Designer styles (like Whaam!, Terminal, North Star, and more), or to pull in your custom Mapbox Studio map styles.

The “Get your access token” will be removed when you sign-up and add your Mapbox accessToken.

Mapbox component

Drag and drop a Mapbox map into your projects with this component. You can set location, add a functional search box (globally or only within your mapview), and use core or custom Mapbox map styles.

Sequential Locations Map component

The Sequential Locations Map component will fly.to any location by click or by “autoplay”. Set your custom locations through Overrides. To add an override, click “code” in the properties panel of the Sequential Locations Map, and in the “File” dropdown, click add a new file. From here, copy and paste the following code snippet, and then attach “CameraMove Sequence” under the “Override” dropdown.

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 }
    ]
  };
};

Marker Map component

The Marker Map component allows upload custom data from a JSON file and add a custom marker directly in the Framer UI. First, you must make the JSON file using the formatting below. Make sure to keep the headers “name”, “location”, “focusLocation”, “category”, and “details” as is but change the content to fit your marker locations. The values will appear on the map in the popup card when you click on the marker for that location. “focusLocation” is what the camera will animate to when the user has clicked the marker.

Copy this JSON format, update with your marker locations, save as a .json file and upload this to your Mapbox Marker Map component:

[
  {
    "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."
  }
]

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