I attempted to customize the colors of polygons loaded from a geojson file on Google Maps based on the "population density" data. However, my script failed to execute as intended.
I tried to extract the "population density" information within a loop function and used conditionals to assign colors to each polygon, but encountered an error stating "Cannot read property 'feature' of undefined."
function loadBoundariesFromGeoJson(geo_json_url) {
initializeDataLayer();
$.getJSON(geo_json_url, function (data) {
if (data.type == "FeatureCollection") {
if (data.features) {
for (var i = 0; i < data.features.length; i++) {
var boundary_id = i + 1;
var new_boundary = {};
if (!data.features[i].properties) data.features[i].properties = {};
data.features[i].properties.boundary_id = boundary_id;
data_layer.addGeoJson(data.features[i], { idPropertyName: 'boundary_id' });
new_boundary.feature = data_layer.getFeatureById(boundary_id);
if (data.features[i].properties.name) new_boundary.name = data.features[i].properties.name;
if (data.features[i].properties.popDensity) new_boundary.popDensity = data.features[i].properties.popDensity;
my_boundaries[boundary_id] = new_boundary;
if (data.features[i].properties.popDensity < 500) {
data_layer.overrideStyle(my_boundaries[i].feature, {
fillColor: '#00ff00',
fillOpacity: 0.9
});
} else {
data_layer.overrideStyle(my_boundaries[i].feature, {
fillColor: '#ff0000',
fillOpacity: 0.9
});
}
}
}
}
});
}
I need assistance in resolving this issue. Can anyone provide guidance on how to fix this error?