title: Choropleth map with dynamically data in Leaflet
body: <p>I am struggling with Javascript and Leaflet tryind to realize a dashboard.
  I am trying to realize a choropleth map following this <a href="http://leafletjs.com/examples/choropleth.html" rel="nofollow noreferrer">tutorial</a>.
  I need to change dynamically data display on map according to two select menu.</p>
  
  <p>Selects:</p>
  
  <pre><code>&lt;select class="c-select" id="methodSelected" name="methodSelected" required&gt;
  &lt;/select&gt;
  &lt;select class="c-select" id="yearSelected" name="yearSelected" required&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I am holding changing on selects with </p>
  
  <pre><code>$("#methodSelected").change()
  $("#yearSelected").change()
  </code></pre>
  
  <p>both are declared inside a</p>
  
  <pre><code>$(document).ready(function() {}
  </code></pre>
  
  <p>In this block I also declare the required variables and functions</p>
  
  <pre><code>var choroplethMap;
  var q = d3_queue.queue();
  q.defer(d3.json, "final2.geojson");
  function ready(GeoJSON) {
      ...
      makePlaceHolderChoroplethMap();
  }
  </code></pre>
  
  <p><code>makePlaceHolderChoroplethMap</code> is like that</p>
  
  <pre><code>function makePlaceHolderChoroplethMap() {
      choroplethMap = L.map('choroplethContainer').setView([51.505, -0.09], 2);
      L.tileLayer("url", 
         {
              id: id,
              attribution: attribution,
              accessToken: accessToken
          }
      ).addTo(choroplethMap);
  </code></pre>
  
  <p>Now when I will change values with the two select menu I want update map, so I put into <code>$("#yearSelected").change()</code> a call to <code>makeChoroplethMap()</code>.</p>
  
  <pre><code>function makeChoroplethMap() {}
  </code></pre>
  
  <p>Inside this function I put code following tutorial previously linked.</p>
  
  <p>The problem is that when I changed the values with that code I will re-add new layers over others previously added (Geojson, legend and control, as you can see)</p>
  
  <p><a href="https://i.stack.imgur.com/WGn2h.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WGn2h.jpg" alt="enter image description here"></a></p>
  
  <p>So I tryed to leave only binding with data into <code>makeChoroplethMap()</code>, </p>
  
  <pre><code>geojson = L.geoJson(data, 
      {
          style: style,
          onEachFeature: onEachFeature
      }
  ).addTo(choroplethMap);
  </code></pre>
  
  <p>but I recieve an error in <code>info.addTo(choroplethMap);</code> as <code>t is undefined</code>. I think because <code>choroplethMap</code> is not initialized. Map and select work, but controls are not displayed 'cause of error.
  For now (I think I breaked something because yesteday worked) also geojson layer overstay over country also if I change values with select (the previously one putted does not go off also I change values).</p>
  
  <p>So my question is: how can re-bind data without re-adding also legend and other control?</p>