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