Mapbox Framer Module

[]()

The Mapbox module gives you the ability to create powerful Mapbox maps in your prototypes. You have full control over both the Layer that holds the map and the actual map itself via the Mapbox GL JS API.

Installation

NPM Installation

$ cd /your/framer/project
$ npm i @blackpixel/framer-mapboxlayer --save

Manual Installation

First you will need to get the Mapbox GL JS library installed to your project via NPM.

$ cd /your/framer/project
$ npm i mapbox-gl

Next, copy / save the MapboxLayer.coffee file into your project's modules folder.

Adding It To Your Project

In your Framer project add the following:

# If you manually installed
MapboxLayer = require 'MapboxLayer'
# Else
MapboxLayer = require '@blackpixel/framer-mapboxlayer'

MapboxLayer.connect('your_mapbox_api_key')

MapContainer = MapboxLayer.create({
    center: [-122.356568, 47.638699]
}, {
    name: 'MapContainer'
    width: 400
    height: 800
})

MapContainer.centerX()
MapContainer.rotationX = 15

Each map is generated with a new instance so you can have multiple maps working independently at the same time. You can use MapContainer.mapbox to access the instantiated Mapbox map instance.

API

MapboxLayer.connect(apiKey)

Connects your Mapbox API key to the Mapbox GL JS library. Also sets up some module specific things like inserting the Mapbox CSS into Framer. This method is required to be called before using the create method.

Arguments

1. apiKey (String): Your Mapbox API key.

MapboxLayer.create(mapOptions, layerOptions)

Creates a new MapboxLayer.

Arguments

1. mapOptions (Object): Options to pass directly to Mapbox GL JS (See here for full options list).
2. layerOptions (Object): Options to pass to a new Framer Layer (See here for full options list).

Returns

Layer (Object): The newly instantiated Framer Layer. The Mapbox instance is attached to the Layer as the property mapbox.

Tips

1. Making a non-interactive map

MapContainer = MapboxLayer.create({
    center: [-122.356568, 47.638699]
    interactive: false
}, {
    name: 'MapContainer'
    width: 400
    height: 800
})

2. Show Mapbox Attribution

MapContainer = MapboxLayer.create({
    center: [-122.356568, 47.638699]
    attributionControl: true
}, {
    name: 'MapContainer'
    width: 400
    height: 800
})

Example project

Download the example to try it for yourself.

Website: blackpixel.com  ·  GitHub: @bpxl-labs  ·  Twitter: @blackpixel  ·  Medium: @bpxl-craft