I've been experimenting with Meteor and struggling to comprehend certain concepts. One challenge I'm facing is creating a dynamic heat map with Google and Meteor. I have an external Mongo database connected to Meteor (not the local MongoDB), containing a collection of documents with latitude and longitude values.
The issue at hand is that when I try to loop through the results of my collection's find() method, the heatmap values are not being displayed on the screen. However, running the same command in the console returns results. It seems like there is a conflict between the code execution and data retrieval timing.
//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);
};
}
To address this issue, I had 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));
});
});
Although this solution works, it causes the array to double in size each time a new document is added to the collection. For instance, if I had 10 items and added 1 more, the MVCArray would contain 21 elements instead of just 11.
In essence, I'm seeking guidance on the correct approach to retrieve a collection, initially parse through the local collection, and then only fetch the newly added value rather than the entire collection repeatedly.