Leaflet Auto Resetting Layers When Zooming
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:
After zooming in with the query in place and then zooming out it resets itself:
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.
Full JS, CSS, and HTML:
//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('<p>The level of food insecurity in this region is <strong>{ML2} out of 5</strong>.</p>', 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);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; }<html lang="en"> <head> <!---Leaflet CSS---> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/> <!---Leaflet JS---> <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script> <!----ESRI JS----> <script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js" integrity="sha512-xY2smLIHKirD03vHKDJ2u4pqeHA7OQZZ27EjtqmuhDguxiUvdsOuXMwkg16PQrm9cgTmXtoxA6kwr8KBy3cdcw==" crossorigin=""></script> <!-- Load Personal Stylesheet --> <link rel="stylesheet" href="css/style.css"> </head> <body> <!--- Create Map --> <div id="map"></div> <!-- Create Query for Food Insecurity --> <div class="leaflet-bar1"> <div id="query3" class="leaflet-barq3"> <label> Food Insecurity: <select id="insecurity"> <!-- make sure to encase string values in single quotes for valid sql --> <option value="1=1">All</option> <option value="ML2='2'">Stressed</option> <option value="ML2='3'">Emergency</option> <option value="ML2='4'">Crisis</option> </select> </label> </div> </div> <!-- my js script--> <script type="text/javascript" src="js/main.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>Any help would be greatly appreciated!!
