Best way to set opacity for Feature Layers?
See original GitHub issueHello 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}.parentElement.style.opacity = 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:
- Created 8 years ago
- Comments:9 (5 by maintainers)
Top GitHub Comments
@patrickarlt @gavinr the custom pane worked for us. Here were my changes https://github.com/nwfsc-fram/warehouse/commit/35d6fa3c4af93e8eeb26e9cf5f05dba961a60145
Closing as this is now in “FAQ” status with ideas discussed above for posterity.