Leaflet map component

app.js

App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend({
  latitude: 0,
  longitude: 0,
  zoom: 1
});

App.LeafletMapComponent = Ember.Component.extend({
  attributeBindings: ['style'],

  width: '600px',
  height: '400px',
  latitude: 0,
  longitude: 0,
  zoom: 1,

  style: function() {
    return [
      'width:' + this.get('width'),
      'height:' + this.get('height')
    ].join(';');
  }.property('width', 'height'),
  
  setView: function() {
    var map    = this.get('map'),
  			center = [this.get('latitude'), this.get('longitude')],
				zoom   = this.get('zoom');

		map.setView(center, zoom);
  }.observes('latitude', 'longitude', 'zoom'),

  didInsertElement: function() {
    var map = L.map(this.get('element'));
    
    this.set('map', map);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    
    this.setView();

    map.on('move', this.mapDidMove, this);

    map.invalidateSize();
  },

  willRemoveElement: function() {
    var map = this.get('map');
    if (map) map.remove();
  },
  
  mapDidMove: function() {
    var map    = this.get('map'),
        center = map.getCenter(),
        zoom   = map.getZoom();

    this.setProperties({
      latitude: center.lat,
      longitude: center.lng,
      zoom: zoom
    });
  }
});

style.css

body {
  padding: 1em;
}

nav {
  margin: 1em 0;
}

nav .active {
  font-weight: bold;
}

templates.hbs

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

<script type="text/x-handlebars">
  <p class="controls">
    Lat: {{input value=latitude size=8}}
    Lon: {{input value=longitude size=8}}
		Zoom: {{input value=zoom size=1}}
  </p>

	{{leaflet-map width="600px"
								height="400px"
								latitude=latitude
								longitude=longitude
								zoom=zoom}}

  <br>
  
  {{leaflet-map width="600px"
							height="400px"
							latitude=latitude
							longitude=longitude
							zoom=zoom}}

</script>

<script type="text/x-handlebars" id="components/leaflet-map">
</script>

@jgwhite Have you confirmed that this works? I'm having some issues: