title: Leaflet Auto Resetting Layers When Zooming
body: <p>I am currently creating a map with leaflet and I have run into a peculiar situation where my map layers reset after running a query function, zooming in, and then zooming out:</p>
  <p><img src="https://i.stack.imgur.com/HBWdM.png" alt=" Original View" /></p>
  <p>After zooming in with the query in place and then zooming out it resets itself:</p>
  <p><img src="https://i.stack.imgur.com/jAAti.png" alt="After Zooming out" /></p>
  <p>It almost appears as if the map is resetting itself after the user zooms out past the initial scale of 6. It essentially resets the query and I'm not sure where the issue is in the code. In a perfect world the queried layer stays queried until the user either refreshes the page or changes the query themselves.</p>
  <p>Full JS, CSS, and HTML:</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-js lang-js prettyprint-override"><code>//Main Map Baselayer
    var street = L.layerGroup();
    L.esri.basemapLayer('Streets').addTo(street);
  
  //Establish baselayers
    var baseLayers = {
      Streetmap: street,
      Geographic: L.esri.basemapLayer('NationalGeographic'),
      Gray: L.esri.basemapLayer('Gray')
    };
  
  //Call Food Insecurity Polygon from ArcGIS Online, Popup, and Query
  
    var foodInsecurity = L.esri.featureLayer({
      url: 'https://services.arcgis.com/HRPe58bUyBqyyiCt/arcgis/rest/services/Yemen_Final_WFL1/FeatureServer/4',
      style: function (feature) {
          if (feature.properties.ML2 === 2) {
              return {color:'yellow', weight: 2};
          } else if (feature.properties.ML2 === 3) {
              return {color: 'orange', weight: 2};
          } else if (feature.properties.ML2 === 4) {
              return {color: 'red', weight: 2};
          } else {
              return {color: 'grey', weight: 2}
          } 
          }
    });
  
  //Create and set basic controls of map
    var map = L.map('map', {
      zoomControl: true,
      center: [15.8527, 47.5164],
      zoom: 6,
      minZoom: 6,
      maxZoom: 15,
      layers: [street, foodInsecurity]
    });
  
  
  //Create main overlay features 
    var overlays = {
      'Food Insecurity':foodInsecurity,
  
    };
  
      //Bind a popup for the food insecurity
      foodInsecurity.bindPopup(function (layer) {
      return L.Util.template('&lt;p&gt;The level of food insecurity in this region is &lt;strong&gt;{ML2} out of 5&lt;/strong&gt;.&lt;/p&gt;', layer.feature.properties);
    });
  
      //Query by specific values for food insecurity (indeex.html page)
      var insecurityFood = document.getElementById('insecurity');
  
        insecurityFood.addEventListener('change', function () {
          foodInsecurity.setWhere(insecurityFood.value);
        });
  
  L.control.layers(baseLayers, overlays).addTo(map);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body { margin:0; padding:0; overflow: hidden;}
  
  #map {
      height: 100%;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}
  
    #query3 {
      position: relative;
      bottom: 85.5vh;
      right: -6vh;
      right: -2.8vw;
      z-index: 400;
      background: white;
      padding-right: 1vh;
      padding-top: 1vh;
      padding-left: 1vh;
      padding-bottom: 1vh;
      display: inline;
      font-size: 2vh;
      font-size: 1vw;
      width: 14vw;
      height: 4vh;
    }
  
    #query3 select {
      font-size: 2vh;
      font-size: 1vw;
      width: 11vh;
      width: 6vw;
      height: 3vh;
      height: 1.7vw;
    }
  
  #query3 select:hover {
    background-color: #ddd;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;!---Leaflet CSS---&gt;
      &lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""/&gt;
      
      &lt;!---Leaflet JS---&gt;
      &lt;script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
      crossorigin=""&gt;&lt;/script&gt;
  
      &lt;!----ESRI JS----&gt;
      &lt;script src="https://unpkg.com/esri-leaflet@2.4.1/dist/esri-leaflet.js"
      integrity="sha512-xY2smLIHKirD03vHKDJ2u4pqeHA7OQZZ27EjtqmuhDguxiUvdsOuXMwkg16PQrm9cgTmXtoxA6kwr8KBy3cdcw=="
      crossorigin=""&gt;&lt;/script&gt;
      
      &lt;!-- Load Personal Stylesheet --&gt;
       &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;/head&gt;   
  &lt;body&gt;
  &lt;!--- Create Map --&gt;
  &lt;div id="map"&gt;&lt;/div&gt;
  
  &lt;!-- Create Query for Food Insecurity --&gt;
  &lt;div class="leaflet-bar1"&gt;
      &lt;div id="query3" class="leaflet-barq3"&gt;
        &lt;label&gt;
          Food Insecurity:
          &lt;select id="insecurity"&gt;
            &lt;!-- make sure to encase string values in single quotes for valid sql --&gt;
              &lt;option value="1=1"&gt;All&lt;/option&gt;
              &lt;option value="ML2='2'"&gt;Stressed&lt;/option&gt;
              &lt;option value="ML2='3'"&gt;Emergency&lt;/option&gt;
              &lt;option value="ML2='4'"&gt;Crisis&lt;/option&gt;
          &lt;/select&gt;
        &lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--    my js script--&gt;
  &lt;script type="text/javascript" src="js/main.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any help would be greatly appreciated!!</p>