ember-mapbox-gl

Ember integration with mapbox-gl-js.

Installation

ember install @prysmex-engineering/ember-mapbox-gl

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

module.exports = function(environment) {
  let ENV = {
    'mapbox-gl': {
      accessToken: 'ACCESS TOKEN HERE'
    },
}

Compatibility

• Ember.js v3.24 or above
• Ember CLI v3.24 or above
• Node.js v18 or above

API Documentation

See the detailed API Documentation.

Example

Note: The example below uses 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:

'mapbox-gl': {
  accessToken: 'ACCESS TOKEN HERE',
  map: {
    style: 'mapbox://styles/mapbox/basic-v9',
    zoom: 13,
    center: [ -96.7969879, 32.7766642 ]
  }
},

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);
    }
  }
});

{{#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