Latest Contributions by Gianna_BBSRC

Hi there,  You have to make each of your listener functions listen to each other.  Here's what I did to make it work (nb I changed the dates to 1856 and 1921 because they were easier to see):   function setFeatureLayerFilter(expression) { chartsLayer.definitionExpression = expression; } // The filter for the page load map view // Only show small scale series setFeatureLayerFilter("Shape_Area >= 9463642202000 AND datepub = 1856"); //setFeatureLayerFilter("scale < 698000" ); // Exclude map scales according to the zoom level // Use 'Shape_Area' because scale information might be missing for some charts view.watch("zoom", function(newValue) { switch (selectFilter.value) { case "datePub = 1856": if (newValue <= 2) { setFeatureLayerFilter("Shape_Area >= 9463642202000 AND datePub = 1856"); } else if (newValue >= 4) { setFeatureLayerFilter("Shape_Area <= 946364220200 AND datePub = 1856"); } break; case "datePub = 1921": if (newValue <= 2) { setFeatureLayerFilter("Shape_Area >= 9463642202000 AND datePub = 1921"); } else if (newValue >= 4) { setFeatureLayerFilter("Shape_Area <= 946364220200 AND datePub = 1921"); } break; } }); // Query the layer based on the chart series var sqlExpressions = [ "datePub = 1856", "datePub = 1921" ]; var selectFilter = document.createElement("select"); selectFilter.setAttribute("class", "esri-widget esri-select"); selectFilter.setAttribute( "style", "width: 275px; font-family: Avenir Next W00; font-size: 1em;" ); sqlExpressions.forEach(function(sql) { var option = document.createElement("option"); option.value = sql; option.innerHTML = sql; selectFilter.appendChild(option); }); view.ui.add(selectFilter, "top-right"); selectFilter.addEventListener('change', function(event) { if (view.zoom >= 2) { setFeatureLayerFilter("Shape_Area <= 9463642202000 AND" + event.target.value); } else { setFeatureLayerFilter("Shape_Area >= 9463642202000 AND" + event.target.value); } });     ... View more