API.md

API Reference

• ember-maplibre-gl
• ember-maplibre-gl config
• maplibre-gl
• map-source
• map-source-layer
• map-on event
• map-popup
• map-image

ember-maplibre-gl

maplibre-gl-js bindings to Ember. Aims to be a fairly thin wrapper around the MapLibre API.

Using this addon will mostly consist of creating a map (or maps), adding sources of data to the map, adding layers to render the data from the sources, and calling functions on the map to manipulate the camera.

configuration

Add a maplibre-gl entry to ENV.

Properties

Available properties are documented in the maplibre-gl-js#map API.

• map: Optional. Default options for all map instances. Additional options are documented in the maplibre-gl Map docs.
• background: Optional. Default options for all background layers.
• fill: Optional. Default options for all fill layers.
• line: Optional. Default options for all line layers.
• symbol: Optional. Default options for all symbol layers.
• raster: Optional. Default options for all raster layers.
• circle: Optional. Default options for all circle layers.
• fill-extrusion: Optional. Default options for all fill-extrusion layers.
• marker: Optional. Default options for all markers.
• popup: Optional. Default options for all popups.

Example

module.exports = function(environment) {
  const ENV = {
    // other env properties
    'maplibre-gl': {
      map: {
        minZoom: 2,
        maxZoom: 14,
        style: 'https://demotiles.maplibre.org/style.json',
        zoom: 13,
        center: [ -96.7969879, 32.7766642 ]
      },
      marker: {
        offset: [ -1, -1 ]
      },
      popup: {
        offset: [ 0, -10 ]
      }
    }
  };
};

maplibre-gl

Component that creates a new maplibre-gl-js instance.

Properties

• initOptions
  • An options hash to pass on to the maplibre constructor. This is only used during map construction, and updates will have no effect.
• mapLoaded
  • action function to call when the map has finished loading. Note that the component does not yield until the map has loaded, so this is the only way to listen for the maplibre load event.

Example

{{#maplibre-gl initOptions=(hash ...propsHere) mapLoaded=(action 'mapLoaded') as |map|}}
{{/maplibre-gl}}

map-source

Adds a data source to the map. The API matches the maplibre source docs.

Properties

• options
  • An options hash to set as the source.
• options.type
  • A string detailing the map source type. Typically geojson.
• options.data
  • A data hash for the map, following the source.data API detailed by maplibre docs.

Example

{{#maplibre-gl as |map|}}
  {{#map.source options=(hash
    type='geojson'
    data=(hash
      type='FeatureCollection'
      features=(array
        (hash
          type='Feature'
          geometry=(hash
            type='Point'
            coordinates=(array -96.7969879 32.7766642)
          )
        )
      )
    ))}}
  {{/map.source}}
{{/maplibre-gl}}

map-source-layer

Adds a layer to the map. A map can have many layers. The API matches the maplibre layer docs.

Properties

• layer
  • A hash to pass on to the maplibre layer.

Example

{{#maplibre-gl as |map|}}
  {{#map.source options=(hash
    type='geojson'
    data=(hash
      type='FeatureCollection'
      features=(array
        (hash
          type='Feature'
          geometry=(hash
            type='Point'
            coordinates=(array -96.7969879 32.7766642)
          )
        )
      )
    )) as |source|}}
    {{source.layer layer=(hash
        type='circle'
        paint=(hash circle-color='#007cbf' circle-radius=10))}}
  {{/map.source}}
{{/maplibre-gl}}

map-on

Adds an action to listen for maplibre events.

Positional Parameters

• eventSource
  • The first positional parameter. The event type to listen for.
• action
  • The second positional parameter. The action provided by the consumer to call when the event is triggered.

Example

{{#maplibre-gl as |map|}}
  {{map.on 'click' (action 'mapClicked')}}
{{/maplibre-gl}}

import Controller from '@ember/controller';

export default Controller.extend({
  actions: {
    mapClicked({ target: map, point }) {
      console.log(map, point);
    }
  }
});

map-popup

Adds a popup to the map.

Properties

• lngLat
  • The longitude and latitude to pin the popup at.

Example

{{#maplibre-gl as |map|}}
  {{#map.source options=(hash
    type='geojson'
    data=(hash
      type='FeatureCollection'
      features=(array
        (hash
          type='Feature'
          geometry=(hash
            type='Point'
            coordinates=(array -96.7969879 32.7766642)
          )
        )
      )
    )) as |source|}}
    {{source.layer layer=(hash
        type='circle'
        paint=(hash circle-color='#007cbf' circle-radius=10))}}
  {{/map.source}}

  {{#map.popup lngLat=(array -96.7969879 32.7766642)}}
    Dallas, TX
  {{/map.popup}}
{{/maplibre-gl}}

map-image

Adds an image for use in the map, see here.

Properties

• name
  • The unique name for the image. The name will be referenced in a source layer as the icon-image. Reference layers-symbol for more details. Property can also be used as the first positional parameter.
• image
  • The path to your image, typically /assets/<some_image>. Property can also be used as the second positional parameter.
• width
  • The width of the image in pixels.
• height
  • The height of the image in pixels.

Example

{{#maplibre-gl as |map|}}
  {{map.image 'cat' '/assets/cat.png' width=48 height=48}}
  {{!-- `name` and `icon-image` used as positional params above --}}

  {{#map.source options=(hash type='geojson' data=marker) as |source|}}
    {{source.layer layer=(hash
        type='symbol'
        layout=(hash
          icon-image='cat'
          icon-size=0.25))}}
  {{/map.source}}
{{/maplibre-gl}}

import Controller from '@ember/controller';

export default Controller.extend({
  marker: {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [ -96.7969879, 32.7766642 ] }
      }
    ]
  }
});