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

Question

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",

score 4 · Accepted Answer · answered Mar 10 '19 at 10:40

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.

score 3 · Answer 2 · answered Mar 07 '19 at 06:55

3

let say we have one state isStateliteVisible:false,

now change this state to true when you want to visibility

and use mapbox like this,

<Mapbox.MapView
   styleURL={this.state.isStateliteVisible?...visiblityStyle:....noneStyle} // use this as per your case
   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>

answered Mar 07 '19 at 06:55

Jaydeep Galani

4,842
3
27
47

Thanks for your logic but I have more than 2 layers which i want to show and hide programmatically. – Khurshid Ansari Mar 07 '19 at 06:59
you mean more than two style to single map or more than two maps ? – Jaydeep Galani Mar 07 '19 at 07:00
I have done using mapbox-gl-js like this.oMap.setLayoutProperty("layerid", 'visibility', 'none'); for my website and looking for same in react-native-mapbox-gl – Khurshid Ansari Mar 07 '19 at 07:03
hope you understand my situation – Khurshid Ansari Mar 07 '19 at 07:36
well I don't know any Direct Manipulation method like `setLayoutProperty` is available but you can create controllerMethod and use switch inside it and return whatever style you want from it. – Jaydeep Galani Mar 07 '19 at 08:28
can you understand this https://github.com/agius/react-native-mapbox-gl/issues/789 – Khurshid Ansari Mar 07 '19 at 09:39

score 2 · Answer 3 · answered Mar 07 '19 at 05:17

2

I can see that you are using a older depreciated version of mapbox-gl. This package is deprecated please use this instead.

Installation

Dependencies

node
npm
React Native recommended version 0.50 or greater

Git

git clone git@github.com:mapbox/react-native-mapbox-gl.git
cd react-native-mapbox-gl

Yarn

yarn add @mapbox/react-native-mapbox-gl

Npm

npm install @mapbox/react-native-mapbox-gl --save

You're good to go!

answered Mar 07 '19 at 05:17

Akshay Mulgavkar

1,727
9
22

I am using latest version. – Khurshid Ansari Mar 07 '19 at 05:18
Do you know how to change layer visibility at run time? – Khurshid Ansari Mar 07 '19 at 05:20
See https://github.com/agius/react-native-mapbox-gl/blob/master/docs/RasterLayer.md but I don't know how to change visibility at runtime. – Khurshid Ansari Mar 07 '19 at 05:35
https://docs.mapbox.com/help/troubleshooting/mapbox-gl-js-performance/#render-time. Please check this. i think this might help @KhurshidAnsari – Akshay Mulgavkar Mar 07 '19 at 05:59
This is mapbox gl js – Khurshid Ansari Mar 07 '19 at 06:10

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

3 Answers3

Linked