title: IDK why my mapbox map isn't interactive. The counties should be able to clicked
body: <p>So I'm pretty sure the issue lies with something within the following section of the code. More specifically, the map on click function. But I cant figure out why. It should let each county on my map be able to be clicked and have their data displayed onto a sidebar. But none of my counties are clickable.</p>
  <pre><code>map.on('load', function() {   // Map legend labelling and interaction with sidebar
    // legend labelling
    var layers = ['&lt; 4.5%', '4.5% to 6%', '6% to 7.5%', '7.5% to 9%', '9% to 10.5%', '10.5% to 12%', '12% to 13.5%','13.5% to 15%','&gt; 15%'];
    var colors = ['#fff2b8', '#FED976', '#FEB24C', '#FD8D3C', '#FC4E2A', '#E31A1C', '#BD0026', '#8E0101', '#49000E'];
    for (i = 0; i &lt; layers.length; i++) {
      var layer = layers[i];
      var color = colors[i];
      var item = document.createElement('div');
      var key = document.createElement('span');
      key.className = 'legend-key';
      key.style.backgroundColor = color;
      var value = document.createElement('span');
      value.innerHTML = layer;
      item.appendChild(key);
      item.appendChild(value);
      legend.appendChild(item);
    }
    
    // This for the life of me just refues to run. Something with the layer name, id is making it not run the clicking functionality.
    map.on('click', function (e) {
      var features = map.queryRenderedFeatures(e.point, { layers: [&quot;countyData&quot;] });
      for (i in features) {
        if (features[i].layer.id == &quot;countyData&quot;) {
           document.getElementById('tooltip').innerHTML = 
           ('&lt;b&gt;Selected County:&lt;/b&gt;' + (features[i].properties.COUNTY_LAB).toFixed(0) + '&lt;br/&gt; ' + 
           '&lt;br/&gt;Total Population in 2014:  ' + (features[i].properties.totPop14).toFixed(0) + 
           '&lt;br/&gt;Percent of Population in Poverty 2014:  ' + (features[i].properties.povPercent14).toFixed(0) + '%' + 
           '&lt;br/&gt;Total Population in 2019:  ' + (features[i].properties.totalPop19).toFixed(0) + 
           '&lt;br/&gt;Percent of Population in Poverty 2019:  ' + (features[i].properties.povPercent19).toFixed(0) + '%' + 
  
           '&lt;br/&gt; ' + '&lt;/br&gt;&lt;b&gt;Change for each Race:&lt;/b&gt;' + '&lt;br/&gt; ' + 
  
           '&lt;br/&gt;Change in total White population:  ' + (features[i].properties.whiteTotDelta).toFixed(1) + 
           '&lt;br/&gt;Change in White population in Poverty:  ' + (features[i].properties.whitePovDelta).toFixed(1) + '&lt;br/&gt; ' + 
  
           '&lt;br/&gt;Change in total Hispanic population:  ' + (features[i].properties.hispTotDelta).toFixed(1) + 
           '&lt;br/&gt;Change in Hispanic population in Poverty:  ' + (features[i].properties.hispPovDelta).toFixed(1) + '&lt;br/&gt;' +
  
           '&lt;br/&gt;Change in total Black population:  ' + (features[i].properties.blackTotDelta).toFixed(1)  + 
           '&lt;br/&gt;Change in Black population in Poverty:  ' + (features[i].properties.blackPovDelta).toFixed(1) + '&lt;br/&gt; ' + 
  
           '&lt;br/&gt;Change in total Asian population:  ' + (features[i].properties.asianTotDelta).toFixed(1)  + 
           '&lt;br/&gt;Change in Asian population in Poverty:  ' + features[i].properties.asianPovDetlta).toFixed(1) + '&lt;br/&gt; ' + 
  
           '&lt;br/&gt;Change in total Native American population:  ' + (features[i].properties.nativeTotDelta).toFixed(1) + 
           '&lt;br/&gt;Change in Native American population in Poverty:  ' + (features[i].properties.nativePovDelta).toFixed(1) + '&lt;br/&gt; ' +
  
           '&lt;br/&gt;Change in total Other population:  ' + (features[i].properties.otherTotDelta).toFixed(1)  + 
           '&lt;br/&gt;Change in Other population in Poverty:  ' + (features[i].properties.otherPovDelta ).toFixed(1);
          
           if (clickedStateId) {
             map.setFeatureState({sourceLayer: &quot;County_Boundaries_of_NJ_EDITE-5q8kmm&quot;, id: clickedStateId, source:&quot;composite&quot;}, {&quot;click&quot;:false})
          }
          clickedStateId = features[i][id];
          map.setFeatureState({sourceLayer: &quot;County_Boundaries_of_NJ_EDITE-5q8kmm&quot;, id: clickedStateId, source:&quot;composite&quot;}, {&quot;click&quot;:true})
          return;
        }
      }
   });
       map.getCanvas().style.cursor = 'default';
  }
  </code></pre>
  <p><strong>EDIT:</strong>
  The access token is set for read only, so I'm not worried for anyone being able to modify anything, and my map style is private anyway. And if I'm wrong about where I think the issue is, then someone cant point it out.</p>