Google Maps API - Different opacity for each cell in geoJSON? - google-maps

Question

I have a geoJSON file with over 11 000 polygons. I've calculated some property for each of them and stored it in the geoJSON as a Feature. Is it possible to have the opacity of each cell vary based on the calculated property? Fe. if the property is 1, I'd like the cell to be almost see-through, if it's 6, I want it to be almost solid etc.
EDIT
Ok, so I've gotten around to actually placing the opacity values into the geoJSOn. Now an entry looks like this:
{'geometry': {'coordinates': [[[10.927456267537572, 45.68179119797432],
[10.940290010697588, 45.68157387892596],
[10.939979018768243, 45.67257819153854],
[10.927147329501077, 45.672795442796335],
[10.927456267537572, 45.68179119797432]]],
'type': 'Polygon'},
'id': 1,
'properties': {'cellId': 39},
'style': {'opacity': 0.38888888888888884},
'type': 'Feature'}
This, however, doesn't use the opacity from the JSON. I've tried to implement the solution as:
map.data.setStyle(function(feature) {
var value = feature.getProperty('opacity');
var opacity = value;
return {
fillOpacity: opacity,
strokeWeight: opacity
};
});
which doesn't work, with error Cannot read property 'data' of undefined.

Answer 1

Since you have your polygons in geoJSON format I assume you are using google.maps.Data layer to display them. In that case you can use Declarative style rules to style respective polygons based on value of one of it's properties (see docs for more, look for "Declarative style rules"). So, for example, you would have:
map.data.setStyle(function(feature) {
var value = feature.getProperty('myProperty');
var opacity = value <= 1 ? 0.1 : 1;
return {
fillOpacity: opacity,
strokeWeight: 1
};
});
If you want to have opacity 1 if value of your myProperty is bigger then 1, otherwise 0.1. Of course you can calculate any opacity based on the value, my computation of the opacity from value is just an example.
If this answer won't accommodate all your needs, take a look at this SO answer where I show how you can change styles of individual boundaries (polygons) based on their id.
EDIT
To answer update of your question: First mistake you are making is that you should have styles attribute inside the feature's properties attribute, to be able to access it via feature.getProperty e.g. like this:
{'geometry': {'coordinates': [[[10.927456267537572, 45.68179119797432],
[10.940290010697588, 45.68157387892596],
[10.939979018768243, 45.67257819153854],
[10.927147329501077, 45.672795442796335],
[10.927456267537572, 45.68179119797432]]],
'type': 'Polygon'},
'id': 1,
'properties': {
'cellId': 39,
'style': {'opacity': 0.38888888888888884}
},
'type': 'Feature'}
Then your styling function should look like this:
map.data.setStyle(function(feature) {
var value = feature.getProperty('style');
var opacity = value.opacity;
return {
fillOpacity: opacity
};
});