mapbox with markers and checkboxes - disable all from showing on initial load

Question

I have a page I built to display wind direction/velocity in various locations along a bike trail: http://microflush.org/cgi-bin/pathInfo.cgi

I have several markers in a legend, with check boxes to enable/disable them from showing up on the map.

My goal is to have NONE of the checkable markers show up on the initial load. However, when the page is loaded for the first time, ALL show up-- even though they're not checked. If I select 1, they all go away except for the one I selected, which will then disappear if I un-check that box.

Is there a way to make them all be invisible at first, and only show up if they're selected?

(You can view the source of the link above to see the code. I wasn't sure if I should post that all, since it's kinda long with all the points I've added.)

Answer 1

You have a couple errors in your code, one specifically might be your issue.

In the change function you call setFilters (line 79, on Chrome Developer tools) before map has been defined, on line 103. They are also in two different <script> blocks which means variable hoisting doesn't save you/ mask the problem. You need to move this code block to the bottom of all your code, so all your layer are initialised before filtering.

Suggestion:

You might look at using a addLayer/removeLayer instead of masking based upon the marker type. It is more clear what you are doing, and what if you have more than one layer that you want to use the symbol on?

Use the value of your checkboxes to the display status of the layer and use the element id to store the name of the layer.

When it changes, check the value; is it checked or unchecked? If it is checked then, addLayer with the checkboxe's id as the arguement; if the value is unchecked, then removeLayer with element id as the arguement.

I haven't tested this:

function change() {
    // Loop through checkboxes
    for (var i = 0; i < checkboxes.length; i++) {
        // Check to see if the layer needs to be added or removed.
        if (checkboxes[i].checked) {
            map.addLayer(window[checkboxes[i].id]);
        else {
            map.removeLayer(window[checkboxes[i].id]);
        }
    }
}

Now you got rid of a list that just carries around information. Your function is descriptive and concise about what it does.