Highlighting polygon which highlights other polygons based on condition

Question

Sorry kind of a new developer here. I am using ArcGIS Javascript 4.12 from a feature layer on AGOL. I want to click on a polygon which based on a condition highlights others. For example: Click on Nebraska which then highlights Virginia, Missouri, Kansas, and Nevada. Is there anyway to do this in the Javascript API? Thanks!

RobertScheitlin__GISP · Answer

Johnny, So here is a sample for your scenario. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Highlight features based on condition - 4.12</title> <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.12/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer" ], function(Map, MapView, FeatureLayer) { var statesRenderer = { type: "simple", // autocasts as new SimpleRenderer() symbol: { type: "simple-fill", // autocasts as new SimpleFillSymbol() style: "none", outline: { width: 2, color: "white" } }, label: "State boundaries" }; var layer = new FeatureLayer({ url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2", renderer: statesRenderer, outFields: ['state_name'] }); var map = new Map({ basemap: "satellite", layers: [layer] }); var view = new MapView({ container: "viewDiv", map: map, zoom: 5, center: [-100, 39], highlightOptions: { color: [255, 241, 58], fillOpacity: 0.4 } }); var lyrView, highlight; view.whenLayerView(layer).then(function(layerView) { lyrView = layerView; }); view.on("click", function (event) { // Search for graphics at the clicked location. View events can be used // as screen locations as they expose an x,y coordinate that conforms // to the ScreenPoint definition. view.hitTest(event).then(function (response) { if (response.results.length) { var graphic = response.results.filter(function (result) { // check if the graphic belongs to the layer of interest return result.graphic.layer === layer; })[0].graphic; if(graphic.attributes.state_name === 'Nebraska'){ var query = layer.createQuery(); query.where = "state_name IN ('Virginia', 'Missouri', 'Kansas', 'Nevada')"; layer.queryFeatures(query).then(function(result){ if (highlight) { highlight.remove(); } highlight = lyrView.highlight(result.features); }); }else{ if (highlight) { highlight.remove(); } } } }); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍