Design with Mapbox in Framer X

Framer X is rethinking how designers work with tools and one very important piece of the puzzle is our in-app Store.

The Framer X Store is a free marketplace, where designers, developers, and everyone in between can contribute packages made up of interactive components and design assets. It’s a community-powered resource that helps uplevel the entire design community, while giving component makers the credit they deserve.

Since we launched Framer X in September 2018, over 400,000 packages have been downloaded from the public Store. The variety is astounding, from animations, inputs, and grids to working media players! Amongst the sea of components being contributed by a growing community, there’s a package that stands out—the official Mapbox component. The team partnered with us to create a fully-functional map component, featuring 16 different map styles. Spinning up a location-based prototype can now be accomplished in under 30 minutes, which is likely why this original package has been downloaded over 12,000 times in the past 6 months.

Now the Mapbox team has worked with us to further extend the functionality of this component. They’ve introduced two additional components to the Mapbox package, which offers new ways to design with maps in Framer X. Let's take a deeper look at what’s new.

mapbox components framer

Mapbox Map

The existing Mapbox component had ways to customize the look and feel of your map, such as the map style, whether the location came from a preset list or a pair of coordinates, and the zoom level.

In this update, you can now add an indicator to show your exact coordinates, set the bearing, and add a fully-functioning search box with location autocomplete. Simply install the package, drag the component onto the canvas and you’ll be able to interact with the map right from within your prototype. Add or tweak any of the above using custom UI built into the properties panel.

Try Framer

Sign up

Marker Map

We’re particularly excited for the new Marker Map package because it allows you to customize right on the Framer X canvas.

The Marker Map allows you to include a JSON file of locations, which will be displayed as markers on the map. Even better — you can set information to display when a user clicks on the marker.

Here is what a simple marker would look like in JSON:

[
    {
        "name": "Framer HQ",
        "location": { "longitude": 52.372888, "latitude": 4.888030 },
        "focusLocation": { "zoom": 12, "bearing": 0, "pitch": 60 },
        "category": "office",
        "details": "This is where the magic happens!"
    },
    // Add as many more markers as you’d like!
]

One of the best functionalities of this component is that you can take the selector on the right edge of the Marker Map component, and attach it to something you’ve designed on the canvas. This allows you to include your own design for the marker, rather than the default red marker that appears at first.

Sequential Location Map

Last but certainly not least, the Mapbox team has also added a great map for animating between locations. It uses the built-in Mapbox fly.to API to navigate around the map, based on a set of locations and bearings set through a code override. Check out this article if you want to learn more about the power of code overrides.

Here’s an example of what an override would look like if you set it to move between 4 different locations:

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

In addition to attaching the different locations through overrides, you can change the duration between the locations, and even set the map to autoplay if you want it to play right away, vs. the default onClick.

Dive in deeper

There’s a lot more to look forward to with components and the Framer X Store, but we’re especially excited to see what you’ll build with the new Mapbox package. Share what you build on Twitter using #builtwithmapbox and #framerx and you may win yourself some swag from both teams. To start designing with maps in Framer X today, check out the following resources:

• Official Mapbox & Framer page
• Step-by-step Tutorials
• Mapbox component
• How-to Videos