https://github.com/kturney/ember-mapbox-gl

Ember integration for Mapbox GL JS
https://github.com/kturney/ember-mapbox-gl

Last synced: 13 days ago
JSON representation

Ember integration for Mapbox GL JS

• Host: GitHub
• URL: https://github.com/kturney/ember-mapbox-gl
• Owner: kturney
• License: mit
• Created: 2017-04-18T21:01:24.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-06-17T19:43:46.000Z (over 1 year ago)
• Last Synced: 2024-09-19T13:50:53.503Z (about 2 months ago)
• Language: JavaScript
• Homepage: https://kturney.github.io/ember-mapbox-gl
• Size: 4.3 MB
• Stars: 34
• Watchers: 5
• Forks: 25
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-maplibre - ember-mapbox-gl - Provides an Ember integration. (Bindings / JavaScript)

README

        
# ember-mapbox-gl

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

[![GitHub Actions Build Status][github-actions-badge]][github-actions-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

[github-actions-badge]: https://github.com/kturney/ember-mapbox-gl/workflows/CI/badge.svg

[github-actions-badge-url]: https://github.com/kturney/ember-mapbox-gl/actions/workflows/ci.yml?query=branch%3Amaster

[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'

    },

}

```

## 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](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`