Contextual components

Contextual components landed in Ember 2.3.0-beta.1, and they make ember-leaflet especially joyful to use. This feature allows a component to {{yield other components to its blocks.

So, {{#leaflet-map as |layers|}} yields the following components to its block:

  • {{layers.tile equivalent to {{tile-layer
  • {{layers.marker equivalent to {{marker-layer
  • {{ equivalent to {{circle-layer
  • {{ equivalent to {{circle-marker-layer
  • {{layers.image equivalent to {{image-layer
  • {{layers.polyline equivalent to {{polyline-layer
  • {{layers.polygon equivalent to {{polygon-layer
  • {{layers.geoJSON equivalent to {{geojson-layer
Also, every component that supports popups and tooltips yields the popup and tooltip components.

If you're using an Ember version later or equal to 2.3.0-beta.1, you should use this feature. Here is an example of what it looks like:

{{#leaflet-map lat=lat lng=lng zoom=zoom as |layers|}}

  {{layers.tile url="https://{s}{z}/{x}/{y}.png"}}

  {{#layers.marker location=emberConfLocation as |marker|}}

The Oregon Convention Center

777 NE Martin Luther King Jr Blvd
Portland, OR 97232 {{/marker.popup}} {{/layers.marker}} {{/leaflet-map}}

Let's revisit the previous example, but now using this feature:

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

{{#leaflet-map lat=lat lng=lng zoom=zoom as |layers|}}

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

  {{#each restaurants as |r|}}
    {{#layers.marker lng=r.lng draggable=true onDragend=(action "updateLocation" r) as |marker|}}


Rating: {{r.rating}}/5 {{/marker.popup}} {{/layers.marker}} {{/each}} {{#layers.polygon locations=dangerZone color="red" as |polygon|}} {{#polygon.tooltip}} DANGER ZONE {{/polygon.tooltip}} {{/layers.polygon}} {{/leaflet-map}} <h3>Portland Restaurants</h3> <ul> {{#each restaurants as |r|}} <li> <strong>{{}}</strong><br> Lat: {{input}} Lng: {{input value=r.lng}} </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.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: