How to Trigger popups in a Real Time App using Meteor and Leaflet
-
19-10-2022 - |
Question
I am trying to set up a way to click through a post to a point on the map. I want to have the same effect as this:
But inside a stream it is a little bit different. The click builds a queue so that when you do click it, it will click through about as many times as posts load. which slows down the app drastically and I am having trouble finding the right function to pinpoint the correct marker.
This is a real time app built with Meteor and using Leaflet:
http://twitter-map.meteor.com/
locStream = new Meteor.Stream('loc');
markers = [];
locStream.on('update', function(data) {
markerIterate++;
// Sets Marker
var marker = L.marker([data.lat, data.lon], {icon: icon}, {title:"marker_" + markerIterate})
.addTo(map)
.bindPopup(contentString)
.on('click', function(e) {widgetFunc()}); // widgetFunc() is set off to trigger the template for twitter
//Creates template for feed twitter view
var feedString =
'<div class="tweet">'+
'<blockquote class="twitter-tweet" lang="en">' +
'<a href="https://twitter.com/' + data.user + '/statuses/' + data.id + '"></a>' +
'</blockquote>' +
'<a class="goTo" id="marker_' + markerIterate + '" href="#">Find on map</a>' +
'</div>';
// Sets tweet into the feed area
$('#feed').append(feedString)
markers.push(marker);
//This is the code that I have been playing with. I got it to work to open only one post.
function markerFunction(id){
var markerID = markers[1].options.title;
if (markerID == id){
markers[1].openPopup();
};
}
// This builds a queue of clicks that slows the app down drastically
$("a").click(function(){
markerFunction($(this)[0].id);
});
});// End Stream
No correct solution
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow