Question

7

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

rated 0 times [ 10] [ 3] / answers: 1 / hits: 24361 / 11 Years ago, wed, april 24, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

taylert

Add To Favorites

Follow

Total Points: 627

Total Questions: 91

Total Answers: 108

Location: Mayotte

Member since Mon, Sep 12, 2022

2 Years ago

taylert questions

1 How to format date in v-Calendar?

Tue, Jul 28, 20, 00:00, 4 Years ago

1 Check if at least two elements in an array are greater than zero - JavaScript/Typescript

Mon, Feb 17, 20, 00:00, 4 Years ago

1 How do a date range validation with vue/Quasar

Tue, Dec 10, 19, 00:00, 5 Years ago

1 JavaScript: When to use a Class vs. a prototype?

Fri, Sep 13, 19, 00:00, 5 Years ago

1 Is there a generic way to set state in React Hooks? How to manage multiple states?

Tue, Jul 9, 19, 00:00, 5 Years ago

View All

answered 11 Years ago jonrened · Accepted Answer

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.