title: Mapbox GL JS refresh layer
body: <p>I'm using Chroma.js to style a Mapbox choropleth map. I do this by storing in a variable <code>dataStyleProp</code> a single property of the source -- in this case the data are population and the properties are "free", "slave", "white", and "total"). Then I use <code>dataStyleProp</code> to build the Chroma.js color scale. What I would like to do is:</p>
  
  <ol>
  <li>Select the value for <code>dataStyleProp</code> from a radio button on the HTML page,</li>
  <li>Pass that value to the Chroma script, </li>
  <li>Then refresh the map to show the new choropleth.</li>
  </ol>
  
  <p>I've managed to do 1. and 2. but can't get 3. to work. I've tried <code>map.update</code> and <code>map.resize</code> to try to force the refresh but neither works. I also looked at <code>map.getSource(source).setData(data)</code> but the data passed must be a geojson and my <code>dataStyleProp</code> is a string.</p>
  
  <p>I considered creating a new layer for each <code>dataStyleProp</code> value, but that would mean creating hundreds of extra layers (each source has at least 4 different <code>dataStyleProp</code> values) and I'd like to avoid creating all those extra layers if possible.  </p>
  
  <p>How can I refresh the map to show the new <code>dataStyleProp</code> color scale?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="map"&gt;&lt;/div&gt;
  &lt;div&gt;
    &lt;ul class="sidebar-list"&gt;
      &lt;li id="dataInput"&gt; 
        &lt;div id="data1"&gt;&lt;/div&gt;
        &lt;div id="data2"&gt;&lt;/div&gt;
        &lt;div id="data3"&gt;&lt;/div&gt;
        &lt;div id="data4"&gt;&lt;/div&gt;
        &lt;div&gt;&lt;button id="update"&gt;Update&lt;/button&gt;&lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>mapboxgl.accessToken = "myaccesstoken";
  var map = new mapboxgl.Map({
      container: "map",
      style: "mapbox://styles/mystyle",  
      center: [-100.04, 38.907],
      minZoom: 3
      });
  
  function loadAll() {
    function getStates() {
      return fetch("data/1790_state_race.json").then(function(response) {
          return response.json();
          });
      }
  
    getStates().then(function(response) {
      states1790race = response;
      console.log(states1790race);
      });
  
  all = $.when(states1790race); 
  
  all.done(function() {  
  
      var vtMatchProp = "GISJOIN";
      var dataMatchProp = "GISJOIN";
  
      map.on("load", function () {
        map.addSource("states1790", {
              type: "vector",
              url: "mapbox://statessource"  
              });
  
        map.addSource("1790", {
              "type": "vector",
              "url": "mapbox://countiessource"
              });
  
        if (document.getElementsByName("dataInput").value === undefined) {
          var dataStyleProp = "TOTAL";
          }  
      var dataInput = document.getElementsByName("dataInput");
              $("#update").on("click", function() {
                      for (var i = 0; i &lt; dataInput.length; i++) {
                              if (dataInput[i].checked) {
                                  dataStyleProp = dataInput[i].value;
                                  break;
                                  }
                              }
                      console.log(dataStyleProp);
  
                      //refresh map layer here???
  
                      });
  
      var stops = [["0", "rgba(227,227,227,0)"]];
      var numbers1790 = states1790race.map(function(val) {
              return Number(val[dataStyleProp])
              });
      //chroma quantile scale
      var limits1790 = chroma.limits(numbers1790, 'q', 9);
  
      //chroma color scale
      var colorScale = chroma.scale(["#ffe8c6", "#915c0e"]).mode("lch").colors(10);
  
      var newData1790 = states1790race.map(function(state) {
          var color = "#e3e3e3";
          for (var i = 0; i &lt; limits1790.length; i++) {
              if (state[dataStyleProp] &lt;= limits1790[i]) {
                color = colorScale[i];
                break;
                }
              }
          var id = state[dataMatchProp];
          return [id, color]
      });
  
  map.addLayer({
          "id": "1790states",
          "source": "states1790",
          "source-layer": "USA-states-1790",
          "type": "fill",
          "layout": { "visibility": "visible" }, 
              "paint": {
                  "fill-color": {
                      "property": vtMatchProp,
                      "type": "categorical",
                      "stops": newData1790
                      }, 
                  "fill-outline-color": "white",
                  "fill-opacity": 1
                  } 
              });  
  
  });
  
  map.on("click", function(e) {
  
          var features = map.queryRenderedFeatures(e.point, { layers: ["1790states", "1790counties" ] });
          map.getCanvas().style.cursor = (features.length) ? "pointer": "";
  
          var feature = features[0];
  
  
          if (feature.properties.COUNTY == undefined) {
              for (var i = 0; i &lt; states1790race.length; i++) {
                  if (feature.properties.GISJOIN == states1790race[i].GISJOIN) {
                      total = states1790race[i].TOTAL;
                      free = states1790race[i].FREE;
                      slave = states1790race[i].SLAVE;
                      white = states1790race[i].WHITE;
                      year = states1790race[i].YEAR;
                      document.getElementById("data1").innerHTML = "&lt;input type='radio' checked name='dataInput' value='TOTAL'&gt; Total State Population: " + addCommas(total);
                      document.getElementById("place").innerHTML = feature.properties.STATENAM;
                      }
                  } 
  
              } else if 
  
               (feature.properties.COUNTY != undefined) {
              for (var j = 0; j &lt; counties1790race.length; j++) {
                  if (feature.properties.GISJOIN == counties1790race[j].GISJOIN) {
                      total = counties1790race[j].TOTAL;
                      free = counties1790race[j].FREE;
                      slave = counties1790race[j].SLAVE;
                      white = counties1790race[j].WHITE;
                      year = counties1790race[j].YEAR;
                      document.getElementById("data1").innerHTML = "&lt;input type='radio' checked name='dataInput' value='TOTAL'&gt; Total County Population: " + addCommas(total);
                      document.getElementById("place").innerHTML = feature.properties.NHGISNAM + " County, " + feature.properties.STATENAM;
                      }
                  } 
              }
  
          if (feature.properties.STATENAM != undefined) {
              var buildings = map.querySourceFeatures(e.point);
              document.getElementById("data2").innerHTML = "&lt;input type='radio' name='dataInput' value='FREE'&gt; Free: " + addCommas(free);
              document.getElementById("data3").innerHTML = "&lt;input type='radio' name='dataInput' value='SLAVE'&gt; Slave: " + addCommas(slave);
              document.getElementById("data4").innerHTML = "&lt;input type='radio' name='dataInput' value='WHITE'&gt; White: " + addCommas(white);
              document.getElementById("timeline").innerHTML = "Population in " + year;
              }
  
      });
  
    });
  
  }
  </code></pre>