Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ember map cli test not working
import Ember from 'ember';
export default Ember.Controller.extend({
appName:'Ember Twiddle',
coords: ["-26.2041028", "28.0473051"]
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{#mapbox-map mapId='constantlm.jgnjpdom' as |map|}}
{{mapbox-marker map=map coordinates=coords}}
{{/mapbox-map}}
{{outlet}}
<br>
<br>
<style>
.leaflet-container {
width:500px;
height:200px;
}
</style>
import Ember from 'ember';
export default Ember.Component.extend({
// layout: layout,
divId: 'map',
mapId: 'constantlm.jgnjpdom',
setup: Ember.on('didInsertElement', function() {
console.log('map compontent init');
L.mapbox.accessToken = 'pk.eyJ1IjoiY29uc3RhbnRsbSIsImEiOiJ0T2tHUkNzIn0.SKg5CmGQwvgjTqwPr8Ua1Q';
let map = L.mapbox.map(this.get('divId'), this.get('mapId'));
if (this.get('center') && this.get('zoom')) {
map.setView(this.get('center'), this.get('zoom'));
}
this.set('map', map);
}),
});
<div id={{divId}} />
{{yield map}}
import Ember from 'ember';
export default Ember.Component.extend({
symbol: '',
color: '#444444',
marker: null,
setup: Ember.on('didInsertElement', function() {
console.log('marker inserted');
L.mapbox.accessToken = 'pk.eyJ1IjoiY29uc3RhbnRsbSIsImEiOiJ0T2tHUkNzIn0.SKg5CmGQwvgjTqwPr8Ua1Q';
let marker = L.marker(this.get('coordinates'), {
icon: L.mapbox.marker.icon({
'marker-color': this.get('color'),
'marker-size': this.get('size'),
'marker-symbol': this.get('symbol'),
}),
});
marker.bindPopup(this.get('popup-title'));
marker.addTo(this.get('map'));
marker.on('click', () => {
this.sendAction('onclick');
});
this.set('marker', marker);
}),
teardown: Ember.on('willDestroyElement', function() {
let marker = this.get('marker');
let map = this.get('map');
if (map && marker) {
map.removeLayer(marker);
}
}),
popup: Ember.on('didRender', function() {
if (this.get('is-open')) {
this.get('marker').openPopup();
}
}),
});
{
"version": "0.4.11",
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"mapbox": "https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js",
"mapbox-css": "https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css",
"ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember.debug.js",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.11/ember-data.js",
"ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember-template-compiler.js"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment