Leaflet: Change displayed column on click

Question

I have a GeoJSON layer in a Leaflet map showing buildings. The columns of the buildings layer contain electricity usage info by date (eg., the column 12052015 contains electricity usage on Dec 5, 2015). I'm trying to make a button that will style the layer based on a different column.

Edit: here's where I define the GeoJSON layer from an AJAX request:

   var mylayer = L.geoJson(data, {style:style, onEachFeature: onEachFeature}).addTo(map, mapStyle);

So far, this works:

    $('#clicker').click(function () {
            mylayer.setStyle(teststyle());
    });



    function teststyle(feature) { 

        return { 
            fillColor: getColor(feature.properties["12052015"]),
            weight: 2, 
            opacity: 1, 
            color: 'white', 
            dashArray: '3', 
            fillOpacity: 0.7
        }; 
    }

But what I really want to do is pass the name of the new column as an argument, something similar to this example:

        $('#clicker').click(function () {
            mylayer.setStyle(teststyle(mylayer, "01052016"));
    });



    function teststyle(feature, colname) { 

        return { 
            fillColor: getColor(feature.properties[colname]),
            weight: 2, 
            opacity: 1, 
            color: 'white', 
            dashArray: '3', 
            fillOpacity: 0.7
        }; 
    }

When I do this, however, I get this console error: "Uncaught TypeError: Cannot read property '12/10/2015' of undefined".

Anyone know why I'm having trouble passing in the feature argument?

Answer 1

In your "working" code, you are missing the argument in teststyle() call. That may be just a typo? I guess you meant just teststyle (without parenthesis), i.e. just pass a reference to the function, not to its result after execution.

In your example code, the teststyle function expects a feature (typically from an L.geoJson layer group) in order to read its properties member/property.

But you are passing myLayer, which looks to be your L.geoJson layer group itself, which does not have the properties member.

So in fact you need to build an anonymous function so that you can "customize" your teststyle function in order to use a specific column:

mylayer.setStyle(function (feature) {
    return teststyle(feature, "12052015");
});

Answer 2

Based on the error, it appears that there is an issue with the variable type or referencing the variable.

You may want to see this SO Q&A: JavaScript - Uncaught TypeError: Cannot read property 'search' of undefined The OP was able to troubleshoot based on one of the answers and found that using string() instead of toString() worked for them.

i used String() instead of .toString()

Your mileage may vary, of course, but I would look into how your variable is stored. String? Date? And use some of the testing in the post I referenced above.

Also, it would be helpful to have your variable definitions in your original post to help with troubleshooting :)