Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gohypergiant/MapboxLayer
A Framer module for creating powerful Mapbox maps in your prototypes.
https://github.com/gohypergiant/MapboxLayer
Last synced: about 2 months ago
JSON representation
A Framer module for creating powerful Mapbox maps in your prototypes.
- Host: GitHub
- URL: https://github.com/gohypergiant/MapboxLayer
- Owner: gohypergiant
- License: mit
- Created: 2016-07-07T15:23:46.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-02T17:46:14.000Z (about 7 years ago)
- Last Synced: 2024-08-29T21:39:14.434Z (4 months ago)
- Language: CoffeeScript
- Homepage:
- Size: 30.3 KB
- Stars: 20
- Watchers: 17
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-framer - MapboxLayer - Module for creating powerful Mapbox maps in your prototypes. (Modules)
README
# Mapbox Framer Module
[](https://opensource.org/licenses/MIT)
[](.github/CONTRIBUTING.md)
[]()
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:
```coffeescript
# 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](https://www.mapbox.com/mapbox-gl-js/api/#Map)).
2. `layerOptions` _(Object)_: Options to pass to a new Framer Layer ([See here for full options list](http://framerjs.com/docs/#layer.layer)).
**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**
```javascript
MapContainer = MapboxLayer.create({
center: [-122.356568, 47.638699]
interactive: false
}, {
name: 'MapContainer'
width: 400
height: 800
})
```
**2. Show Mapbox Attribution**
```javascript
MapContainer = MapboxLayer.create({
center: [-122.356568, 47.638699]
attributionControl: true
}, {
name: 'MapContainer'
width: 400
height: 800
})
```
### Example project
[Download](https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/bpxl-labs/MapboxLayer/tree/master/example.framer) the example to try it for yourself.
---
Website: [blackpixel.com](https://blackpixel.com) ·
GitHub: [@bpxl-labs](https://github.com/bpxl-labs/) ·
Twitter: [@blackpixel](https://twitter.com/blackpixel) ·
Medium: [@bpxl-craft](https://medium.com/bpxl-craft)