Prototyping maps with Framer and Mapbox

Editor’s note: We’ve made some big changes to Framer, and this article refers to a deprecated tool. Learn more about what Framer is today →

If you are a designer prototyping a map experience, you’re using interactions and relying on data, and Framer just happens to be the perfect tool for that.

But hooking Framer up with existing map solutions like Mapbox or Google Maps can be a problem if you’re not an advanced JS user.

Luckily for us,

Iván Flores

created a Mapbox boilerplate module for Framer that allows you to create a mapbox Framer object easily without messing around with npm modules and such.

NocheVolta/FramerMapboxJS

The only problem with this module was that you needed to dig into Mapbox JS documentation in order to do basic things with maps and translate JS code to Coffeescript with the http://js2.coffee site.

www.mapbox.com/mapbox-gl-js/api

I needed to do simple things like adding markers from existing Framer layers, creating new Framer layers as Mapbox markers, building a route between points, animating markers on route, and animating a mapbox object to a certain location.

So I built this project for the most recent FramerLondon meetup using converted JS code.

https://framer.cloud/WDIbL

Since the feedback was overwhelmingly good, I decided to update Ivan’s module with all new functionality.

So the first step is registering a Mapbox.com account and getting your API key.

Creating Mapbox object using module

Install the Framer Mapbox JS module and create a new Mapbox object in Framer.

Customization

You can customize a Mapbox object with the following properties:

• style String : The map's style url. (default mapbox://styles/mapbox/streets-v9)
• center Array : The inital geographical centerpoint of the map. (default [-3.703, 40.409], is Madrid) *
• zoom Integer : The initial zoom level of the map. (default 13.9)
• size Integer or Object : Size of the map, set width and height using { width:640, height: 480 } or use a single number to create a square. (default Screen.size)
• pitch Integer : The initial pitch (tilt) of the map, measured in degrees away from the plane of the screen (0-60).
• bearing Integer : The initial bearing (rotation) of the map, measured in degrees counter-clockwise from north.
• x : Initial X position (default 0)
• y : Initial Y position (default 0)
• interactive Boolean : If false, no mouse, touch, or keyboard listeners will be attached to the map, so it will not respond to the interaction. (default true)

Basic Markers

The marker object can have any attribute a Framer layer has, and the point attributes for the longitude and latitude coordinates should be in an array.

Custom Markers

If you have an existing Framer layer (from the code or design tab), you can use a CustomMarker class:

Building route between two points

With the Mapbox Directions API you can get the geoJSON of the route between two points.

With the buildRoute method of our module you can get this geojson and create a line route with a defined strokeWidth and StrokeColor like this:

Animating Marker on Route

Animating center of the map to certain location

Use flyto(point) method and pass array of new location to it

With all the code above you will end up with something like this

https://framer.cloud/FmFdE

Here’s the fun part

You can build 3D buildings with the build3D method.

https://framer.cloud/cfxAT

I’m excited to see what you create with the FramerMapbox module. Feel free to hit me up with any questions or suggestions.