How to show/hide raster layer (visibility property visible/none) at run time in react-native-mapbox-gl2019 Community Moderator ElectionHow to add markers / annotations programatically with mapbox and react nativeHow do you debug React Native?Hide keyboard in react-nativeHow to do logging in React Native?Hide/Show components in react nativeHow to add icons to React Native appError Running React Native App From Terminal (iOS)How to programatically add a raster layer to mapbox react native?How to work with mapbox marker clustors in react native?How to place a floating button in react native mapbox GLdetox e2e testing with react native mapbox gl

Is it safe to abruptly remove Arduino power?

Crossing a border with an infant of a different citizenship

What ability score modifier does a javelin's damage use?

Drawing close together horizontal lines in Latex

Is it possible to avoid unpacking when merging Association?

Why restrict private health insurance?

Shifting between bemols (flats) and diesis (sharps)in the key signature

What do you call someone who likes to pick fights?

Does the US political system, in principle, allow for a no-party system?

Windows Server Datacenter Edition - Unlimited Virtual Machines

I reported the illegal activity of my boss to his boss. My boss found out. Now I am being punished. What should I do?

Can one live in the U.S. and not use a credit card?

Why aren't there more Gauls like Obelix?

how to modify custom status text color in UI component grid magento 2?

Is this Paypal Github SDK reference really a dangerous site?

Rationale to prefer local variables over instance variables?

Plausibility of Mushroom Buildings

I can't die. Who am I?

What would be the most expensive material to an intergalactic society?

What stops an assembly program from crashing the operating system?

Are small insurances worth it?

Does "Until when" sound natural for native speakers?

Am I understanding this Storm King's Thunder map wrong?

Does a difference of tense count as a difference of meaning in a minimal pair?



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



2019 Community Moderator ElectionHow to add markers / annotations programatically with mapbox and react nativeHow do you debug React Native?Hide keyboard in react-nativeHow to do logging in React Native?Hide/Show components in react nativeHow to add icons to React Native appError Running React Native App From Terminal (iOS)How to programatically add a raster layer to mapbox react native?How to work with mapbox marker clustors in react native?How to place a floating button in react native mapbox GLdetox e2e testing with react native mapbox gl










1















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









share|improve this question

















This question has an open bounty worth +50
reputation from Khurshid Ansari ending ending at 2019-03-16 07:24:14Z">in 5 days.


Looking for an answer drawing from credible and/or official sources.




















    1















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









    share|improve this question

















    This question has an open bounty worth +50
    reputation from Khurshid Ansari ending ending at 2019-03-16 07:24:14Z">in 5 days.


    Looking for an answer drawing from credible and/or official sources.


















      1












      1








      1


      1






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









      share|improve this 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.6",






      react-native react-native-mapbox-gl






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Mar 7 at 6:27







      Khurshid Ansari

















      asked Mar 7 at 5:03









      Khurshid AnsariKhurshid Ansari

      626617




      626617






      This question has an open bounty worth +50
      reputation from Khurshid Ansari ending ending at 2019-03-16 07:24:14Z">in 5 days.


      Looking for an answer drawing from credible and/or official sources.








      This question has an open bounty worth +50
      reputation from Khurshid Ansari ending ending at 2019-03-16 07:24:14Z">in 5 days.


      Looking for an answer drawing from credible and/or official sources.
























          3 Answers
          3






          active

          oldest

          votes


















          1














          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>





          share|improve this answer























          • Thanks for your logic but I have more than 2 layers which i want to show and hide programmatically.

            – Khurshid Ansari
            Mar 7 at 6:59











          • you mean more than two style to single map or more than two maps ?

            – Jaydeep Galani
            Mar 7 at 7:00











          • I have 3 base maps. and many layers

            – Khurshid Ansari
            Mar 7 at 7:01











          • 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 7 at 7:03












          • hope you understand my situation

            – Khurshid Ansari
            Mar 7 at 7:36


















          0














          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!






          share|improve this answer























          • I am using latest version.

            – Khurshid Ansari
            Mar 7 at 5:18











          • Do you know how to change layer visibility at run time?

            – Khurshid Ansari
            Mar 7 at 5:20











          • See github.com/agius/react-native-mapbox-gl/blob/master/docs/… but I don't know how to change visibility at runtime.

            – Khurshid Ansari
            Mar 7 at 5:35












          • docs.mapbox.com/help/troubleshooting/mapbox-gl-js-performance/…. Please check this. i think this might help @KhurshidAnsari

            – Akshay Mulgavkar
            Mar 7 at 5:59












          • This is mapbox gl js

            – Khurshid Ansari
            Mar 7 at 6:10


















          0














          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.






          share|improve this answer






















            Your Answer






            StackExchange.ifUsing("editor", function ()
            StackExchange.using("externalEditor", function ()
            StackExchange.using("snippets", function ()
            StackExchange.snippets.init();
            );
            );
            , "code-snippets");

            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "1"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader:
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            ,
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );













            draft saved

            draft discarded


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55036420%2fhow-to-show-hide-raster-layer-visibility-property-visible-none-at-run-time-in%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            3 Answers
            3






            active

            oldest

            votes








            3 Answers
            3






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            1














            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>





            share|improve this answer























            • Thanks for your logic but I have more than 2 layers which i want to show and hide programmatically.

              – Khurshid Ansari
              Mar 7 at 6:59











            • you mean more than two style to single map or more than two maps ?

              – Jaydeep Galani
              Mar 7 at 7:00











            • I have 3 base maps. and many layers

              – Khurshid Ansari
              Mar 7 at 7:01











            • 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 7 at 7:03












            • hope you understand my situation

              – Khurshid Ansari
              Mar 7 at 7:36















            1














            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>





            share|improve this answer























            • Thanks for your logic but I have more than 2 layers which i want to show and hide programmatically.

              – Khurshid Ansari
              Mar 7 at 6:59











            • you mean more than two style to single map or more than two maps ?

              – Jaydeep Galani
              Mar 7 at 7:00











            • I have 3 base maps. and many layers

              – Khurshid Ansari
              Mar 7 at 7:01











            • 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 7 at 7:03












            • hope you understand my situation

              – Khurshid Ansari
              Mar 7 at 7:36













            1












            1








            1







            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>





            share|improve this answer













            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>






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Mar 7 at 6:55









            Jaydeep GalaniJaydeep Galani

            628327




            628327












            • Thanks for your logic but I have more than 2 layers which i want to show and hide programmatically.

              – Khurshid Ansari
              Mar 7 at 6:59











            • you mean more than two style to single map or more than two maps ?

              – Jaydeep Galani
              Mar 7 at 7:00











            • I have 3 base maps. and many layers

              – Khurshid Ansari
              Mar 7 at 7:01











            • 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 7 at 7:03












            • hope you understand my situation

              – Khurshid Ansari
              Mar 7 at 7:36

















            • Thanks for your logic but I have more than 2 layers which i want to show and hide programmatically.

              – Khurshid Ansari
              Mar 7 at 6:59











            • you mean more than two style to single map or more than two maps ?

              – Jaydeep Galani
              Mar 7 at 7:00











            • I have 3 base maps. and many layers

              – Khurshid Ansari
              Mar 7 at 7:01











            • 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 7 at 7:03












            • hope you understand my situation

              – Khurshid Ansari
              Mar 7 at 7:36
















            Thanks for your logic but I have more than 2 layers which i want to show and hide programmatically.

            – Khurshid Ansari
            Mar 7 at 6:59





            Thanks for your logic but I have more than 2 layers which i want to show and hide programmatically.

            – Khurshid Ansari
            Mar 7 at 6:59













            you mean more than two style to single map or more than two maps ?

            – Jaydeep Galani
            Mar 7 at 7:00





            you mean more than two style to single map or more than two maps ?

            – Jaydeep Galani
            Mar 7 at 7:00













            I have 3 base maps. and many layers

            – Khurshid Ansari
            Mar 7 at 7:01





            I have 3 base maps. and many layers

            – Khurshid Ansari
            Mar 7 at 7:01













            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 7 at 7:03






            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 7 at 7:03














            hope you understand my situation

            – Khurshid Ansari
            Mar 7 at 7:36





            hope you understand my situation

            – Khurshid Ansari
            Mar 7 at 7:36













            0














            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!






            share|improve this answer























            • I am using latest version.

              – Khurshid Ansari
              Mar 7 at 5:18











            • Do you know how to change layer visibility at run time?

              – Khurshid Ansari
              Mar 7 at 5:20











            • See github.com/agius/react-native-mapbox-gl/blob/master/docs/… but I don't know how to change visibility at runtime.

              – Khurshid Ansari
              Mar 7 at 5:35












            • docs.mapbox.com/help/troubleshooting/mapbox-gl-js-performance/…. Please check this. i think this might help @KhurshidAnsari

              – Akshay Mulgavkar
              Mar 7 at 5:59












            • This is mapbox gl js

              – Khurshid Ansari
              Mar 7 at 6:10















            0














            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!






            share|improve this answer























            • I am using latest version.

              – Khurshid Ansari
              Mar 7 at 5:18











            • Do you know how to change layer visibility at run time?

              – Khurshid Ansari
              Mar 7 at 5:20











            • See github.com/agius/react-native-mapbox-gl/blob/master/docs/… but I don't know how to change visibility at runtime.

              – Khurshid Ansari
              Mar 7 at 5:35












            • docs.mapbox.com/help/troubleshooting/mapbox-gl-js-performance/…. Please check this. i think this might help @KhurshidAnsari

              – Akshay Mulgavkar
              Mar 7 at 5:59












            • This is mapbox gl js

              – Khurshid Ansari
              Mar 7 at 6:10













            0












            0








            0







            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!






            share|improve this answer













            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!







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Mar 7 at 5:17









            Akshay MulgavkarAkshay Mulgavkar

            854




            854












            • I am using latest version.

              – Khurshid Ansari
              Mar 7 at 5:18











            • Do you know how to change layer visibility at run time?

              – Khurshid Ansari
              Mar 7 at 5:20











            • See github.com/agius/react-native-mapbox-gl/blob/master/docs/… but I don't know how to change visibility at runtime.

              – Khurshid Ansari
              Mar 7 at 5:35












            • docs.mapbox.com/help/troubleshooting/mapbox-gl-js-performance/…. Please check this. i think this might help @KhurshidAnsari

              – Akshay Mulgavkar
              Mar 7 at 5:59












            • This is mapbox gl js

              – Khurshid Ansari
              Mar 7 at 6:10

















            • I am using latest version.

              – Khurshid Ansari
              Mar 7 at 5:18











            • Do you know how to change layer visibility at run time?

              – Khurshid Ansari
              Mar 7 at 5:20











            • See github.com/agius/react-native-mapbox-gl/blob/master/docs/… but I don't know how to change visibility at runtime.

              – Khurshid Ansari
              Mar 7 at 5:35












            • docs.mapbox.com/help/troubleshooting/mapbox-gl-js-performance/…. Please check this. i think this might help @KhurshidAnsari

              – Akshay Mulgavkar
              Mar 7 at 5:59












            • This is mapbox gl js

              – Khurshid Ansari
              Mar 7 at 6:10
















            I am using latest version.

            – Khurshid Ansari
            Mar 7 at 5:18





            I am using latest version.

            – Khurshid Ansari
            Mar 7 at 5:18













            Do you know how to change layer visibility at run time?

            – Khurshid Ansari
            Mar 7 at 5:20





            Do you know how to change layer visibility at run time?

            – Khurshid Ansari
            Mar 7 at 5:20













            See github.com/agius/react-native-mapbox-gl/blob/master/docs/… but I don't know how to change visibility at runtime.

            – Khurshid Ansari
            Mar 7 at 5:35






            See github.com/agius/react-native-mapbox-gl/blob/master/docs/… but I don't know how to change visibility at runtime.

            – Khurshid Ansari
            Mar 7 at 5:35














            docs.mapbox.com/help/troubleshooting/mapbox-gl-js-performance/…. Please check this. i think this might help @KhurshidAnsari

            – Akshay Mulgavkar
            Mar 7 at 5:59






            docs.mapbox.com/help/troubleshooting/mapbox-gl-js-performance/…. Please check this. i think this might help @KhurshidAnsari

            – Akshay Mulgavkar
            Mar 7 at 5:59














            This is mapbox gl js

            – Khurshid Ansari
            Mar 7 at 6:10





            This is mapbox gl js

            – Khurshid Ansari
            Mar 7 at 6:10











            0














            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.






            share|improve this answer



























              0














              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.






              share|improve this answer

























                0












                0








                0







                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.






                share|improve this answer













                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.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered 19 hours ago









                Khurshid AnsariKhurshid Ansari

                626617




                626617



























                    draft saved

                    draft discarded
















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55036420%2fhow-to-show-hide-raster-layer-visibility-property-visible-none-at-run-time-in%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Identity Server 4 is not redirecting to Angular app after login2019 Community Moderator ElectionIdentity Server 4 and dockerIdentityserver implicit flow unauthorized_clientIdentityServer Hybrid Flow - Access Token is null after user successful loginIdentity Server to MVC client : Page Redirect After loginLogin with Steam OpenId(oidc-client-js)Identity Server 4+.NET Core 2.0 + IdentityIdentityServer4 post-login redirect not working in Edge browserCall to IdentityServer4 generates System.NullReferenceException: Object reference not set to an instance of an objectIdentityServer4 without HTTPS not workingHow to get Authorization code from identity server without login form

                    2005 Ahvaz unrest Contents Background Causes Casualties Aftermath See also References Navigation menue"At Least 10 Are Killed by Bombs in Iran""Iran"Archived"Arab-Iranians in Iran to make April 15 'Day of Fury'"State of Mind, State of Order: Reactions to Ethnic Unrest in the Islamic Republic of Iran.10.1111/j.1754-9469.2008.00028.x"Iran hangs Arab separatists"Iran Overview from ArchivedConstitution of the Islamic Republic of Iran"Tehran puzzled by forged 'riots' letter""Iran and its minorities: Down in the second class""Iran: Handling Of Ahvaz Unrest Could End With Televised Confessions""Bombings Rock Iran Ahead of Election""Five die in Iran ethnic clashes""Iran: Need for restraint as anniversary of unrest in Khuzestan approaches"Archived"Iranian Sunni protesters killed in clashes with security forces"Archived

                    Can't initialize raids on a new ASUS Prime B360M-A motherboard2019 Community Moderator ElectionSimilar to RAID config yet more like mirroring solution?Can't get motherboard serial numberWhy does the BIOS entry point start with a WBINVD instruction?UEFI performance Asus Maximus V Extreme