title: Toggle feature visibility within layer efficiently
body: <p>Currently I am working on an interactive map of the ten most common tree species within the city. For the map I want users to be able to toggle the visibility of each of the ten species, plus an 'all other' species toggle.</p>
  
  <p>The issue is that my current method to achieve this is very bloated, and could be significantly streamlined</p>
  
  <p>Currently my method is to create a series of checked boxes</p>
  
  <pre><code>&lt;input type='checkbox' id='checkbox0'checked&gt; Check0 &lt;/input&gt; &lt;div&gt;&lt;/div&gt;
  &lt;input type='checkbox' id='checkbox1'checked&gt; Check1 &lt;/input&gt; &lt;div&gt;&lt;/div&gt;
  &lt;input type='checkbox' id='checkbox2'checked&gt; Check2 &lt;/input&gt; &lt;div&gt;&lt;/div&gt;
  ...
  &lt;input type='checkbox' id='checkbox11'checked&gt; Check11 &lt;/input&gt; &lt;div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Add the layer for the trees and style the features within it:</p>
  
  <pre><code> map.addLayer({
      id: 'wpgTrees',
      type: 'circle',
      source: {
        type: 'vector',
        url: 'url_Goes_Here'
      },
      'source-layer': 'source_Goes_Here',
      'paint': {
        'circle-radius': [
          'interpolate', ['linear'], ['zoom'],
          13, 2,
          20, 4,
        ],
          'circle-color':[
              'match',
              ['get','Common_Nam'],
              'green ash',        treeColours[0], // Bright red
              'American Elm',     treeColours[1], // Orange
              'Linden species',   treeColours[2], // Blue
              'Siberian Elm',     treeColours[3], //Light red
              'bur oak',          treeColours[4], //Green, purple
              'Manitoba maple, boxelder', treeColours[5],
              'black Ash',            treeColours[6], // pink
              'Colorado blue spruce', treeColours[7], // light blue
              'Poplar species',       treeColours[8], //light green
              'white spruce',         treeColours[9], //light puruple
              treeColours[10] //All Others
          ],
      }
  });
  </code></pre>
  
  <p>Then use an addEventListener for each checkbox (0 to 10, for eleven layers) to set each feature's opacity using the .<a href="https://www.mapbox.com/mapbox-gl-js/api#map#setpaintproperty" rel="nofollow noreferrer">setPaintProperty</a>.</p>
  
  <pre><code>checkbox0.addEventListener('click',function() {
      if(treeBoolean[0] == true) {
      treeOpacity[0]=0;
      treeBoolean[0] = !treeBoolean[0];
  } else {
      treeOpacity[0]=1;
      treeBoolean[0] = !treeBoolean[0];
  };
      map.setPaintProperty('wpgTrees','circle-opacity',[
          'match',
          ['get','Common_Nam'],
          'green ash', treeOpacity[0],
          'American Elm',     treeOpacity[1],
          'Linden species',   treeOpacity[2],
          'Siberian Elm',     treeOpacity[3],
          'bur oak',          treeOpacity[4],
          'Manitoba maple, boxelder', treeOpacity[5],
          'black Ash',            treeOpacity[6],
          'Colorado blue spruce', treeOpacity[7],
          'Poplar species',       treeOpacity[8],
          'white spruce',         treeOpacity[9],
          1,
      ]);
  })
  </code></pre>
  
  <p>The issue with this method is that I will need to repeat the addEventListener section of code for all 11 types of features. There must be a better way of doing this, as my current method will is very 'bloated'.</p>
  
  <p>Thank you for your time, and help.</p>