CODEWITHSUNDEEP
cssgoogle-mapsgeojson
Daniil Shevelev
Daniil Shevelev

Reputation: 12027

Google Maps GeoJson styling

I am trying to set styling on each polygon, particularly fill color. I know I can do this:

map.data.loadGeoJson('http://localhost:8080/my.json');
map.data.setStyle({    
   fillColor: 'red'
});

But I want to set fill color on polygons separately. I tried setting following this answer on GIS Stack, but it does not work:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {                
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                  [
                    [
                      -80.4545,
                      43.5061
                    ]
                ]
              ]
            },
            "style":{
                "fill":"red",
                "stroke-weight": "1",
                "stroke-width":"3",
                "fill-opacity":"0.6"
            }
        }
    ]
}

I hope it is possible to set styling on individual polygons and not the whole data.

Upvotes: 5

Views: 4129

Answers (1)

Daniil Shevelev
Daniil Shevelev

Reputation: 12027

Turns out it is possible to assign style using a function:

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

Upvotes: 7

Related Questions