https://github.com/kennstenicht/ember-cli-mapbox-gl

https://github.com/kennstenicht/ember-cli-mapbox-gl

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/kennstenicht/ember-cli-mapbox-gl
• Owner: kennstenicht
• License: mit
• Created: 2015-09-18T09:19:31.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-11-25T19:56:08.000Z (about 8 years ago)
• Last Synced: 2024-10-11T11:18:42.169Z (3 months ago)
• Language: JavaScript
• Size: 16.6 KB
• Stars: 5
• Watchers: 5
• Forks: 6
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Ember-cli-mapbox-gl

Ember CLI addon to integrate Mapbox GL and add a componentn mixin

## Installation

```

ember install ember-cli-mapbox-gl

```

## Setup

changing contentSecurityPolicy:

* add `*.mapbox.com` to img-src and connect-src

* add `blob:` to child-src

```js

// config/enviroment.js

contentSecurityPolicy: {

	'img-src': "'self' data: *.mapbox.com",

	'child-src': "blob:",

	'connect-src': "'self' *.mapbox.com"

}

```

Add your Mapbox access token to config/environment.js:

```js

// config/environment.js

mapbox: {

  accessToken: 'accessToken',

}

```

## Usage

Create a new Component: `ember g component mapbox-map`

```js

// app/component/mapbox-map

import Ember from 'ember';

//import mapbox-gl mixin

import MapboxGl from 'ember-cli-mapbox-gl/mixins/mapbox-gl';

export default Ember.Component.extend(MapboxGl, {

  // define default map settings

  mapSettings: {

    style: "mapbox://styles/mapbox/dark-v8",

    lat: 52.520007,

    lng: 13.404954,

    zoom: 12,

    interactive: true

  }

  useMapboxFunctions: function() {

    // this.get('map') returns the map object

    this.get('map').getZoom();

  }

});

```