get and filter style layers?

[ctaggart]

I'l looking for a way to list all the layers for a map and also a way to fitler (hide) them. I think these are the similar APIs in mapbox-gl-js:

https://www.mapbox.com/mapbox-gl-js/style-spec/#layers
https://www.mapbox.com/mapbox-gl-js/style-spec/#layer-filter

[nitaliano]

Each layer has a filter property https://github.com/mapbox/react-native-mapbox-gl/blob/master/example/src/components/EarthQuakes.js#L81 it's the same as what is in GLJS pre experssions so if you scroll all the way to the bottom of the page you linked you should see Filter (deprecated syntax) that is the type of filtering that is supported in this repo.

We don't expose methods to list all layers on the map, and they are not as fleshed out in the native sdks as they are in GLJS. You could do this in Mapbox Studio and create your own style url, by just removing those layers from the map, this will also make it more performant since the tile payloads will be smaller.

[ctaggart]

Thanks @nitaliano. I'm still a little confused about how to hide layers. The code for the website:
https://beta.lanespotter.bike/

It loads a single styleURL:

    map = new mapboxgl.Map({
      container: 'map',
      style: styleURL,
      center: PositionService.getPosition().lngLat,
      zoom: PositionService.getPosition().zoom
    });

And then it toggles off and on the optional layers with:

map.setLayoutProperty(bikeID, 'visibility', 'visible');

map.setLayoutProperty(rateID, 'visibility', 'none');

The iOS app is doing something similar. Is it possible to do something similar with this library?

[nitaliano]

@ctaggart try this

<Layer style={{ visibility: 'none' }} />
<Layer style={{ visibility: 'visible' }} />

[ctaggart]

@nitaliano, that looks promising, but I haven't been able to get it to work. I modified react-native-mapbox-gl\example\src\components\ShowMap.js and tried all of these:

        <MapboxGL.MapView
          showUserLocation={true}
          zoomLevel={12}
          userTrackingMode={MapboxGL.UserTrackingModes.Follow}
          // styleURL={this.state.styleURL}
          styleURL="mapbox://styles/bikeburgh/cj2g3qsya00ct2srt7wpwzyf8"
          style={sheet.matchParent}
        >
          {/* <MapboxGL.Layer sourceID="bike-lanes" style={{ visibility: 'none' }} /> */}
          {/* <MapboxGL.LineLayer sourceID="bike-lanes" style={{ visibility: 'none' }} /> */}
          {/* <MapboxGL.LineLayer sourceLayerID="bike-lanes" style={{ visibility: 'none' }} /> */}
          <MapboxGL.SymbolLayer sourceLayerID="bike-shops" style={{ visibility: 'none' }} />
        </MapboxGL.MapView>

I'd like to had the bike-lanes layer or the bike-shops layer, but they still are visible.

[ctaggart]

This was extremely easy to do directly with the Android SDK. I simply had to get the layer and set the visibility property. Building off of the tutorial code:

        mapView.getMapAsync { mapboxMap ->
            // One way to add a marker view
            mapboxMap.addMarker(MarkerOptions()
                    .position(LatLng(41.885, -87.679))
                    .title("Chicago")
                    .snippet("Illinois")
            )

            for (layer in mapboxMap.layers){
                println(layer.id)
            }

            mapboxMap.getLayer("bike-lanes")?.setProperties(visibility(NONE))

I never did figure out how to do that with this React Native component.

[nitaliano]

You need to use the composite source so

<MapboxGL.VectorSource>
  <MapboxGL.LineLayer id="bike-lanes" style={{ visibility: 'none' }} />
</MapboxGL.VectorSource>

[ctaggart]

Thanks @nitaliano, that worked! Now I just need #1158 for our first release.