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?