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
  • {{layers.circle equivalent to {{circle-layer
  • {{layers.circle-marker 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}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"}}

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

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

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

{{input value=r.name}}

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>{{r.name}}</strong><br> Lat: {{input value=r.lat}} 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.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: