CODEWITHSUNDEEP
javascriptleaflet
monkut
monkut

Reputation: 43832

How can I set the opacity of a geojson object or layer in leaflet?

I'm trying to apply opacity to a geojson layer in leaflet.js. The documentation seems to show that opacity can be set in the style configuration.

var exteriorStyle = {
    "color": "#ffffff",
    "weight": 0,
    "opacity": 0.99
};

var exteriorMaskLayer = L.geoJson(exteriorMaskGeojsonPoly, {style: exteriorStyle}).addTo(map);

I'd like the object to mask/hide the background map. Here, using exteriorStyle, the color does get applied to the resulting exteriorMaskLayer, and the polygon is displayed.

However, the opacity value appears to be ignored.

I've also tried using the setOpacity() method of the exteriorMaskLayer with no effect.

var exteriorMaskLayer = L.geoJson(exteriorMaskGeojsonPoly, {style: exteriorStyle}).addTo(map);
exteriorMaskLayer.setOpacity(1.0);

How can I set the opacity of a geojson object or layer in leaflet?

using Leaflet-Leaflet-v0.5.1-0-gc1d410f.zip

Upvotes: 10

Views: 28729

Answers (1)

monkut
monkut

Reputation: 43832

I found the answer browsing some of the other leaflet documentation. The style attribute I needed was fillOpacity.

I guess opacity is only applied to the border.
weight, here, turns off the border, so I didn't notice any change.

So this works, applying opacity to the interior of a polygon:

var exteriorStyle = {
    "color": "#ffffff",
    "weight": 0,
    "fillOpacity": .75
};

var exteriorMaskLayer = L.geoJson(exteriorMaskGeojsonPoly, {style: exteriorStyle}).addTo(map);

I couldn't find any docs on the available style attributes.

Upvotes: 25

Related Questions