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}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png"}}
  {{else}}
    {{tile-layer url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"}}
  {{/if}}

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

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

{{/leaflet-map}}

<h3>Portland Restaurants</h3>
<ul>
  {{#each restaurants as |r|}}
    <li>
      <strong>{{r.name}}</strong><br>
      Lat: {{input value=r.lat}}
      Lng: {{input value=r.lng}}
      <label>{{input type="checkbox" checked=r.isOpen}} Popup open?</label>
    </li>
  {{/each}}
</ul>
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.lat', 'restaurants.@each.lng', function() {
    return this.get('restaurants').map(r => ({lat: r.lat, lng: r.lng}));
  }),

  actions: {
    updateLocation(r, e) {
      let location = e.target.getLatLng();
      Ember.setProperties(r, {
        lat: location.lat,
        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.