Ember Latest

The latest build of Ember.

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="http://gabesmed.github.io/ember-leaflet/js/lib/leaflet-src.js"></script>
<script src="http://gabesmed.github.io/ember-leaflet/dist/ember-leaflet.js"></script>
<link rel="stylesheet" href="http://gabesmed.github.io/ember-leaflet/css/leaflet.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css">
<link rel="stylesheet" href="http://watson.lennardvoogdt.nl/Leaflet.awesome-markers/dist/leaflet.awesome-markers.css">
<script src="http://watson.lennardvoogdt.nl/Leaflet.awesome-markers/dist/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>

CSS

.leaflet-container {
    position: absolute;
    top: 0; left: 0; bottom: 0; right:0;
}

JavaScript

App = Ember.Application.create();

App.CustomCircleLayer = EmberLeaflet.CircleLayer.extend({
    optionsBinding: 'content.options'
})
App.CircleCollectionLayer = EmberLeaflet.CollectionLayer.extend({
  contentBinding: 'controller',
  itemLayerClass: App.CustomCircleLayer
});

App.MarkerCollectionLayer = EmberLeaflet.MarkerCollectionLayer.extend({
  contentBinding: 'controller'
});




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}]
 });