They're just templates!

That's right. You still get to use all of your template powers. We can render layers, just like we can render anything else. Let's check out some ways to use {{#if}} and {{#each}}.

<p><label>{{input type="checkbox" checked=nightMode}} Night mode</label></p>

{{#leaflet-map lat=lat lng=lng zoom=zoom}}

  {{#if nightMode}}
    {{tile-layer url="https://{s}{z}/{x}/{y}.png"}}
    {{tile-layer url="https://{s}{z}/{x}/{y}.png"}}

  {{#each restaurants as |r|}}
    {{#marker-layer lng=r.lng draggable=true onDragend=(action "updateLocation" r)}}
      {{#popup-layer popupOpen=(readonly r.isOpen)}}
        Rating: {{r.rating}}/5

  {{#polygon-layer locations=dangerZone color="red"}}
    {{#tooltip-layer sticky=true}}


<h3>Portland Restaurants</h3>
  {{#each restaurants as |r|}}
      Lat: {{input}}
      Lng: {{input value=r.lng}}
      <label>{{input type="checkbox" checked=r.isOpen}} Popup open?</label>
export default Ember.Controller.extend({
  lat: 45.528178,
  lng: -122.670059,
  zoom: 14,

  restaurants: Ember.A([
      name: 'Sinju Restaurant',
      rating: 4,
      lat: 45.528531,
      lng: -122.681682
      name: 'Burgerville',
      rating: 3.8,
      lat: 45.530970,
      lng: -122.661968
      name: 'Le Pigeon',
      rating: 4.5,
      lat: 45.522752,
      lng: -122.657979,
      isOpen: true

  dangerZone: Ember.computed('', 'restaurants.@each.lng', function() {
    return this.get('restaurants').map(r => ({lat:, lng: r.lng}));

  actions: {
    updateLocation(r, e) {
      let location =;
      Ember.setProperties(r, {
        lng: location.lng


Portland Restaurants

  • Sinju Restaurant
    Lat: Lng:
  • Burgerville
    Lat: Lng:
  • Le Pigeon
    Lat: Lng:

Try to drag the markers, edit restaurant names and switch "Night mode". Confirm that the data flows normally. All of this is done through normal Ember usage.

Ok, I was going to explain, but I think you can figure this yourself. After all, this is just regular handlebars and Ember. Loops, conditionals, actions, bindings, computed properties, components. "You'll feel at home", that's what was promised. Delivered.