maps icon indicating copy to clipboard operation
maps copied to clipboard

Added support for setStyleLayerProperty

Open msaqlain opened this issue 4 months ago • 7 comments

Added setStyleLayerProperty support that allows setting the value of a property for a specific layer referencing the specified layerId

Checklist

  • [X] I've read CONTRIBUTING.md
  • [X] I updated the doc/other generated code with running yarn generate in the root folder
  • [X] I have tested the new feature on /example app.
    • [X] In V11 mode/ios
    • [X] In New Architecture mode/ios
    • [X] In V11 mode/android
    • [X] In New Architecture mode/android
  • [X] I added/updated a sample - if a new feature was implemented (/example)

msaqlain avatar Oct 17 '25 10:10 msaqlain

@mfazekas Created a new PR with the latest version. closing an old one https://github.com/rnmapbox/maps/pull/3870.

Added an example too. Thanks

msaqlain avatar Oct 17 '25 10:10 msaqlain

@msaqlain thanks much, can you also add some motivation?!

How is this different from our existing solution:

         <FillLayer id="building" existing style={{ visibility }} />

https://rnmapbox.github.io/docs/examples/Map/ShowAndHideLayer

mfazekas avatar Oct 17 '25 13:10 mfazekas

Yes sure @mfazekas

When we are only loading map using styleURL that contains all the Layers & SourceLayers we dont have references to all the FillLayer, LineLayer or other shapes.

To toggle SourceLayers (composite, satellite) we have this method setSourceVisibility

mapRef.current?.setSourceVisibility(
      shouldBeVisible,
      'composite',
      mode
);

Similarly if you want to toggle a specific layer we dont have any method available. To enable this my in my PR i am using setStyleLayerProperty

mapRef?.current?.setStyleLayerProperty(
      layerId,
      'visibility',
      'visible'
);

msaqlain avatar Oct 17 '25 14:10 msaqlain

Similarly if you want to toggle a specific layer we dont have any method available. To enable this my in my PR i am using setStyleLayerProperty

mapRef?.current?.setStyleLayerProperty(
      layerId,
      'visibility',
      'visible'
);

I think we do have this:

const [visibility, setVisbility] = useState('visible')
...
<FillLayer id="building" existing style={{ visibility }} />

This will change a specific layer of(building) visibility. Note the existing flag, that will not create new layer but will lookup up the layer by id.

mfazekas avatar Oct 18 '25 15:10 mfazekas

@mfazekas If we use this approach as you mentioned, then in my scenario, I have to render 300 layers using FillLayer, which I need to enable and disable based on my internal grouping.

image

So to achieve this without explicitly mentioning FillLayer i can load map using styleURL only and then using map ref i can enable disable layers.

msaqlain avatar Oct 18 '25 15:10 msaqlain

@mfazekas Any update on this?

msaqlain avatar Dec 09 '25 08:12 msaqlain

@msaqlain we'd need CI to pass

mfazekas avatar Dec 09 '25 10:12 mfazekas