ember-maplibre-gl

Ember integration with maplibre-gl-js.

Installation

ember install ember-maplibre-gl

Then, add your MapLibre configuration to config/environment.js:

module.exports = function(environment) {
  let ENV = {
    'maplibre-gl': {},
}

Compatibility

• Ember.js v3.24 or above
• Ember CLI v3.24 or above
• Node.js v12 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:

'maplibre-gl': {
  map: {
    style: 'https://demotiles.maplibre.org/style.json',
    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);
    }
  }
});

{{#maplibre-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}}
{{/maplibre-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