Search code examples
react-nativereact-native-mapbox-gl

How to show/hide raster layer (visibility property visible/none) at run time in react-native-mapbox-gl


I have set custom style url in map initialization. Like :

<Mapbox.MapView
   styleURL="asset://mystyle.json"
   logoEnabled={false}
   attributionEnabled={false}
   ref={(e) => { this.oMap = e }}
   animate={true}
   zoomLevel={6}
   centerCoordinate={[54.0, 24.0]}
   style={{ flex: 1 }}
   showUserLocation={true}>
</Mapbox.MapView>

In mystyle.json I have two base map as below :

 {
      "id": "Satellite",
      "type": "raster",
      "source": "Satellite",
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        "raster-opacity": 1
      }
    },
 {
      "id": "Satellite2",
      "type": "raster",
      "source": "Satellite",
      "layout": {
        "visibility": "none"
      },
      "paint": {
        "raster-opacity": 1
      }
    }

Satellite is visible default.

How to set visibility of satellite property to none and satellite2 visibility to visible at run time?

Mapbox gl :

"@mapbox/react-native-mapbox-gl": "^6.1.3"

React native :

"react-native": "0.58.9",

Solution

  • Finally I got solution :

    constructor() {
       this.state = {
          lightMap: 'visible', 
          darkMap: 'none'
       };
    } 
    
    changeMap(){
       this.setState({darkMap:'visible'})
    }
    
    <MapboxGL.MapView
       styleURL="asset://mystyle.json"
       logoEnabled={false}
       attributionEnabled={false}
       ref={(e) => { this.oMap = e }}
       zoomLevel={6}
       centerCoordinate={[54.0, 24.0]}
       style={{ flex: 1 }}>
    
    <MapboxGL.RasterSource
       id="idLightMap" 
       url="LAYERURL1"
       tileSize={256}>
       <MapboxGL.RasterLayer 
          id="idLightMap"
          sourceID="idLightMap"
          style={{visibility: this.state.lightMap}}>
       </MapboxGL.RasterLayer>
    </MapboxGL.RasterSource>
    
    <MapboxGL.RasterSource
       id="idDarkMap" 
       url="LAYERURL2"
       tileSize={256}>
       <MapboxGL.RasterLayer
          id="idDarkMap"
          sourceID="idDarkMap"
          style={{visibility: this.state.darkMap}}>
       </MapboxGL.RasterLayer>
    </MapboxGL.RasterSource>
    
    </MapboxGL.MapView>
    

    I have added raster layer and programmatic toggling it.