https://github.com/allthesignals/ember-mirage-mapbox-example

Temp repo demonstrating a bug
https://github.com/allthesignals/ember-mirage-mapbox-example

Last synced: 11 days ago
JSON representation

Temp repo demonstrating a bug

• Host: GitHub
• URL: https://github.com/allthesignals/ember-mirage-mapbox-example
• Owner: allthesignals
• License: mit
• Created: 2018-05-21T13:32:09.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-05-25T20:40:17.000Z (over 6 years ago)
• Last Synced: 2024-10-11T11:21:33.653Z (about 1 month ago)
• Language: JavaScript
• Size: 647 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# ember-mapbox-gl

[![Latest NPM release][npm-badge]][npm-badge-url]

[![TravisCI Build Status][travis-badge]][travis-badge-url]

[![Ember Observer Score][ember-observer-badge]][ember-observer-url]

[npm-badge]: https://img.shields.io/npm/v/ember-mapbox-gl.svg

[npm-badge-url]: https://www.npmjs.com/package/ember-mapbox-gl

[travis-badge]: https://img.shields.io/travis/kturney/ember-mapbox-gl/master.svg

[travis-badge-url]: https://travis-ci.org/kturney/ember-mapbox-gl

[ember-observer-badge]: http://emberobserver.com/badges/ember-mapbox-gl.svg

[ember-observer-url]: http://emberobserver.com/addons/ember-mapbox-gl

Ember integration with [mapbox-gl-js](https://www.mapbox.com/mapbox-gl-js/api/).

## Installation

```sh

ember install ember-mapbox-gl

```

Then, add your Mapbox access token to `config/environment.js`:

```javascript

module.exports = function(environment) {

  let ENV = {

    'mapbox-gl': {

      accessToken: 'ACCESS TOKEN HERE'

    },

}

```

## API Documentation

See the detailed [API Documentation](API.md).

## Example

Note: The example below uses [ember-composable-helpers](https://github.com/DockYard/ember-composable-helpers).

Add the following map options to `config/environment.js` to style the map, set a default zoom level, and to provide a default centerpoint:

```javascript

'mapbox-gl': {

  accessToken: 'ACCESS TOKEN HERE',

  map: {

    style: 'mapbox://styles/mapbox/basic-v9',

    zoom: 13,

    center: [ -96.7969879, 32.7766642 ]

  }

},

```

```javascript

import Controller from '@ember/controller';

export default Controller.extend({

  marker: {

    type: 'FeatureCollection',

    features: [

      {

        type: 'Feature',

        geometry: { type: 'Point', coordinates: [ -96.7969879, 32.7766642 ] }

      }

    ]

  },

  actions: {

    mapClicked({ target: map, point }) {

      console.log(map, point);

    }

  }

});

```

```handlebars

{{#mapbox-gl class='map-container' initOptions=(hash pitch=30) as |map|}}

  {{map.on 'click' (action 'mapClicked')}}

  {{#map.source options=(hash type='geojson' data=marker) as |source|}}

    {{source.layer layer=(hash

      type='circle'

      paint=(hash circle-color='#007cbf' circle-radius=10))}}

  {{/map.source}}

{{/mapbox-gl}}

```

The above example does the following:

* Creates an instance of a map

* Attaches a `mapClicked` action when anywhere on the map is clicked

* Generates a geojson map source (`marker`)

* Draws a blue circle on the map at the coordinates provided by `marker`