1

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.

lte__
  • 7,175
  • 25
  • 74
  • 131

1 Answers1

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
    };
});
Community
  • 1
  • 1
Matej P.
  • 5,303
  • 1
  • 28
  • 44
  • Does this function work for an individual polygon, or for all of them? Doesn't `map.data.setStyle` apply to the whole map? – lte__ Nov 13 '16 at 14:54
  • 1
    Yes it applies to all polygons, but the color is based on property value, and from your question it sounds like that what you want. It's also possible to color individual polygons, using `map.data.overrideStyle()` function, and that allows you to color only selected feature. But you need to get reference to the feature somehow, that's what I do in the referenced SO answer. – Matej P. Nov 13 '16 at 15:46
  • I just got around to continue working on this. In `map.data.setStyle(function(feature)` what exactly is the `feature` varible? I want to read the opacity value from the geoJSON itself. – lte__ Nov 15 '16 at 21:16
  • Btw I don't want EVERY cell to have the same opcaity, I want EACH cell to have a DIFFERENT opacity, as described by "Is it possible to have the opacity of each cell vary based on the calculated property?" in the question. – lte__ Nov 15 '16 at 21:27
  • I have added an update to my answer. Both my answers cover having "EACH cell to have a DIFFERENT opacity". – Matej P. Nov 15 '16 at 22:03