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 showMarkerPopupContent
função faz a mágica.
Na mapDiv
variável, armazenamos uma referência ao div pop-up do mapa.
A currentData
variá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.insert
envia 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.