title: Mapbox how to set up the menu so that only the "visible" layers are in an "On" state
body: <p>I have created a menu that allows me to toggle layers on and off. When the map initially displays, I want only two layers to be turned on. 
  I have been able to turn off the layers i want off during the initial display using:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>map.on('load', function() {
  
    map.setLayoutProperty('id', 'visibility', 'none');
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, after several attempts, I haven't been able to have the menu display the layers that are off in a toggled "Off" state.
  You can find the current map <a href="https://camilaandinod.github.io/Project-test/index.html" rel="nofollow noreferrer">here</a>
  (If you toggle the first two layers off, you can see how the "Off" state should look like, the light gray tone- I would like the buttons that are initially off to be displayed as such at the beginning) </p>
  
  <p>I saw a question that was very similar to the one I am asking, but the response didn't really help me (<a href="https://stackoverflow.com/questions/47641465/mapbox-toggle-all-layers-off-except-one">Mapbox toggle all layers off except one</a>) </p>
  
  <p>If you know how I can get this to work, please let me know!
  Thanks for the help! </p>