Insira o conteúdo de bootstrap renderizado em um pop-up de marcador de folheto usando o Meteor.

Montar um site baseado em Folheto ( Link ) junto com bootstrap-3 ( Link ) dentro do Meteor é um prazer. A natureza reativa do Meteoro fornece um poder a ser aproveitado para o bem ou para o mal. Como tal, colocar conteúdo de modelo reativo dentro de um pop-up de marcador de folheto foi algo que achei que mostraria um brilho desse poder. A ideia de dados ‘ao vivo’ sendo exibidos na janela pop-up de cada marcador para monitorar suas métricas atuais fornece uma base incrível para alguns aplicativos baseados em mapas legais.

Para conseguir isso, iniciei o projeto e adicionei um modelo com a classe de painel do bootstrap.

<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>

Quando um marcador adicionado é pressionado, ele passa o marcador e a referência de consulta a uma função:

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

Esta showMarkerPopupContentfunção faz a mágica.

Na mapDivvariável, armazenamos uma referência ao div pop-up do mapa.

A currentDatavariável contém uma matriz de valores encontrados de uma coleção. Neste caso, vamos apenas mostrar o primeiro elemento da matriz no pop-up do marcador.

O UI.insertenvia o template bootstrap-3 renderizado, junto com alguns dados da coleção para o div pop-up do marcador.

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();
}   

Agora todas as vantagens do bootstrap-3 podem ser usadas dentro de um pop-up de marcador de folheto.

Abençoe.