1

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?

  • I have no time for elaboration or a minimal example, but did what you want in jsfiddle.net/5efjxbgv/1. Feel free to lift any code you like from there. Maybe I'll have time for explanations in the future... – til_b Oct 1 '18 at 11:58
0

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 :)

  • thanks for the response, @MaryBeth. I don't believe that it's an issue with the variable type as my first example successfully references feature.properties["12052016"]. Rather, I think the problem has to do with the arguments. When I call teststyle() without any arguments, it works fine, but when I try to pass mylayer and colname manually (teststyle(mylayer, colname) manually, feature.properties[colname] gets the error. – sgilman Jun 3 '16 at 20:24
0

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");
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.