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