App = Ember.Application.create();
App.CustomCircleLayer = EmberLeaflet.CircleLayer.extend({
optionsBinding: 'content.options'
})
App.CircleCollectionLayer = EmberLeaflet.CollectionLayer.extend({
contentBinding: 'controller',
itemLayerClass: App.CustomCircleLayer
});
App.CustomMarker = EmberLeaflet.MarkerLayer.extend({
options: {
icon: L.AwesomeMarkers.icon({
icon: 'star',
markerColor: 'red',
prefix: 'fa'
})
}
}
);
App.MarkerCollectionLayer = EmberLeaflet.MarkerCollectionLayer.extend({
contentBinding: 'controller',
itemLayerClass: App.CustomMarker
});
App.IndexView =
EmberLeaflet.MapView.extend({
center: L.latLng(40.7189000170401, -73.9944648742675),
zoom: 14,
childLayers: [
EmberLeaflet.DefaultTileLayer,
App.MarkerCollectionLayer,
App.CircleCollectionLayer
]});
App.IndexController = Ember.ArrayController.extend({
content: [
{location: L.latLng(40.714, -74.000), radius: 1000, options: {color: '#000', fillColor: 'red'}},
{location: L.latLng(40.714, -73.989), radius: 300},
{location: L.latLng(40.721, -73.991), radius: 100}]
});
External resources loaded into this fiddle:
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
.leaflet-container {
position: absolute;
top: 0; left: 0; bottom: 0; right:0;
}