My goal is to be able to toggle shake intensities on / or off (display or hide) individually via either an ID or name... I see options of id and object id available in the data field options in the rest doc.. however, I am unsure how to implement... In my below codepen, you can see I am doing a rest call and returning all the shake map data at once... I am trying to return them one at a time per earthquake name or ID... so, I can filter them later "on" or "off"... CodePen.. Full Code: html > head > meta charset = "utf-8" > meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" > title > ArcGIS JavaScript Tutorials : Add layers to a map title > style > html , body , # viewDiv { padding : 0 ; margin : 0 ; height : 100 %; width : 100 %; } style > link rel = "stylesheet" href = "https://js.arcgis.com/4.15/esri/themes/light/main.css" > script src = "https://js.arcgis.com/4.15/" > script > script > require ([ "esri/Map" , "esri/views/MapView" , "esri/layers/FeatureLayer" , "esri/widgets/Legend" ], function ( Map , MapView , FeatureLayer , Legend ) { var map = new Map ({ basemap : "gray" }); var view = new MapView ({ container : "viewDiv" , map : map , center : [- 122 , 37 ], zoom : 5 }); view . ui . add ( new Legend ({ view : view }), "bottom-left" ); // Define a popup for USGS_Seismic_Data_v1 var popupUSGS = { title : "Shake Intensity" , content : [ { type : "fields" , fieldInfos : [ { fieldName : "grid_value" , label : "Grid Value" }, { fieldName : "mag" , label : "Magnitude" }, { fieldName : "eventTime" , label : "Event Time" , format : { dateFormat : "short-date-short-time" } }, { fieldName : "updated" , label : "Updated" , format : { dateFormat : "short-date-short-time" } }, { fieldName : "url" , label : "Url" } ] } ] } // USGS_Seismic_Data_v1 feature layer (polygons) var SeismicData = new FeatureLayer ({ title : "MMI - Shake Intensity" , url : "https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServer/1/" , outFields : [ "mag" , "eventTime" , "url" ], popupTemplate : popupUSGS }); map . add ( SeismicData ); }); script > head > body > div id = "viewDiv" > div > body > html >

Cam, Just set a filter from the start them. view . whenLayerView ( layer ) . then ( function ( layerView ) { eqLayerView = layerView ; eqLayerView . filter = { where : "id = ''" } ; . . .

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

filter shakemaps by earthquake name (or id)

CamCode

My goal is to be able to toggle shake intensities on / or off (display or hide) individually via either an ID or name... I see options of id and object id available in the data field options in the rest doc.. however, I am unsure how to implement... In my below codepen, you can see I am doing a rest call and returning all the shake map data at once... I am trying to return them one at a time per earthquake name or ID... so, I can filter them later "on" or "off"...

CodePen..

Full Code:

<SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"><</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">html</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"><</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">head</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">  </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"><</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">meta charset</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">=</SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"utf-8"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">  </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"><</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">meta name</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">=</SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"viewport"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> content</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">=</SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"initial-scale=1, maximum-scale=1, user-scalable=no"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">  </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"><</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">title</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">></SPAN><SPAN class="" style="color: #97e6fe; border: 0px; font-weight: inherit; font-size: 13px;">ArcGIS</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #97e6fe; border: 0px; font-weight: inherit; font-size: 13px;">JavaScript</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #97e6fe; border: 0px; font-weight: inherit; font-size: 13px;">Tutorials</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #97e6fe; border: 0px; font-weight: inherit; font-size: 13px;">Add</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> layers to a map</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"></</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">title</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">  </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"><</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">style</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">    html</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> body</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">#</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">viewDiv </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">{</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">      padding</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">0</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">;</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">      margin</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">0</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">;</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">      height</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">100</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">%;</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">      width</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">100</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">%;</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">    </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">}</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">  </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"></</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">style</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">  </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"><</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">link rel</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">=</SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"stylesheet"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> href</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">=</SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"https://js.arcgis.com/4.15/esri/themes/light/main.css"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">  </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"><</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">script src</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">=</SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"https://js.arcgis.com/4.15/"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">></</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">script</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">   </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"><</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">script</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">    require</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">([</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">      </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"esri/Map"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">      </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"esri/views/MapView"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">      </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"esri/layers/FeatureLayer"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">      </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"esri/widgets/Legend"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">    </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">],</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px;">function</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">(</SPAN><SPAN class="" style="color: #97e6fe; border: 0px; font-weight: inherit; font-size: 13px;">Map</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #97e6fe; border: 0px; font-weight: inherit; font-size: 13px;">MapView</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #97e6fe; border: 0px; font-weight: inherit; font-size: 13px;">FeatureLayer</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #97e6fe; border: 0px; font-weight: inherit; font-size: 13px;">Legend</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">)</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">{</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">        </SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px;">var</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> map </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">=</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px;">new</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #97e6fe; border: 0px; font-weight: inherit; font-size: 13px;">Map</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">({</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">            basemap</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"gray"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">        </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">});</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">         </SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px;">var</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> view </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">=</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px;">new</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #97e6fe; border: 0px; font-weight: inherit; font-size: 13px;">MapView</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">({</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">            container</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"viewDiv"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">               map</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> map</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">            center</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">[-</SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">122</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">37</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">],</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">            zoom</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">5</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">                     </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">});</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">         view</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">ui</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">add</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">(</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">            </SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px;">new</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #97e6fe; border: 0px; font-weight: inherit; font-size: 13px;">Legend</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">({</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">                view</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> view           </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">}),</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">            </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"bottom-left"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">        </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">);</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">     </SPAN><SPAN class="" style="color: var(--black-400); border: 0px; font-weight: inherit; font-size: 13px;">// Define a popup for USGS_Seismic_Data_v1</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">      </SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px;">var</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> popupUSGS </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">=</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">{</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">        title</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"Shake Intensity"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">        content</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">[</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">          </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">{</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">            type</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"fields"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">            fieldInfos</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">[</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">            </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">{</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">                fieldName</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"grid_value"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">                label</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"Grid Value"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">              </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">},</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">              </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">{</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">                fieldName</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"mag"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">                label</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"Magnitude"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">              </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">},</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">              </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">{</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">                fieldName</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"eventTime"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">                label</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"Event Time"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">                format</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">{</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">                  dateFormat</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"short-date-short-time"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">                </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">}</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">              </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">},</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">              </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">{</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">                fieldName</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"updated"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">                label</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"Updated"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">                format</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">{</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">                  dateFormat</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"short-date-short-time"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">                </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">}</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">              </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">},</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">              </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">{</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">                fieldName</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"url"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">                label</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"Url"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">              </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">}</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">            </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">]</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">          </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">}</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">        </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">]</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">      </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">}</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">    </SPAN><SPAN class="" style="color: var(--black-400); border: 0px; font-weight: inherit; font-size: 13px;">// USGS_Seismic_Data_v1 feature layer (polygons)</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">      </SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px;">var</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #97e6fe; border: 0px; font-weight: inherit; font-size: 13px;">SeismicData</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">=</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px;">new</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #97e6fe; border: 0px; font-weight: inherit; font-size: 13px;">FeatureLayer</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">({</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">        title</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"MMI - Shake Intensity"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">        url</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">  </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServer/1/"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">           outFields</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">[</SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"mag"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"eventTime"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"url"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">],</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">          popupTemplate</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> popupUSGS       </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">});</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">      map</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">add</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">(</SPAN><SPAN class="" style="color: #97e6fe; border: 0px; font-weight: inherit; font-size: 13px;">SeismicData</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">);</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">    </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">});</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">  </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"></</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">script</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"></</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">head</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"><</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">body</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">  </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"><</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">div id</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">=</SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"viewDiv"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">></</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">div</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"></</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">body</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"></</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">html</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;">></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN>

Vind meer berichten getagd met

Accepted answers

RobertScheitlin__GISP

Cam,

Just set a filter from the start them.

        view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenLayerView</SPAN><SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>layerView<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          eqLayerView <SPAN class="operator token">=</SPAN> layerView<SPAN class="punctuation token">;</SPAN>

          eqLayerView<SPAN class="punctuation token">.</SPAN>filter <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
            where<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"id = ''"</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

RobertScheitlin__GISP

Cam,

Here the sample updated for that:

<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>meta charset<SPAN class="operator token">=</SPAN><SPAN class="string token">"utf-8"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>meta
      name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN>
      content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1,maximum-scale=1,user-scalable=no"</SPAN>
    <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Filter features by attribute <SPAN class="operator token">-</SPAN> <SPAN class="number token">4.15</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN>

    <SPAN class="operator token"><</SPAN>link
      rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN>
      href<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.15/esri/themes/light/main.css"</SPAN>
    <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.15/"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>

    <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
      html<SPAN class="punctuation token">,</SPAN>
      body<SPAN class="punctuation token">,</SPAN>
      #viewDiv <SPAN class="punctuation token">{</SPAN>
        padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
        margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
        height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
        width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>

      #id<SPAN class="operator token">-</SPAN>filter <SPAN class="punctuation token">{</SPAN>
        max<SPAN class="operator token">-</SPAN>height<SPAN class="punctuation token">:</SPAN> 400px<SPAN class="punctuation token">;</SPAN>
        width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
        visibility<SPAN class="punctuation token">:</SPAN> hidden<SPAN class="punctuation token">;</SPAN>
        overflow<SPAN class="operator token">-</SPAN>y<SPAN class="punctuation token">:</SPAN> scroll<SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>

      <SPAN class="punctuation token">.</SPAN>id<SPAN class="operator token">-</SPAN>item <SPAN class="punctuation token">{</SPAN>
        width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
        padding<SPAN class="punctuation token">:</SPAN> 12px<SPAN class="punctuation token">;</SPAN>
        text<SPAN class="operator token">-</SPAN>align<SPAN class="punctuation token">:</SPAN> center<SPAN class="punctuation token">;</SPAN>
        vertical<SPAN class="operator token">-</SPAN>align<SPAN class="punctuation token">:</SPAN> baseline<SPAN class="punctuation token">;</SPAN>
        cursor<SPAN class="punctuation token">:</SPAN> pointer<SPAN class="punctuation token">;</SPAN>
        height<SPAN class="punctuation token">:</SPAN> 40px<SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>

      <SPAN class="punctuation token">.</SPAN>id<SPAN class="operator token">-</SPAN>item<SPAN class="punctuation token">:</SPAN>focus <SPAN class="punctuation token">{</SPAN>
        background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> dimgrey<SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>

      <SPAN class="punctuation token">.</SPAN>id<SPAN class="operator token">-</SPAN>item<SPAN class="punctuation token">:</SPAN>hover <SPAN class="punctuation token">{</SPAN>
        background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> dimgrey<SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>

      #titleDiv <SPAN class="punctuation token">{</SPAN>
        padding<SPAN class="punctuation token">:</SPAN> 10px<SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>

      #titleText <SPAN class="punctuation token">{</SPAN>
        font<SPAN class="operator token">-</SPAN>size<SPAN class="punctuation token">:</SPAN> 20pt<SPAN class="punctuation token">;</SPAN>
        font<SPAN class="operator token">-</SPAN>weight<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">60</SPAN><SPAN class="punctuation token">;</SPAN>
        padding<SPAN class="operator token">-</SPAN>bottom<SPAN class="punctuation token">:</SPAN> 10px<SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>
    <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
      <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
        <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/widgets/Expand"</SPAN>
      <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>MapView<SPAN class="punctuation token">,</SPAN> Map<SPAN class="punctuation token">,</SPAN> FeatureLayer<SPAN class="punctuation token">,</SPAN> Expand<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">let</SPAN> floodLayerView<SPAN class="punctuation token">;</SPAN>

        <SPAN class="comment token">// flash flood warnings layer</SPAN>
        <SPAN class="keyword token">const</SPAN> layer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServer/1/"</SPAN><SPAN class="punctuation token">,</SPAN>
          outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">const</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"gray-vector"</SPAN><SPAN class="punctuation token">,</SPAN>
          layers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>layer<SPAN class="punctuation token">]</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">const</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
          container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
          center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">98</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">40</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
          zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">const</SPAN> idNodes <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelectorAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="template-string token"><SPAN class="string token">`.id-item`</SPAN></SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">const</SPAN> idElement <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"id-filter"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="comment token">// click event handler for id choices</SPAN>
        idElement<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addEventListener</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> filterByID<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="comment token">// User clicked on EQ id</SPAN>
        <SPAN class="comment token">// set an attribute filter on earthquake layer view</SPAN>
        <SPAN class="comment token">// to display the areas in that id</SPAN>
        <SPAN class="keyword token">function</SPAN> <SPAN class="token function">filterByID</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">const</SPAN> selectedID <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getAttribute</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"data-id"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          eqLayerView<SPAN class="punctuation token">.</SPAN>filter <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
            where<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"id = '"</SPAN> <SPAN class="operator token">+</SPAN> selectedID <SPAN class="operator token">+</SPAN> <SPAN class="string token">"'"</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenLayerView</SPAN><SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>layerView<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          eqLayerView <SPAN class="operator token">=</SPAN> layerView<SPAN class="punctuation token">;</SPAN>

          <SPAN class="comment token">// set up UI items</SPAN>
          idElement<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>visibility <SPAN class="operator token">=</SPAN> <SPAN class="string token">"visible"</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">const</SPAN> idExpand <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Expand</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
            content<SPAN class="punctuation token">:</SPAN> idElement<SPAN class="punctuation token">,</SPAN>
            expandIconClass<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"esri-icon-filter"</SPAN><SPAN class="punctuation token">,</SPAN>
            group<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"top-left"</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="comment token">//clear the filters when user closes the expand widget</SPAN>
          idExpand<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"expanded"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>idExpand<SPAN class="punctuation token">.</SPAN>expanded<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              eqLayerView<SPAN class="punctuation token">.</SPAN>filter <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>idExpand<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-left"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"titleDiv"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-right"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">var</SPAN> query <SPAN class="operator token">=</SPAN> layer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createQuery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          query<SPAN class="punctuation token">.</SPAN>outFields <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
          query<SPAN class="punctuation token">.</SPAN>returnDistinctValues <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
          query<SPAN class="punctuation token">.</SPAN>returnGeometry <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>
          layer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN>query<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>results<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
            results<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>feat<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
              <SPAN class="keyword token">var</SPAN> id <SPAN class="operator token">=</SPAN> feat<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">;</SPAN>
              <SPAN class="keyword token">var</SPAN> opt <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"div"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
              opt<SPAN class="punctuation token">.</SPAN>className <SPAN class="operator token">=</SPAN> <SPAN class="string token">"id-item visible-id"</SPAN><SPAN class="punctuation token">;</SPAN>
              opt<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setAttribute</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"data-id"</SPAN><SPAN class="punctuation token">,</SPAN> id<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
              opt<SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> id<SPAN class="punctuation token">;</SPAN>
              idElement<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>opt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN>

  <SPAN class="operator token"><</SPAN>body<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"id-filter"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-widget"</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewDiv"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"titleDiv"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-widget"</SPAN><SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"titleText"</SPAN><SPAN class="operator token">></SPAN>Earthquakes<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>div<SPAN class="operator token">></SPAN>Shake Intensity<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

CamCode

Ultimately I suppose how could I loop through and get all the shakemap ids returned from my rest URL call?

CamCode

Thanks, I'm seeming to get a better handle with this approach... except, would there be a way to loop through the definitionExpression ids without having to manually specify?

I have tried to console log SeismicData , but for some reason I am not finding a collection of ids but only one.. I would like to loop through and store these ids in variables as I will later add a time range parameter...

const SeismicData = new FeatureLayer({
title: "MMI - Shake Intensity",
url: "https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServer/1/",
outFields: ["id","mag","eventTime","url"],
popupTemplate: popupUSGS
});

SeismicData.definitionExpression = "grid_value > 2",
SeismicData.definitionExpression = "id = 'us70008jr5'", <------------ i.e. here

map.add(SeismicData);

RobertScheitlin__GISP

Cam Code,

It looks like this sample is what you are looking for then:

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=featurefilter-attributes

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.