Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 492
monkut Avatar asked Apr 24 '13 02:04

monkut


People also ask

How do you add a GeoJSON layer to a Leaflet?

The GeoJSON layer To create it and add it to a map, we can use the following code: L. geoJSON(geojsonFeature). addTo(map);

What is Tilelayer in Leaflet?

Used to load and display tile layers on the map, implements ILayer interface.

What is GeoJSON layer?

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.

What are Leaflet bounds?

Represents a rectangular area in pixel coordinates.


1 Answers

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.

like image 101
monkut Avatar answered Sep 28 '22 10:09

monkut