CODEWITHSUNDEEP
javascriptmongodbgoogle-mapsmeteordata-visualization
Captainslow
Captainslow

Reputation: 25

Meteor and Populating an Array with Values

I'm playing around with Meteor and I'm having trouble trying to wrap my head around a few concepts. One of the issues I'm currently dealing with is I'm trying to build a dynamic heat map using Google and Meteor. I've got an external to Meteor Mongo database (i.e. not the local MongoDB that Meteor provisions) located on my computer and within the database I've got a collection that has many documents, each document has a latitude value and a longitude value.

The problem I've having right now is that when I try and parse through the result set of the find() on my collection it's not getting populated and therefore my heatmap values aren't being drawn onto the screen. However, when I run the same command on the console I can get results. I figure the code and the data retrival running at the same time and one is beating out the other.

//Global scope
DestinationCollection = new Meteor.Collection("Destinations");
destinations = DestinationCollection.find();

if (Meteor.isClient) {

    Template.searchMap.rendered = function () {

        var airportData = [];
        var mapOptions = {
            zoom: 3,
            center: new google.maps.LatLng(45.4158, -89.2673),
            mapTypeId: google.maps.MapTypeId.HYBRID,
            mapTypeControl: false,
            panControl: false,
            streetViewControl: false
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var airportArray = new google.maps.MVCArray([]);

        destinations.forEach(function(destination){
            airportArray.push(new google.maps.LatLng(destination.Geolocation.Latitude, destination.Geolocation.Longitude));
        });

       var heatmap = new google.maps.visualization.HeatmapLayer({
            data: airportArray,
            radius: 20
        });
        heatmap.setMap(map);
    };
}

The only solution I've come up with is to wrap the destinations.forEach with Deps.autorun:

Deps.autorun(function(){
     destinations.forEach(function(destination) {
         airportArray.push(new google.maps.LatLng(destination.Geolocation.Latitude, destination.Geolocation.Longitude));
         });
});

This works but whenever I add a new document to the collection the count doubles and increases by 1. For example, if I had 10 items and I added 1 more to the collection the MVCArray would have 21 array elements rather than just 11.

Long story short, what is the proper way to get a collection, parse through a local collection initially and then only get the new value that was added to the collection rather than the entire thing again.

Upvotes: 1

Views: 304

Answers (1)

Geoffrey Booth
Geoffrey Booth

Reputation: 7366

Look into observe or observeChanges (docs) rather than Deps.autorun:

destinations.observe({
  added: function (doc) {
    airportArray.push(new google.maps.LatLng(doc.Geolocation.Latitude, 
      doc.Geolocation.Longitude));
    // Add code to refresh heat map with the updated airportArray
  }
});

Upvotes: 1

Related Questions