Raphael/Mapael slow on sorting plots

Question

I'm using Raphael and Mapael to create a US map with points of different schools across the nation.

Right now the functionality is working great if I only have a handful of points, however after I add all of my points (around 60) it slows way down when I click the different legend buttons to sort the points into different divisions.

I needed to rework a bit of the click events code to get it to do what I wanted with sorting while using meteor, these are my click events:

Template.map.events({
    'click .division1': function(event,tmp){
        if(event.currentTarget){
            var plot = Session.get('propertyMap');
            _.each(plot,function(data, key){
                if(data.type !== 'D1'){
                    var deletedPlots = [key];
                    var updatedOptions = [];
                    var newPlots = {};
                    tmp.$(".container2").trigger('update', [updatedOptions, newPlots, deletedPlots]);
                }
                else if(data.type === 'D1'){
                    var deletedPlots = [key];
                    var updatedOptions = [];
                    var newPlots = {};
                    newPlots[key] = data;
                    tmp.$(".container2").trigger('update', [updatedOptions, newPlots, deletedPlots]);
                }
            });
        }
    },
    'click .division2': function(event,tmp){
        if(event.currentTarget){
            var plot = Session.get('propertyMap');
            _.each(plot,function(data, key){
                if(data.type !== 'D2'){
                    var deletedPlots = [key];
                    var updatedOptions = [];
                    var newPlots = {};
                    tmp.$(".container2").trigger('update', [updatedOptions, newPlots, deletedPlots]);
                }
                else if(data.type === 'D2'){
                    var newPlots = {};
                    newPlots[key] = data;
                    tmp.$(".container2").trigger('update', [updatedOptions, newPlots, deletedPlots]);
                }
            });
        }
    },
    'click .division3': function(event,tmp){
        if(event.currentTarget){
            var plot = Session.get('propertyMap');
            _.each(plot,function(data, key){
                if(data.type !== 'D3'){
                    var deletedPlots = [key];
                    var updatedOptions = [];
                    var newPlots = [];
                    tmp.$(".container2").trigger('update', [updatedOptions, newPlots, deletedPlots]);
                }
                else if(data.type === 'D3'){
                    var newPlots = {};
                    newPlots[key] = data;
                    tmp.$(".container2").trigger('update', [updatedOptions, newPlots, deletedPlots]);
                }
            });
        }
    },
    'click .AllProperties': function(event,tmp){
        event.preventDefault();
        if(event.currentTarget){
            var deletedPlots = [];
            var updatedOptions = [];
            var newPlots = Session.get('propertyMap');
            tmp.$(".container2").trigger('update', [updatedOptions, newPlots, deletedPlots]);
        }
    }

I also have the latest version sitting on embassyofrock.com.

My question is if anyone has an idea of why it takes the extra couple seconds to sort the plots, and if there is a solution to make it run faster? You might notice that clicking all schools re-adds the plots instantly which is what I would like the others to do as well.

Answer 1

I am not familiar with Raphael and Mapael but I see a lot of iterations in your code and you seems to work with local array variables.

If you load your items from something else than a meteor publication, you should try to use a minimongo local collection to store your points and their related data.

You can declare it like this:

var Plots = new Meteor.Collection(null);

And fill it like this:

for (var i = 0; i < plotList.length; i++) {
    Plots .insert(plotList[i]);
}

You will then be able to update everything using mongo command and I assume it should be faster.

If you are using a meteor publication, it means you already have a local version of the original collection, and you should work directly with it.