Skip to content

Conversation

msaqlain
Copy link

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

Checklist

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

@msaqlain msaqlain temporarily deployed to CI with Mapbox Tokens October 17, 2025 10:34 — with GitHub Actions Inactive
@msaqlain msaqlain temporarily deployed to CI with Mapbox Tokens October 17, 2025 10:34 — with GitHub Actions Inactive
@msaqlain msaqlain temporarily deployed to CI with Mapbox Tokens October 17, 2025 10:34 — with GitHub Actions Inactive
@msaqlain msaqlain temporarily deployed to CI with Mapbox Tokens October 17, 2025 10:34 — with GitHub Actions Inactive
@msaqlain msaqlain temporarily deployed to CI with Mapbox Tokens October 17, 2025 10:34 — with GitHub Actions Inactive
@msaqlain msaqlain temporarily deployed to CI with Mapbox Tokens October 17, 2025 10:34 — with GitHub Actions Inactive
@msaqlain msaqlain temporarily deployed to CI with Mapbox Tokens October 17, 2025 10:34 — with GitHub Actions Inactive
@msaqlain
Copy link
Author

@mfazekas Created a new PR with the latest version. closing an old one #3870.

Added an example too. Thanks

@mfazekas
Copy link
Contributor

@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

@msaqlain
Copy link
Author

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'
);

@mfazekas
Copy link
Contributor

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.

@msaqlain
Copy link
Author

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants