Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Best way to set opacity for Feature Layers?

See original GitHub issue

Hello again,

So the application I’m creating allows users to add whatever layers they want to a leaflet map. As such, whatever different types of layers exist, I need to be able to support it. The feature I’m adding is a slider to control the opacity of all the different layers that are on the map. All the other types of layers have an easy to use setOpacity(0.5), however FeatureLayers do not.

What I’ve been doing has been calling setStyle( { opacity: 0.5, fillOpacity: 0.5 } ). I ran into a problem where new features downloaded wouldn’t have the style from esri-leaflet-renderers. I submitted an issue and we worked towards a solution. The solution was good, except for as @kneemer pointed out, it only supports simple renderers. My current “solution” is to call resetStyle() and then setStyle(...) on the load event for the layer. Not ideal, but it works.

Another issue that I noticed was that this didn’t set the opacity for points/markers/icons. The documentation for Feature Layer says that setStyle deals with PathOptions, setting either opacity or fillOpacity did nothing.

One idea that I had was to find the graphic/SVG DOM element for the feature layer, and set the opacity on that with CSS styling. Something essentially like this fl.layers['1'].{_icon/_path} = 0.5. This worked great, except for the fact that if you add multiple feature layers of the same “type” to the map, they all share the same svg graphic, thus the opacity of one layer affected all the others. A way around this would be instead of calling parentElement, you just iterate through all the _icons/_paths and set opacity on that. That works, except for the performance is really bad, as expected.

Apologies for the rambling, but the tl;dr is what is the best way to set opacity for feature layers, which works on all types. Points/polygons/lines, simple/complex renderers. Could there be a setOpacity(0.5) like all the other esri-leaflet layers?

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

Mak-NOAAcommented, Jul 14, 2020
jwasilgeocommented, Nov 17, 2020

Closing as this is now in “FAQ” status with ideas discussed above for posterity.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Change the appearance of a feature layer—ArcGIS Pro
Use the Feature Layer tab to adjust the display of feature layers, ... —Increase the transparency of the selected layer, revealing underlying features....
Read more >
How To: Add transparency to a layer - Esri Support
In ArcMap, navigate to the Effects toolbar. In ArcGIS 9.3. · On the Effects toolbar, select the layer to be made partially transparent....
Read more >
Change transparency—Portal for ArcGIS
To set the overall transparency of the layer, move the slider to the left (less transparent) or right (more transparent). You can also...
Read more >
Layer Transparency Using ArcGIS Pro (ESRI). - YouTube
Layer Transparency Using ArcGIS Pro (ESRI). Two methods. ... 4.2K views 10 months ago GIS Answers Top Videos. 4,209 views • Premiered Feb...
Read more >
Procreate Layer Opacity: How to Master It (2022)
You can also adjust your layer opacity within your layer's settings. Open your layers panel and tap the letter “N” on the right-hand...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found