Filter Google Map markers with multiple [and intersecting] check boxes

Question

I can't make my multiple-check-box filtering system to work. I'll explain the problem, the research I've done here on stackoverflow, and why I still need help after that.

My problem is that my check boxes can't bring back the markers when I gradually unselect them. These said filters work well when I click them, because they incrementally fade away the markers associated with them. However, after just unselecting a couple of these checkboxes, all the markers are back on screen, and the last boxes don't do anything when they are finally unclicked.

This is the temporary URL of the project: http://www.lcc.gatech.edu/~amartell6/php/main12.php

This is the code where I'm getting stuck:

//this getJson function exists within an init funciton where a map 
//has already been called
$.getJSON(theUrl,function(result){



    $.each(result, function(i, item){

        //get Longitude
        var latCoord = item.coordinate;
        var parenthCoord = latCoord.indexOf(",");
        var partiaLat = latCoord.substr(1,parenthCoord-1);
        var lat = parseFloat(partiaLat);
        //alert(lat);

        //get Latitude
        var lngCoord = item.coordinate;
        var commaCoord = lngCoord.indexOf(",");
        var partiaLng = lngCoord.substr(commaCoord+1);
        var lng = parseFloat(partiaLng);
        //alert(lng);


        // display ALL the story markers
        var storyMarker;
        storyMarker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),// ----- > whithin the mutidimentional array, 
            map: map
        });


        //display the stories by clicking on the markers
        google.maps.event.addListener(storyMarker, 'click', function() {
            var from = "From ";
            if(item.end_date != ""){
                item.end_date = " to " + item.end_date;
            }
            else{
                from = "";
            }

            $('#output').html(
                '<p><span class="selected">Type of Entry: </span>' + 
                item.entry_type + ' <br/><br/>'+
                '<span class="selected">Title: </span>'+ item.entry_title + '<br/><br/>' +
                '<span class="selected">Date(s):</span><br/>'+ from +item.start_date+
                //' to '+item.end_date+'<br/><br/>'+
                item.end_date+'<br/><br/>'+
                '<span class="selected">Content:</span><br/><br/> '+ item.entry 
                +'</p>'
            );
        });// end of story displays


        //call filters from filter funciton
        filter('#evacuation-filter',item.evacuation,"Yes");
        filter('#evacuation-order-filter',item.evacuation_order,"Yes");
        filter('#w-nearby-filter',item.w_nearby,"Yes");
        filter('#hurricane-reached-filter',item.hurricane_reached,"Yes");
        filter('#outdoors-filter',item.in_out_doors,"Outdoors Most of the Time");
        filter('#indoors-filter',item.in_out_doors,"Indoors Most of the Time");
        filter('#food-filter',item.food,"Yes");
        filter('#windows-filter',item.windows,"Yes");
        filter('#power-filter',item.power,"Yes");
        filter('#wounded-filter',item.wounded,"Yes");
        filter('#looting-filter',item.looting,"Yes");
        filter('#blackouts-filter',item.blackouts,"Yes");
        filter('#trees-filter',item.trees,"Yes");
        filter('#powerlines-filter',item.powerlines,"Yes");
        filter('#light-filter',item.light,"Yes");
        filter('#sidewalks-filter',item.sidewalks,"Yes");
        filter('#buildings-filter',item.buildings,"Yes");
        filter('#flooding-filter',item.flooding,"Yes");


        //FILTER FUNCTION
        //first parameter is the checkbox id, the second is the filter criteria
        //(the filter function has to be called within the $.each loop to be within scope)

        var otherFilter = false;

        function filter(id, criterion1, value){

            var activeFilters = [];

            $(id).change(function() {
                //evalute if the checkbox has been "checked" or "unchecked"
                var checkBoxVal = $(id).attr("checked");

                //if it's been checked:
                if(checkBoxVal=="checked"){
                    //1 - Get markers that don't talk about the filter
                    if(criterion1!=value && storyMarker.getVisible()==true){
                        //2 - fade them away, and leave only those meet the criteria
                        storyMarker.setVisible(false); 
                        otherFilter = true;
                        activeFilters.push(criterion1);
                        //document.getElementById("text3").innerHTML=activeFilters+"<br/>";
                        //alert(activeFilters.push(criterion1) +","+criterion1.length);
                    }
                }
                //if it's been unchecked:
                else if(checkBoxVal==undefined){
                    //1 - Get markers that don't talk about the filter
                    if(criterion1!=value && storyMarker.getVisible()==false){
                        //2 - Show them again
                        storyMarker.setVisible(true);
                        otherFilter = false;
                        activeFilters.pop(criterion1);
                        //alert(activeFilters.pop(criterion1) +","+criterion1.length);
                    } //end of if to cancel filter and bring markers and stories back
                }

            }); // end of change event

        } // end of filter function


        //var otherDropDown = false;
        filter2("#media-filter",item.media);
        filter2("#authorities-filter",item.authorities);

        //---------------

        function filter2(id2,criterion2){

            $(id2).change(function() {
                //get the value of the drowpdown menu based on its id
                var dropDownVal = $(id2).attr("value");
                var all="All";
                //if the value isn't "All", other filters have not been applied, and marker is on screen
                if(dropDownVal!=all && otherFilter==false){
                    //1 - check if the marker doesn't comply with filter
                    if(criterion2!=dropDownVal){
                        //2 - fade them away if not, and leave only those meet the criteria
                        storyMarker.setVisible(false);
                    //3 - If the marker does comply with it
                    }else if(criterion2==dropDownVal){
                        //4 - keep it there
                        storyMarker.setVisible(true);
                    }//end of filter applier
                //else if if the value IS "All", filters have not been applied, and marker is faded
                }else if(dropDownVal==all && otherFilter==false){
                    //select all the possible values for the cirterion
                    if(criterion2!=undefined){
                        //and show all those markers
                        storyMarker.setVisible(true);
                    }
                }
            }); 
        }   //end of function filter2



    }); // end of $.each
}); // end of $.getJSON

I found one related blog post. This one suggests adding a category to the markers. However, when I do that, the filters keep working the same way. I think this happens because each filter is programmed to hide every single marker that meets their selecting criteria, but each marker has more than one property they can be filtered with.

Do you know if there is a way to make the script detect how many filters point towards the same marker, and only show it back if no filters are pointing at it? This is my guess on how to solve it, even though I don't know how to make it happen in code.

Finally, if you know of alternate ways to make the filters work, let me know.

Answer 1

Erik already provided a solution to my problem. However, I think the community may benefit from reading other options, and I want to share the solution I came up with. Even if it may not be the most effective, it works.

In the code I just mentioned, I declared all the storyMarkers at once when the map initializes:

        // display ALL the story markers
        var storyMarker;
        storyMarker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),// ----- > whithin the mutidimentional array, 
            map: map
        });

Now, I added a new argument to the markers, but instead of creating a variable as in the example I had found in other post, this argument was an empty array:

storyMarker.pointer = [];

The previous filter function had three levels. The first level detected a change in the check box. The second one verified whether the check box had been checked or unchecked. The third level ran the filter on e-v-e-r-y marker, either to show it or hide it.

This is where my solution began. Within the most inner if statement of the filter function, I added a discretionary element within the pointer array:

storyMarker.pointer.push("element");

Right after this, I nested a new if statement to check if the array is not empty. If it indeed isn't empty, the program hides the marker that this array belongs to.

The program inverses the logic when a box is unchecked. It calls-off the filter, subtracts one element from the array associated with that marker, and then checks if there are other markers associated with it. The system now only shows up markers whose arrays are empty.

//alert(storyMarker.pointer);
        function filter(id,criterion,value){
            $(id).change(function() {
                var checkBoxVal = $(id).attr("checked");
                if(checkBoxVal=="checked"){
                    if(criterion!=value){
                        storyMarker.pointer.push("element");
                        //alert("array length: "+storyMarker.pointer.length);
                        if(storyMarker.pointer.length>0){
                            storyMarker.setVisible(false);
                        }
                    }
                }
                else if(checkBoxVal!="checked"){
                    if(criterion!=value){
                        storyMarker.pointer.pop("element");
                        //alert("array length: "+storyMarker.pointer.length);
                        if(storyMarker.pointer.length<=0){
                            storyMarker.setVisible(true);
                        }
                    }
                }
            });
        }

In summary, the script is still clicking a marker more multiple times if the user clicks on more than one marker. The system can now recognize how many times is one marker pointed out, and only show the one that has no pointers at all.

Answer 2

I created an application with similar logic several years ago http://www.ioos.gov/catalog/ But it was for GMap 2.0 but I think the logic would be the same. My approach was to extend the Google maps Marker object (already bloated) with features I wanted to filter them on. These would be all the properties you're storing in your 'click' listener and perhaps more: e.g. item.title, item_start_date, etc. whatever you eventually want to filter your marker by.

var all_markers = [];
storyMarker.end_date = item.end_date;
storMarker.title = item.title;
...
all_markers.push(storyMarker);

Then when you want to filter loop thru all the markers, check the marker value against the filter condition and setVisible(true) or false as need.