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:

http://jsfiddle.net/ZkC5M/17/

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