Accessing template block programmatically from component

1

I’m building several maps that plot different kinds of points. Each map takes one kind of point, but there are multiple maps. I’d like to customize the map pin popup per usage of the component. e.g. I’d like to be able to do this:

{{#map-plot features=pizzaPlaces}}
  <b>Best Slice: {{bestSlice}}</b>
{{/map-plot}}

{{#map-plot features=icecreamPlaces}}
  <b>Best Cone: {{bestCone}}</b>
{{/map-plot}}

And have the block passed to the component be used as the popup template. As best as I can tell, this would be referenced in didInsertElement somewhere.

Here’s what I have so far…

# components/map-plot.js
import config from '../config/environment';
export default Ember.Component.extend({
    didInsertElement: function() {
        L.mapbox.accessToken = config.secrets.mapboxAccessToken;
        var map = L.mapbox.map('map', 'mapbox.streets').
            setView([44.5,-118], 11);

        // we'll put all the markers in one layer
        var markerLayer = L.mapbox.featureLayer();

        var features = this.get('features');
        var markers = _.map(features, function(feature) {
            var id = feature.get('id');
            var marker =  L.marker([feature.get('latitude'), feature.get('longitude')]);

            // FIXME I'd like to reference the block here, using `feature` as the context
            marker.bindPopup('<a href="' + '/spots/' + id +'">Spot '+ id +'</a>');
            return marker
        });

        _.each(markers, function(marker) {
            marker.addTo(markerLayer);
        });
        markerLayer.addTo(map);
    }
});

And the template

# templates/components/map-plot.hbs
<div id='map'>
</div>

<script id='marker-template' type='text/x-handlebars'>
  <!-- marker template is passed in as a block -->
  {{yield}}
</script>
2

The issue here is that the map lives out of your Ember app.

Though I can’t tell for sure, maybe it’s a good job for ember-wormhole GitHub - yapplabs/ember-wormhole: Render a child view somewhere else in the DOM..

It’s worth looking, at least :smile: