Insert rendered bootstrap content into a leaflet marker popup using Meteor.

Stitching together a Leaflet (Link) based site together with bootstrap-3 (Link) inside Meteor is a pleasure. Reactive nature of Meteor provides a power to be harnessed for good or evil. As such, placing reactive template content inside a Leaflet marker popup was something I thought would show a sparkle of this power. The idea of 'live' data being displayed in each marker's popup window to monitor their current metrics provides an awesome basis for some cool map-based apps.

To achieve this, I fired up a the project and added a template with bootstrap's 'panel class.

<template name="ViewSomeData">
    <div class="panel panel-default">
        <div class="panel-heading">
                        <h2 class="panel-title">{{name}}</h2>
        </div>
        <div class="panel-body">   
            <div class="row">       
                <div class="caption">
                      <p><b>Current Count: </b>{{count}}</p>
                      <p><a href="#" class="btn btn-default">Close</a></p>
                </div>
            </div>
        </div>
    </div>
</template>

When an added marker is pressed, it passes marker and query reference to a function:

query.observe({
      added: function(mark) { 
             var locationMark=L.geoJson(mark).addTo(window.map);
             locationMark.on('click', function(e) {
                      showMarkerPopupContent(mark,this);
                   });
       }
});

This showMarkerPopupContent function does the magic.

In the mapDiv variable we store a reference to the map popup div.

The currentData variable holds an array of found values from a Collection. In this case we're just going to show the first element of the array in the marker popup.

The UI.insert sends the rendered bootstrap-3 template, together with some data from the Collection to the marker's popup div.

function showMarkerPopupContent(mark,marker)
{
       var mapDiv =  L.DomUtil.create("div","lbqs");
       var currentData = MyCollection.find().fetch();
       UI.insert(
                 UI.renderWithData(
                        Template.ViewSomeData,
                         {
                             name:currentData[0].name,
                          }), 
                        mapDiv);
        }
        marker.bindPopup(mapDiv).openPopup();
}   

Now all the goodness of bootstrap-3 can be used inside a Leaflet marker popup.

Bless.