Ember integration with mapbox-gl-js.
ember install ember-mapbox-glThen, add your Mapbox access token to config/environment.js:
module.exports = function(environment) {
let ENV = {
'mapbox-gl': {
accessToken: 'ACCESS TOKEN HERE'
},
}- Ember.js v3.24 or above
- Ember CLI v3.24 or above
- Node.js v12 or above
See the detailed API Documentation.
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);
}
}
});The above example does the following:
- Creates an instance of a map
- Attaches a
mapClickedaction 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
![https://api.mapbox.com/styles/v1/mapbox/dark-v9/[email protected]?access_token=pk.eyJ1IjoibWF0dGdhcmRuZXJueWMiLCJhIjoiY2o4NTk2dTlzMGFjZDMydWRtY3NsYnFjZSJ9.lA_A4IHM2EGToFiPKFzSug](https://api.mapbox.com/styles/v1/mapbox/dark-v9/sprite@2x.png?access_token=pk.eyJ1IjoibWF0dGdhcmRuZXJueWMiLCJhIjoiY2o4NTk2dTlzMGFjZDMydWRtY3NsYnFjZSJ9.lA_A4IHM2EGToFiPKFzSug){kind=link}