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
The GeoJSON layer To create it and add it to a map, we can use the following code: L. geoJSON(geojsonFeature). addTo(map);
Used to load and display tile layers on the map, implements ILayer interface.
The GeoJsonLayer renders GeoJSON formatted data as polygons, lines and points (circles, icons and/or texts). GeoJsonLayer is a CompositeLayer. See the sub layers that it renders.
Represents a rectangular area in pixel coordinates.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With