ember-leaflet adding features - ember.js

Question

I'am trying to used ember-leaflet (https://github.com/gabesmed/ember-leaflet) on a profile page. The problem is getting the features into the layers. Any suggestion on how I best can add the same coords as in the center function to the "layer".
Tried creating a function in childLayers, that returns a new layer with the coords, but then ember generates an error.
var MarkerLayer =
EmberLeaflet.MarkerLayer.extend(
EmberLeaflet.PopupMixin, {
popupContentBinding: 'content.title'
});
var MarkerCollectionLayer = EmberLeaflet.MarkerCollectionLayer.extend({
contentBinding: 'controller',
itemLayerClass: MarkerLayer
});
var layer = EmberLeaflet.MarkerCollectionLayer.extend({
content: [
{location: L.latLng(63.429722, 10.393333)},
{location: L.latLng(40.721, -73.991)}]});
export default EmberLeaflet.MapView.extend({
latitude: 61,
longitude: 8,
center: function() {
console.log(get(this, 'latitude'));
var latitude = get(this, 'latitude');
var longitude = get(this, 'longitude');
return L.latLng(latitude, longitude);
}.property("latitude", "longitude"),
zoom: 16,
options: {maxZoom: 19, minZoom: 7},
childLayers: [
WMSLayer,
MarkerCollectionLayer,
layer
]
});

Answer 1

I did something like this:
export default EmberLeafletComponent.extend({
center: Ember.computed(function() {
return this.get('coordinates');
}),
/////////////////////////////////////
// PROPERTIES
/////////////////////////////////////
geoJSON: null,
/////////////////////////////////////
// COMPUTED PROPERTIES
/////////////////////////////////////
childLayers: Ember.computed('coordinates', function() {
return [
TileLayer.extend({
tileUrl: 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',
options: {
id: 'scoutforpets.o2ml3nm1',
accessToken: ENV.APP.MAPBOX_KEY
}
}),
MarkerCollectionLayer.extend({
content: [{ location: this.get('coordinates') }]
})
];
}),
coordinates: Ember.computed('geoJSON', function() {
if (this.get('geoJSON')) {
const coordinates = JSON.parse(this.get('geoJSON')).coordinates;
if (coordinates) {
return L.latLng(coordinates[1], coordinates[0]);
}
}
return null;
}),
});
I then use the component as such:
{{leaflet-map geoJSON=coordinates}}
In my case, I pass in a GeoJSON string and the coordinates computed property parses it. When the map calls childLayers it returns the tiles/markers using the parsed coordinates.