-slniw
Last Updated: February 25, 2016
·
2.931K
· polonski

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.

2 Responses
Add your response

15890

Hi Michal,

Thank you very much for this post. I've been trying something similar in google maps, with no success yet.

Do you know if this approach works in google maps?

Many thanks, joao

over 1 year ago ·
15897

Hi Joao,

As long as you can find a reference to your popup box (maybe use google's infobox-wrapper div class?), you should be able to do the same.

The key is in finding the popup div, and formulating some html (bootstrap), then using Meteor's UI.insert() to render the HTML in the marker popup/infobox.

Hope this helps

Michal

over 1 year ago ·