Awesome
Mapbox Framer Module
<a href="https://open.framermodules.com/mapboxlayer"><img alt="Install with Framer Modules" src="https://www.framermodules.com/assets/badge@2x.png" width='160' height='40' /></a>
<img src="https://cloud.githubusercontent.com/assets/935/16820575/7428881a-4917-11e6-9f6b-6938e0b630a1.png" width="497" >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
apiKey
(String): Your Mapbox API key.
MapboxLayer.create(mapOptions, layerOptions)
Creates a new MapboxLayer.
Arguments
mapOptions
(Object): Options to pass directly to Mapbox GL JS (See here for full options list).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