Nine Pedestrians Mesmerized

    ember-mapbox-gl

    2.0.0 • Public • Published

    ember-mapbox-gl

    Latest NPM release GitHub Actions Build Status Ember Observer Score

    Ember integration with mapbox-gl-js.

    Installation

    ember install 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 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:

    '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

    Keywords

    Install

    npm i ember-mapbox-gl

    DownloadsWeekly Downloads

    274

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    41.4 kB

    Total Files

    34

    Last publish

    Collaborators

    • kturney