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; } } }

add items to map, collectively, one at a time, per attribute id

CamCode

I have successfully been able to filter, for instance shakemaps, by attribute id - I have successfully achieved this multiple ways - but all ending with the same problem.

1.) with the where filter 2.) definition expression 3.) iterating through all attribute ids and bringing them back.

The problem: All exists for only allowing/displaying one per attribute id at a time.. my goal is to feed the attribute ids into a checkbox list (which I have done), but allowing for items via attribute id to be added to the map as they are checked, collectively, one at a time - currently I can not seem to get this to work with the aspect of having multiple or more then one appear at a time on the map - each filter or attempt results in the next item being added while at the same time the previous is replaced (only showing one at a time).

1.) i.e. the below filter (attempted logic 1) - & also here is CodePen of:

<SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.....</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">         </SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">function</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> filterByID</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">(</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">event</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">)</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">{</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">           </SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">const</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> selectedID </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">=</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> event</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">target</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">getAttribute</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">(</SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">"data-id"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">);</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">             eqLayerView</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">filter </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">=</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">{</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">             where</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">"id = '"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">+</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> selectedID </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">+</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">"'"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">           </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">};</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">         </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">}</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">          view</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">whenLayerView</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">(</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">fl</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">)</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">           </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">then</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">(</SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">function</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">(</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">layerView</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">)</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">{</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">            eqLayerView </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">=</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> layerView</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">;</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">            eqLayerView</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">filter </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">=</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">{</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">             where</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">:</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">"id = ''"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">           </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">};</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.............</SPAN>

2.) i.e. another attempted logic (adding multiple at a time here, line by line, or via array):

<SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">layer</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">definitionExpression </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">=</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">"id = 'us70008jr5'"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">layer</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">definitionExpression </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">=</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">"id = 'cgi988jr52'"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">,</SPAN>

3.) i.e. 3rd attempt with a suggestion here on GIS exchange: Loop through attribute ids of FeatureLayer

<SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">layer   </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">load</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">()</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">  </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">then</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">(()</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">=></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">{</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">    </SPAN><SPAN class="" style="color: var(--black-400); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">// create a query from the layer</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">    </SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">const</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> query </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">=</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> layer</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">createQuery</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">();</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">    query</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">returnDistinctValues </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">=</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">true</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">;</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">    query</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">where </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">=</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">"grid_value > 2"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">;</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--black-400); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">// or 1=1 if you need them all</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">    </SPAN><SPAN class="" style="color: var(--black-400); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">// the field you want distinct values for</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">    query</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">outFields </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">=</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">[</SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">"id"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">];</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">    </SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">return</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> layer</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">queryFeatures</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">(</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">query</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">);</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">  </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">})</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">  </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">then</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">(({</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> features </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">})</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">=></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">{</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">    </SPAN><SPAN class="" style="color: var(--black-400); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">// extract the ids to a list</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">    </SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">const</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> ids </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">=</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> features</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">map</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">(({</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> attributes </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">})</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">=></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> attributes</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">id</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">);</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">    </SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">return</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> ids</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">;</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">  </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">})</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">  </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">then</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">((</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">ids</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">)</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">=></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">{</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">    </SPAN><SPAN class="" style="color: var(--black-400); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">// You can store them how you want, in this case,</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">    </SPAN><SPAN class="" style="color: var(--black-400); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">// I put them in a dropdown select menu</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">    </SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">const</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> fragment </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">=</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> document</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">createDocumentFragment</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">();</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">    ids</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">forEach</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">((</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">id</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">)</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">=></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">{</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">      </SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">const</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> option </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">=</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> document</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">createElement</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">(</SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">'option'</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">);</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">      option</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">value </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">=</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> id</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">;</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">      option</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">innerText </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">=</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"> id</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">;</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">      fragment</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">appendChild</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">(</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">option</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">);</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">    </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">});</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">    list</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">appendChild</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">(</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">fragment</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">);</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">    map</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">add</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">(</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">layer</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">);</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;"></SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; padding: 0px;">});</SPAN>

All attempted logic above result in the toggling of a shakemap by attribute id to be displayed only one at a time â by toggling a new on, the previous turns off, I need the ability to have multiple being able to exist on the map at once.

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Updated code to ensure only unique vals added as checkboxes.

Cam,

Here is my changes to your code.

If you just need to query a service for the data then do not use a FeatureLayer just for that.
no need for a GraphicsLayer at all if you are just adding the graphics to a client side FeatureLayer
The filter need to applied to your client side FeatureLayer.

<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>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>title<SPAN class="operator token">></SPAN>ArcGIS JavaScript Tutorials<SPAN class="punctuation token">:</SPAN> Add layers to a map<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<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>

    <SPAN class="punctuation token">.</SPAN>contn <SPAN class="punctuation token">{</SPAN>
      position<SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN>
      bottom<SPAN class="punctuation token">:</SPAN> 0px<SPAN class="punctuation token">;</SPAN>
      left<SPAN class="punctuation token">:</SPAN> 0px<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>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>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>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/Map"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/geometry/geometryEngine"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/geometry/Circle"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/Graphic"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/symbols/SimpleFillSymbol"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/renderers/ClassBreaksRenderer"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/widgets/Legend"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/tasks/QueryTask"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/tasks/support/Query"</SPAN>
    <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>
      Map<SPAN class="punctuation token">,</SPAN>
      MapView<SPAN class="punctuation token">,</SPAN>
      FeatureLayer<SPAN class="punctuation token">,</SPAN>
      geometryEngine<SPAN class="punctuation token">,</SPAN>
      Circle<SPAN class="punctuation token">,</SPAN>
      Graphic<SPAN class="punctuation token">,</SPAN>
      SimpleFillSymbol<SPAN class="punctuation token">,</SPAN>
      ClassBreaksRenderer<SPAN class="punctuation token">,</SPAN>
      Legend<SPAN class="punctuation token">,</SPAN>
      QueryTask<SPAN class="punctuation token">,</SPAN>
      Query<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>

      <SPAN class="keyword token">var</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"</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">var</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>
        container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
        map<SPAN class="punctuation token">:</SPAN> map<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">122</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">37</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
        zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">let</SPAN> eqLayerView<SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">let</SPAN> fl<SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">let</SPAN> gras <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">let</SPAN> dVals <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">let</SPAN> QT <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">QueryTask</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><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">let</SPAN> query <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      query<SPAN class="punctuation token">.</SPAN>where <SPAN class="operator token">=</SPAN> <SPAN class="string token">"eventTime >= CURRENT_TIMESTAMP - 30 AND grid_value > 2"</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>
      query<SPAN class="punctuation token">.</SPAN>orderByFields <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>
      QT<SPAN class="punctuation token">.</SPAN><SPAN class="token function">execute</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">let</SPAN> id <SPAN class="operator token">=</SPAN> feat<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">[</SPAN><SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>dVals<SPAN class="punctuation token">[</SPAN>id<SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">===</SPAN> undefined<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
            dVals<SPAN class="punctuation token">[</SPAN>id<SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">let</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">"input"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            opt<SPAN class="punctuation token">.</SPAN>type <SPAN class="operator token">=</SPAN> <SPAN class="string token">"checkbox"</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">let</SPAN> label <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">'label'</SPAN><SPAN class="punctuation token">)</SPAN>
            label<SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> id<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 shakeids"</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>name <SPAN class="operator token">=</SPAN> <SPAN class="string token">"shaks"</SPAN><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>
            idElement<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>label<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="token function">getCur</SPAN><SPAN class="punctuation token">(</SPAN>event<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="keyword token">catch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>err<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
        console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">error</SPAN><SPAN class="punctuation token">(</SPAN>err<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="keyword token">function</SPAN> <SPAN class="token function">getCur</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">let</SPAN> chkst <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelector</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.shaked'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>chkst<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          chkst<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="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="token function">getCur</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>

      query<SPAN class="punctuation token">.</SPAN>outFields <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</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">false</SPAN><SPAN class="punctuation token">;</SPAN>
      query<SPAN class="punctuation token">.</SPAN>returnGeometry <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
      QT<SPAN class="punctuation token">.</SPAN><SPAN class="token function">execute</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>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        evt<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">var</SPAN> att <SPAN class="operator token">=</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes
          <SPAN class="keyword token">var</SPAN> test <SPAN class="operator token">=</SPAN> geometryEngine<SPAN class="punctuation token">.</SPAN><SPAN class="token function">convexHull</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">)</SPAN>
          <SPAN class="keyword token">var</SPAN> genpoly <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">null</SPAN>
          <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>att<SPAN class="punctuation token">.</SPAN>grid_value <SPAN class="operator token"><=</SPAN> <SPAN class="number token">4.0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">var</SPAN> rad <SPAN class="operator token">=</SPAN> att<SPAN class="punctuation token">.</SPAN>Shape__Length <SPAN class="operator token">/</SPAN> <SPAN class="number token">75</SPAN>
            genpoly <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Circle</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
              center<SPAN class="punctuation token">:</SPAN> test<SPAN class="punctuation token">.</SPAN>centroid<SPAN class="punctuation token">,</SPAN>
              radius<SPAN class="punctuation token">:</SPAN> rad<SPAN class="punctuation token">,</SPAN>
              radiusUnit<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"meters"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
          <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
            genpoly <SPAN class="operator token">=</SPAN> test
          <SPAN class="punctuation token">}</SPAN>
          <SPAN class="keyword token">var</SPAN> polygonGraphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            geometry<SPAN class="punctuation token">:</SPAN> genpoly<SPAN class="punctuation token">,</SPAN>
            attributes<SPAN class="punctuation token">:</SPAN> att<SPAN class="punctuation token">,</SPAN>
            type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"polygon"</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          gras<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>polygonGraphic<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="keyword token">var</SPAN> renderer <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"class-breaks"</SPAN><SPAN class="punctuation token">,</SPAN>
          field<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"grid_value"</SPAN><SPAN class="punctuation token">,</SPAN>
          classificationMethod<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"esriClassifyManual"</SPAN><SPAN class="punctuation token">,</SPAN>
          classBreakInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1.9999</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"I (Not Felt)"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2.0</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3.0</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">191</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">204</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">.</SPAN><SPAN class="number token">3</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"II (Weak)"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3.1</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3.9</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">153</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">153</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">.</SPAN><SPAN class="number token">4</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"III (Weak)"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4.0</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4.5</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">136</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"IV (Light)"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4.5</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4.9999</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">125</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">248</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">148</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"V (Light)"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">6.0</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">6.9999</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"VI (Strong)"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">7.0</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">7.9999</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">221</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"VII (Very Strong)"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">8.0</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">8.9999</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">145</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"VIII (Severe) "</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">9.0</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">9.9999</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"IX (Violent)"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">10.0</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">10.9999</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">221</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"X"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">11.0</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">11.9999</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">136</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"XI"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">12.0</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">12.0</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">68</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"XII"</SPAN>
            <SPAN class="punctuation token">}</SPAN>
          <SPAN class="punctuation token">]</SPAN>
        <SPAN class="punctuation token">}</SPAN>
        <SPAN class="keyword token">var</SPAN> popuptemp <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
          title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Shake Intensity"</SPAN><SPAN class="punctuation token">,</SPAN>
          content<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
            type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"fields"</SPAN><SPAN class="punctuation token">,</SPAN>
            fieldInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
                fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"grid_value"</SPAN><SPAN class="punctuation token">,</SPAN>
                label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Grid Value"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              <SPAN class="punctuation token">{</SPAN>
                fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">,</SPAN>
                label<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>
                fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ObjectID"</SPAN><SPAN class="punctuation token">,</SPAN>
                label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ObjectID"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              <SPAN class="punctuation token">{</SPAN>
                fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"url"</SPAN><SPAN class="punctuation token">,</SPAN>
                label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Url"</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>
        fl <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>
          source<SPAN class="punctuation token">:</SPAN> gras<SPAN class="punctuation token">,</SPAN>
          objectIdField<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ObjectID"</SPAN><SPAN class="punctuation token">,</SPAN>
          geometryType<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"polygon"</SPAN><SPAN class="punctuation token">,</SPAN>
          fields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
            name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ObjectID"</SPAN><SPAN class="punctuation token">,</SPAN>
            alias<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ObjectID"</SPAN><SPAN class="punctuation token">,</SPAN>
            type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"oid"</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
            name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">,</SPAN>
            alias<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">,</SPAN>
            type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"string"</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
            name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"url"</SPAN><SPAN class="punctuation token">,</SPAN>
            alias<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"url"</SPAN><SPAN class="punctuation token">,</SPAN>
            type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"string"</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
            name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"grid_value"</SPAN><SPAN class="punctuation token">,</SPAN>
            alias<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"grid_value"</SPAN><SPAN class="punctuation token">,</SPAN>
            type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"double"</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
          renderer<SPAN class="punctuation token">:</SPAN> renderer<SPAN class="punctuation token">,</SPAN>
          popupEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
          popupTemplate<SPAN class="punctuation token">:</SPAN> popuptemp
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>fl<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>fl<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="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">let</SPAN> quakeFoldr <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">"Shakemaps"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>parentElement<SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">let</SPAN> onup <SPAN class="operator token">=</SPAN> quakeFoldr<SPAN class="punctuation token">.</SPAN>parentElement<SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">let</SPAN> twup <SPAN class="operator token">=</SPAN> onup<SPAN class="punctuation token">.</SPAN>parentElement<SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">let</SPAN> idElement <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>
      <SPAN class="keyword token">let</SPAN> isElement <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">"ul"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      idElement<SPAN class="punctuation token">.</SPAN>className <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"shaked"</SPAN><SPAN class="punctuation token">;</SPAN>
      isElement<SPAN class="punctuation token">.</SPAN>className <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"k-group"</SPAN><SPAN class="punctuation token">;</SPAN>
      twup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>idElement<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      idElement<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>isElement<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</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">let</SPAN> sqlExp <SPAN class="operator token">=</SPAN> <SPAN class="string token">''</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">let</SPAN> idChkBoxes <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>
        idChkBoxes<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">.</SPAN>checked<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            sqlExp <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"'"</SPAN> <SPAN class="operator token">+</SPAN> node<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="operator 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="punctuation token">;</SPAN>
        sqlExp <SPAN class="operator token">=</SPAN> sqlExp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">replace</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">/</SPAN><SPAN class="string token">' /g, "'</SPAN><SPAN class="punctuation token">,</SPAN> "<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        sqlExp <SPAN class="operator token">=</SPAN> sqlExp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">substring</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> sqlExp<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">-</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">info</SPAN><SPAN class="punctuation token">(</SPAN>sqlExp<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 IN ("</SPAN> <SPAN class="operator token">+</SPAN> sqlExp <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>
    <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">"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 <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"contn"</SPAN><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>
        <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"Shakemaps"</SPAN><SPAN class="operator token">></SPAN>Shakemaps<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>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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

RobertScheitlin__GISP

Cam,

It is simply a matter of building a proper SQL expression for multiple values.

<SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px;">"id IN ('us70008jr5'</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;">'cgi988jr52')"</SPAN>

CamCode

Thanks so much Robert, was pursuing this until noticed this service is now gone since today? https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServer/1/ (no layers found) - It was working yesterday, is this just maintenance or it being marked as depreciated as well?

RobertScheitlin__GISP

Sorry I don't know. My guess is some issue or maintenance though.

CamCode

It is back now, strange....

CamCode

Is it possible to update or add to and already declared definition expression? For instance, in your format above I can declare multiple in the initial definationExpression with id, but as soon as I try to update or add to it, it never reads.

I am able to hardcode the values in now initially, or pass initial variables in with multiple taking effect now - but as soon as I try to update or change my initial i.e. my 'layer.definitionExpression = "id IN ('"+ selectedID + "','us6000a4yi')";' - it does not update, only seemingly executing the first instance of definitionExpression with the id.

It appears now I'm struggling with how to update a definitionExpression (add to, remove, or replace) - I have tried layer.refresh(); in attempt for it to read my latest definition, but still didn't seem to work, I have also tried nesting them in variables and functions. This appears to be similar to what I'm trying to do: How to setDefinitionExpression on FeatureLayer in web map? (v3.30) -except in 3.30 version, I also tried this and wont take the syntax in 4.xyz.

<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;">let</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> selectedID</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;">let</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px;"> datA</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;">         layer</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;">definitionExpression </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;">"id IN ('')"</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;"> filterByID</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;">event</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;">        console</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;">log</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;">'filter hit'</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;">        selectedID </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;"> event</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;">target</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;">getAttribute</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;">"data-id"</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;">        console</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;">log</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;">selectedID</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;">        layer</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;">refresh</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;">        layer</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;">definitionExpression </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;">"id IN ('"</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;"> selectedID </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;">"')"</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>

CamCode

i.e. a simple demo logic, where I can't seem to update a definationExpression (add to, remove, re-add as a new), starting with none, here I try to simple add one, console log is fine, just wont seem to take a second instant of. You can see my attempt to refresh() and "" in attempt to add a new.

<SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">    </SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">let</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;"> selectedID</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">;</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">    </SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">let</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;"> datA</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">;</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">         layer</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">definitionExpression </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">=</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">"id IN ('')"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">; <-------- initial state nothing</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">         </SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">function</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;"> filterByID</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">(</SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">event</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">)</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;"> </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">{</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">        console</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">log</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">(</SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">'filter hit'</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">);</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">        selectedID </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">=</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;"> </SPAN><SPAN class="" style="color: var(--blue-800); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">event</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">target</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">getAttribute</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">(</SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">"data-id"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">);</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">        console</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">log</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">(</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">selectedID</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">);</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">        layer</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">refresh</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">();</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">        layer</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">.</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">definitionExpression </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">=</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;"> </SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">"id IN ('"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">+</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;"> selectedID </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">+</SPAN><SPAN class="" style="color: var(--red-800); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">"')"</SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">;  <------- attempt to update/replace with selected id </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">    </SPAN><SPAN class="" style="color: var(--black-750); border: 0px; font-weight: inherit; font-size: 13px; margin: 0px;">}</SPAN>

kenbuja

You have a typo on your last line. It's "definitionExpression", not "DefinitionExpression"

RobertScheitlin__GISP

Cam,

Sounds like you are missing the basic logic that you need to be applying. So right now you have the filterById function firing when a checkbox is checked/unchecked. Your main issue is that you are not trying to see if an other checkboxes are checked/unchecked. Each time a checkbox is checked you need to be looping through all the check boxes to see which are checked and which are not. That way you can be building your SQL statement properly.

        <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">let</SPAN> sqlExp <SPAN class="operator token">=</SPAN> <SPAN class="string token">''</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">let</SPAN> idChkBoxes <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>
          idChkBoxes<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">.</SPAN>checked<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
              sqlExp <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"'"</SPAN> <SPAN class="operator token">+</SPAN> node<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="operator 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="punctuation token">;</SPAN>
          sqlExp <SPAN class="operator token">=</SPAN> sqlExp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">replace</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">/</SPAN><SPAN class="string token">' /g, "'</SPAN><SPAN class="punctuation token">,</SPAN> "<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          sqlExp <SPAN class="operator token">=</SPAN> sqlExp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">substring</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> sqlExp<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">-</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">info</SPAN><SPAN class="punctuation token">(</SPAN>sqlExp<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 IN ("</SPAN> <SPAN class="operator token">+</SPAN> sqlExp <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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<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>

CamCode

Thanks so much, Robert - I get you on the checkbox looping and building of the string... The problem is my feature layer contains some custom graphics, from some testing I could filter it with the server-side logic 'definationExpression' but was never successful with the more client-side 'using the view' solution as I am passing my initial layer data to some graphics. Will the client side 'view' filter still work in my scenario? Could I build the string like you have above with serverside 'definationExpression'? i.e. below is how I pass my initial feature layer data to some custom graphics in the form of a new layer:

graphics = new FeatureLayer({
source: graphicsLayer.graphics,
objectIdField: "ObjectID",
geometryType: "polygon",
fields: [{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
},{
name: "id",
alias: "id",
type: "string"
}, {
name: "url",
alias: "url",
type: "string"
}, {
name: "grid_value",
alias: "grid_value",
type: "double"
}],
renderer: renderer,
popupEnabled: true,
popupTemplate: popuptemp
});
map.add(graphics);
});
});

RobertScheitlin__GISP

Don't see why not.

CamCode

I still can't seem to find the correct place to capture my layer view to use for the client side filter; I have tried on 'fl' as well as 'SeismicData' layers. Below is my complete code: (there is no syntax errors, not sure why the editor below is commenting out a closing bracket, the only errors arise are ones referencing the layerview 'eqLayerView'

<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>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>title<SPAN class="operator token">></SPAN>ArcGIS JavaScript Tutorials<SPAN class="punctuation token">:</SPAN> Add layers to a map<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<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>
    <SPAN class="punctuation token">.</SPAN>contn <SPAN class="punctuation token">{</SPAN> position<SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN> bottom<SPAN class="punctuation token">:</SPAN> 0px<SPAN class="punctuation token">;</SPAN> left<SPAN class="punctuation token">:</SPAN> 0px<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>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>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>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/Map"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/geometry/geometryEngine"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/geometry/Circle"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/Graphic"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/layers/GraphicsLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/symbols/SimpleFillSymbol"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/renderers/ClassBreaksRenderer"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/widgets/Legend"</SPAN>
    <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>
      Map<SPAN class="punctuation token">,</SPAN>
      MapView<SPAN class="punctuation token">,</SPAN>
      FeatureLayer<SPAN class="punctuation token">,</SPAN>
      geometryEngine<SPAN class="punctuation token">,</SPAN>
      Circle<SPAN class="punctuation token">,</SPAN>
      Graphic<SPAN class="punctuation token">,</SPAN>
      GraphicsLayer<SPAN class="punctuation token">,</SPAN>
      SimpleFillSymbol<SPAN class="punctuation token">,</SPAN>
      ClassBreaksRenderer<SPAN class="punctuation token">,</SPAN>
      Legend<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
      
      <SPAN class="keyword token">var</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"</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      
      <SPAN class="keyword token">var</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>
        container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
        map<SPAN class="punctuation token">:</SPAN> map<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">122</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">37</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
        zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      
      <SPAN class="token function">shakeLays</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            
      <SPAN class="keyword token">function</SPAN> <SPAN class="token function">shakeLays</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> 
       
          <SPAN class="keyword token">let</SPAN> selectedID<SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">let</SPAN> currentShakes<SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">let</SPAN> SeismicData<SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">let</SPAN> eqLayerView<SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">let</SPAN> fl<SPAN class="punctuation token">;</SPAN> 
                
          <SPAN class="token function">fetchdata</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

          <SPAN class="keyword token">function</SPAN> <SPAN class="token function">fetchdata</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
            SeismicData <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>
              title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"MMI - Shake Intensity"</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="punctuation token">;</SPAN>
                        
            SeismicData<SPAN class="punctuation token">.</SPAN>definitionExpression <SPAN class="operator token">=</SPAN> <SPAN class="string token">"eventTime >= CURRENT_TIMESTAMP - 30 AND grid_value > 2"</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="comment token">//map.add(SeismicData);</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>



          <SPAN class="keyword token">let</SPAN> quakeFoldr <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">"Shakemaps"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>parentElement<SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">let</SPAN> onup <SPAN class="operator token">=</SPAN> quakeFoldr<SPAN class="punctuation token">.</SPAN>parentElement<SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">let</SPAN> twup <SPAN class="operator token">=</SPAN> onup<SPAN class="punctuation token">.</SPAN>parentElement<SPAN class="punctuation token">;</SPAN>

          <SPAN class="keyword token">let</SPAN> idElement <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>
          <SPAN class="keyword token">let</SPAN> isElement <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">"ul"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

          idElement<SPAN class="punctuation token">.</SPAN>className <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"shaked"</SPAN><SPAN class="punctuation token">;</SPAN>
          isElement<SPAN class="punctuation token">.</SPAN>className <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"k-group"</SPAN><SPAN class="punctuation token">;</SPAN>
          twup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>idElement<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          idElement<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>isElement<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

          <SPAN class="keyword token">var</SPAN> graphicsLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GraphicsLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</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>
             console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'filter hit'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
              <SPAN class="keyword token">let</SPAN> sqlExp <SPAN class="operator token">=</SPAN> <SPAN class="string token">''</SPAN><SPAN class="punctuation token">;</SPAN>
              <SPAN class="keyword token">let</SPAN> idChkBoxes <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>
              idChkBoxes<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">.</SPAN>checked<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
                  sqlExp <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"'"</SPAN> <SPAN class="operator token">+</SPAN> node<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="operator 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="punctuation token">;</SPAN>
              sqlExp <SPAN class="operator token">=</SPAN> sqlExp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">replace</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">/</SPAN><SPAN class="string token">' /g, "'</SPAN><SPAN class="punctuation token">,</SPAN> "<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
              sqlExp <SPAN class="operator token">=</SPAN> sqlExp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">substring</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> sqlExp<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">-</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
              <SPAN class="comment token">//console.info(sqlExp);</SPAN>
             
              <SPAN class="comment token">// SeismicData.definitionExpression = "id IN (" + sqlExp + ")";</SPAN>
              <SPAN class="comment token">// SeismicData.refresh();</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 IN ("</SPAN> <SPAN class="operator token">+</SPAN> sqlExp <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">when</SPAN><SPAN class="punctuation token">(</SPAN>SeismicData<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>
            
              <SPAN class="keyword token">var</SPAN> query <SPAN class="operator token">=</SPAN> SeismicData<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>

              SeismicData<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">let</SPAN> id <SPAN class="operator token">=</SPAN> feat<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">[</SPAN><SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
                  <SPAN class="keyword token">let</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">"input"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                  opt<SPAN class="punctuation token">.</SPAN>type <SPAN class="operator token">=</SPAN> <SPAN class="string token">"checkbox"</SPAN><SPAN class="punctuation token">;</SPAN>
                  <SPAN class="keyword token">let</SPAN> label <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">'label'</SPAN><SPAN class="punctuation token">)</SPAN>
                  label<SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> id<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 shakeids"</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>name <SPAN class="operator token">=</SPAN> <SPAN class="string token">"shaks"</SPAN><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>
                  idElement<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>label<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                  <SPAN class="token function">getCur</SPAN><SPAN class="punctuation token">(</SPAN>event<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><SPAN class="token function">whenLayerView</SPAN><SPAN class="punctuation token">(</SPAN>SeismicData<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>
                  console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>eqLayerView<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                  console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>SeismicData<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                  <SPAN class="comment token">// eqLayerView.filter = {</SPAN>
                  <SPAN class="comment token">//   where: "id = ''"</SPAN>
                  <SPAN class="comment 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="keyword token">function</SPAN> <SPAN class="token function">getCur</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">let</SPAN> chkst <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelector</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.shaked'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>chkst<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> 
                    chkst<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="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
                  <SPAN class="token function">getCur</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>

              SeismicData<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN><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>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                evt<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                  
                  <SPAN class="keyword token">var</SPAN> att <SPAN class="operator token">=</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes
                  <SPAN class="keyword token">var</SPAN> test <SPAN class="operator token">=</SPAN> geometryEngine<SPAN class="punctuation token">.</SPAN><SPAN class="token function">convexHull</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">)</SPAN>
                  <SPAN class="keyword token">var</SPAN> genpoly <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">null</SPAN>
                  <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>att<SPAN class="punctuation token">.</SPAN>grid_value <SPAN class="operator token"><=</SPAN> <SPAN class="number token">4.0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">var</SPAN> rad <SPAN class="operator token">=</SPAN> att<SPAN class="punctuation token">.</SPAN>Shape__Length <SPAN class="operator token">/</SPAN> <SPAN class="number token">75</SPAN>
                    genpoly <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Circle</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                      center<SPAN class="punctuation token">:</SPAN> test<SPAN class="punctuation token">.</SPAN>centroid<SPAN class="punctuation token">,</SPAN>
                      radius<SPAN class="punctuation token">:</SPAN> rad<SPAN class="punctuation token">,</SPAN>
                      radiusUnit<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"meters"</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
                  <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
                    genpoly <SPAN class="operator token">=</SPAN> test
                  <SPAN class="punctuation token">}</SPAN>
                  <SPAN class="keyword token">var</SPAN> polygonGraphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                    geometry<SPAN class="punctuation token">:</SPAN> genpoly<SPAN class="punctuation token">,</SPAN>
                    attributes<SPAN class="punctuation token">:</SPAN> att<SPAN class="punctuation token">,</SPAN>
                    type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"polygon"</SPAN>
                  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                  graphicsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>polygonGraphic<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="keyword token">var</SPAN> renderer <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"class-breaks"</SPAN><SPAN class="punctuation token">,</SPAN>
                  field<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"grid_value"</SPAN><SPAN class="punctuation token">,</SPAN>
                  classificationMethod<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"esriClassifyManual"</SPAN><SPAN class="punctuation token">,</SPAN>
                  classBreakInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
                      minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN>
                      maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1.9999</SPAN><SPAN class="punctuation token">,</SPAN>
                      symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                        color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                        outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                          color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                          width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                          style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                        type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                        style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                      label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"I (Not Felt)"</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                    <SPAN class="punctuation token">{</SPAN>
                      minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2.0</SPAN><SPAN class="punctuation token">,</SPAN>
                      maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3.0</SPAN><SPAN class="punctuation token">,</SPAN>
                      symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                        color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">191</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">204</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">.</SPAN><SPAN class="number token">3</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                        outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                          color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                          width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                          style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                        type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                        style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                      label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"II (Weak)"</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                    <SPAN class="punctuation token">{</SPAN>
                      minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3.1</SPAN><SPAN class="punctuation token">,</SPAN>
                      maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3.9</SPAN><SPAN class="punctuation token">,</SPAN>
                      symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                        color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">153</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">153</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">.</SPAN><SPAN class="number token">4</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                        outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                          color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                          width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                          style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                        type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                        style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                      label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"III (Weak)"</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                    <SPAN class="punctuation token">{</SPAN>
                      minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4.0</SPAN><SPAN class="punctuation token">,</SPAN>
                      maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4.5</SPAN><SPAN class="punctuation token">,</SPAN>
                      symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                        color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">136</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                        outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                          color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                          width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                          style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                        type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                        style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                      label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"IV (Light)"</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                    <SPAN class="punctuation token">{</SPAN>
                      minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4.5</SPAN><SPAN class="punctuation token">,</SPAN>
                      maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4.9999</SPAN><SPAN class="punctuation token">,</SPAN>
                      symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                        color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">125</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">248</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">148</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                        outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                          color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                          width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                          style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                        type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                        style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                      label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"V (Light)"</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                    <SPAN class="punctuation token">{</SPAN>
                      minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">6.0</SPAN><SPAN class="punctuation token">,</SPAN>
                      maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">6.9999</SPAN><SPAN class="punctuation token">,</SPAN>
                      symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                        color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                        outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                          color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                          width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                          style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                        type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                        style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                      label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"VI (Strong)"</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                    <SPAN class="punctuation token">{</SPAN>
                      minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">7.0</SPAN><SPAN class="punctuation token">,</SPAN>
                      maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">7.9999</SPAN><SPAN class="punctuation token">,</SPAN>
                      symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                        color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">221</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                        outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                          color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                          width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                          style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                        type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                        style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                      label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"VII (Very Strong)"</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                    <SPAN class="punctuation token">{</SPAN>
                      minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">8.0</SPAN><SPAN class="punctuation token">,</SPAN>
                      maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">8.9999</SPAN><SPAN class="punctuation token">,</SPAN>
                      symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                        color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">145</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                        outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                          color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                          width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                          style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                        type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                        style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                      label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"VIII (Severe) "</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                    <SPAN class="punctuation token">{</SPAN>
                      minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">9.0</SPAN><SPAN class="punctuation token">,</SPAN>
                      maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">9.9999</SPAN><SPAN class="punctuation token">,</SPAN>
                      symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                        color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                        outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                          color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                          width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                          style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                        type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                        style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                      label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"IX (Violent)"</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                    <SPAN class="punctuation token">{</SPAN>
                      minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">10.0</SPAN><SPAN class="punctuation token">,</SPAN>
                      maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">10.9999</SPAN><SPAN class="punctuation token">,</SPAN>
                      symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                        color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">221</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                        outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                          color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                          width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                          style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                        type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                        style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                      label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"X"</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                    <SPAN class="punctuation token">{</SPAN>
                      minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">11.0</SPAN><SPAN class="punctuation token">,</SPAN>
                      maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">11.9999</SPAN><SPAN class="punctuation token">,</SPAN>
                      symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                        color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">136</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                        outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                          color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                          width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                          style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                        type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                        style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                      label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"XI"</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                    <SPAN class="punctuation token">{</SPAN>
                      minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">12.0</SPAN><SPAN class="punctuation token">,</SPAN>
                      maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">12.0</SPAN><SPAN class="punctuation token">,</SPAN>
                      symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                        color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">68</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                        outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                          color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                          width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                          style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                        type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                        style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                      label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"XII"</SPAN>
                    <SPAN class="punctuation token">}</SPAN>
                  <SPAN class="punctuation token">]</SPAN>
                <SPAN class="punctuation token">}</SPAN>
                <SPAN class="keyword token">var</SPAN> popuptemp <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
                  title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Shake Intensity"</SPAN><SPAN class="punctuation token">,</SPAN>
                  content<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
                    type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"fields"</SPAN><SPAN class="punctuation token">,</SPAN>
                    fieldInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
                        fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"grid_value"</SPAN><SPAN class="punctuation token">,</SPAN>
                        label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Grid Value"</SPAN>
                      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                      <SPAN class="punctuation token">{</SPAN>
                        fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">,</SPAN>
                        label<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>
                        fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ObjectID"</SPAN><SPAN class="punctuation token">,</SPAN>
                        label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ObjectID"</SPAN>
                      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                      <SPAN class="punctuation token">{</SPAN>
                        fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"url"</SPAN><SPAN class="punctuation token">,</SPAN>
                        label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Url"</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>
                fl <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>
                  source<SPAN class="punctuation token">:</SPAN> graphicsLayer<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">,</SPAN>
                  objectIdField<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ObjectID"</SPAN><SPAN class="punctuation token">,</SPAN>
                  geometryType<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"polygon"</SPAN><SPAN class="punctuation token">,</SPAN>
                  fields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
                    name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ObjectID"</SPAN><SPAN class="punctuation token">,</SPAN>
                    alias<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ObjectID"</SPAN><SPAN class="punctuation token">,</SPAN>
                    type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"oid"</SPAN>
                  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="punctuation token">{</SPAN>
                    name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">,</SPAN>
                    alias<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">,</SPAN>
                    type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"string"</SPAN>
                  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
                    name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"url"</SPAN><SPAN class="punctuation token">,</SPAN>
                    alias<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"url"</SPAN><SPAN class="punctuation token">,</SPAN>
                    type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"string"</SPAN>
                  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
                    name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"grid_value"</SPAN><SPAN class="punctuation token">,</SPAN>
                    alias<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"grid_value"</SPAN><SPAN class="punctuation token">,</SPAN>
                    type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"double"</SPAN>
                  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  renderer<SPAN class="punctuation token">:</SPAN> renderer<SPAN class="punctuation token">,</SPAN>
                  popupEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                  popupTemplate<SPAN class="punctuation token">:</SPAN> popuptemp
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>fl<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>fl<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">"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 <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"contn"</SPAN><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>
        <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"Shakemaps"</SPAN><SPAN class="operator token">></SPAN>Shakemaps<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>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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

RobertScheitlin__GISP

Cam,

This service you are using is horribly buggy and terrible. Are you sure you want to continue to invest time working with it?

CamCode

I just noticed it was down again since about 30 minutes ago - I started on ..../mapserver/12/ service for the shake intensities but noticed that was updated as depreciated as of May 2020, the link in that message refereed me to .../featureserver/1/ as the latest recommendation. i.e. https://www.arcgis.com/home/item.html?id=af7568d8579048f7b42e534891824029 -> points to this as new version: https://www.arcgis.com/home/item.html?id=9e2f2b544c954fda9cd13b7f3e6eebce - what other options may I have? The service layer was out completely yesterday for maybe 2 hours, now it looks like the queries or object is stripped (hopefully will resume soon as well, I experienced similar outages from ../mapserver/12/ as well before realizing it was marked depreciated and moving to featureserver/1/)

RobertScheitlin__GISP

You should call tech support and report the issue with the service.

CamCode

It looks like it is back up now, the live codepen (with the above code) is here. I prefer the client side filter but have never gotten it to work with my graphic polygons I customized with the 'SeismicData' layer data - I have gotten the filters to work initially with the 'server-side' definitionExpression which is why I was pursuing that one, I just wasnt able to update the id definitionExpression after one was initially called.

RobertScheitlin__GISP

Updated code to ensure only unique vals added as checkboxes.

Cam,

Here is my changes to your code.

If you just need to query a service for the data then do not use a FeatureLayer just for that.
no need for a GraphicsLayer at all if you are just adding the graphics to a client side FeatureLayer
The filter need to applied to your client side FeatureLayer.

<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>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>title<SPAN class="operator token">></SPAN>ArcGIS JavaScript Tutorials<SPAN class="punctuation token">:</SPAN> Add layers to a map<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<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>

    <SPAN class="punctuation token">.</SPAN>contn <SPAN class="punctuation token">{</SPAN>
      position<SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN>
      bottom<SPAN class="punctuation token">:</SPAN> 0px<SPAN class="punctuation token">;</SPAN>
      left<SPAN class="punctuation token">:</SPAN> 0px<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>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>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>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/Map"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/geometry/geometryEngine"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/geometry/Circle"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/Graphic"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/symbols/SimpleFillSymbol"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/renderers/ClassBreaksRenderer"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/widgets/Legend"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/tasks/QueryTask"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/tasks/support/Query"</SPAN>
    <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>
      Map<SPAN class="punctuation token">,</SPAN>
      MapView<SPAN class="punctuation token">,</SPAN>
      FeatureLayer<SPAN class="punctuation token">,</SPAN>
      geometryEngine<SPAN class="punctuation token">,</SPAN>
      Circle<SPAN class="punctuation token">,</SPAN>
      Graphic<SPAN class="punctuation token">,</SPAN>
      SimpleFillSymbol<SPAN class="punctuation token">,</SPAN>
      ClassBreaksRenderer<SPAN class="punctuation token">,</SPAN>
      Legend<SPAN class="punctuation token">,</SPAN>
      QueryTask<SPAN class="punctuation token">,</SPAN>
      Query<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>

      <SPAN class="keyword token">var</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"</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">var</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>
        container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
        map<SPAN class="punctuation token">:</SPAN> map<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">122</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">37</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
        zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">let</SPAN> eqLayerView<SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">let</SPAN> fl<SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">let</SPAN> gras <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">let</SPAN> dVals <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">let</SPAN> QT <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">QueryTask</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><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">let</SPAN> query <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      query<SPAN class="punctuation token">.</SPAN>where <SPAN class="operator token">=</SPAN> <SPAN class="string token">"eventTime >= CURRENT_TIMESTAMP - 30 AND grid_value > 2"</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>
      query<SPAN class="punctuation token">.</SPAN>orderByFields <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>
      QT<SPAN class="punctuation token">.</SPAN><SPAN class="token function">execute</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">let</SPAN> id <SPAN class="operator token">=</SPAN> feat<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">[</SPAN><SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>dVals<SPAN class="punctuation token">[</SPAN>id<SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">===</SPAN> undefined<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
            dVals<SPAN class="punctuation token">[</SPAN>id<SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">let</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">"input"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            opt<SPAN class="punctuation token">.</SPAN>type <SPAN class="operator token">=</SPAN> <SPAN class="string token">"checkbox"</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">let</SPAN> label <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">'label'</SPAN><SPAN class="punctuation token">)</SPAN>
            label<SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> id<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 shakeids"</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>name <SPAN class="operator token">=</SPAN> <SPAN class="string token">"shaks"</SPAN><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>
            idElement<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>label<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="token function">getCur</SPAN><SPAN class="punctuation token">(</SPAN>event<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="keyword token">catch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>err<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
        console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">error</SPAN><SPAN class="punctuation token">(</SPAN>err<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="keyword token">function</SPAN> <SPAN class="token function">getCur</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">let</SPAN> chkst <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelector</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.shaked'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>chkst<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          chkst<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="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="token function">getCur</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>

      query<SPAN class="punctuation token">.</SPAN>outFields <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</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">false</SPAN><SPAN class="punctuation token">;</SPAN>
      query<SPAN class="punctuation token">.</SPAN>returnGeometry <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
      QT<SPAN class="punctuation token">.</SPAN><SPAN class="token function">execute</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>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        evt<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">var</SPAN> att <SPAN class="operator token">=</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes
          <SPAN class="keyword token">var</SPAN> test <SPAN class="operator token">=</SPAN> geometryEngine<SPAN class="punctuation token">.</SPAN><SPAN class="token function">convexHull</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">)</SPAN>
          <SPAN class="keyword token">var</SPAN> genpoly <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">null</SPAN>
          <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>att<SPAN class="punctuation token">.</SPAN>grid_value <SPAN class="operator token"><=</SPAN> <SPAN class="number token">4.0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">var</SPAN> rad <SPAN class="operator token">=</SPAN> att<SPAN class="punctuation token">.</SPAN>Shape__Length <SPAN class="operator token">/</SPAN> <SPAN class="number token">75</SPAN>
            genpoly <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Circle</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
              center<SPAN class="punctuation token">:</SPAN> test<SPAN class="punctuation token">.</SPAN>centroid<SPAN class="punctuation token">,</SPAN>
              radius<SPAN class="punctuation token">:</SPAN> rad<SPAN class="punctuation token">,</SPAN>
              radiusUnit<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"meters"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
          <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
            genpoly <SPAN class="operator token">=</SPAN> test
          <SPAN class="punctuation token">}</SPAN>
          <SPAN class="keyword token">var</SPAN> polygonGraphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            geometry<SPAN class="punctuation token">:</SPAN> genpoly<SPAN class="punctuation token">,</SPAN>
            attributes<SPAN class="punctuation token">:</SPAN> att<SPAN class="punctuation token">,</SPAN>
            type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"polygon"</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          gras<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>polygonGraphic<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="keyword token">var</SPAN> renderer <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"class-breaks"</SPAN><SPAN class="punctuation token">,</SPAN>
          field<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"grid_value"</SPAN><SPAN class="punctuation token">,</SPAN>
          classificationMethod<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"esriClassifyManual"</SPAN><SPAN class="punctuation token">,</SPAN>
          classBreakInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1.9999</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"I (Not Felt)"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2.0</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3.0</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">191</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">204</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">.</SPAN><SPAN class="number token">3</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"II (Weak)"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3.1</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3.9</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">153</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">153</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">.</SPAN><SPAN class="number token">4</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"III (Weak)"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4.0</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4.5</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">136</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"IV (Light)"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4.5</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4.9999</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">125</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">248</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">148</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"V (Light)"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">6.0</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">6.9999</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"VI (Strong)"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">7.0</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">7.9999</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">221</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"VII (Very Strong)"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">8.0</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">8.9999</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">145</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"VIII (Severe) "</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">9.0</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">9.9999</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"IX (Violent)"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">10.0</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">10.9999</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">221</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"X"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">11.0</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">11.9999</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">136</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"XI"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">{</SPAN>
              minValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">12.0</SPAN><SPAN class="punctuation token">,</SPAN>
              maxValue<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">12.0</SPAN><SPAN class="punctuation token">,</SPAN>
              symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">68</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                  width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">,</SPAN>
                  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN>
                  style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>
                style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"XII"</SPAN>
            <SPAN class="punctuation token">}</SPAN>
          <SPAN class="punctuation token">]</SPAN>
        <SPAN class="punctuation token">}</SPAN>
        <SPAN class="keyword token">var</SPAN> popuptemp <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
          title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Shake Intensity"</SPAN><SPAN class="punctuation token">,</SPAN>
          content<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
            type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"fields"</SPAN><SPAN class="punctuation token">,</SPAN>
            fieldInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
                fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"grid_value"</SPAN><SPAN class="punctuation token">,</SPAN>
                label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Grid Value"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              <SPAN class="punctuation token">{</SPAN>
                fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">,</SPAN>
                label<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>
                fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ObjectID"</SPAN><SPAN class="punctuation token">,</SPAN>
                label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ObjectID"</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              <SPAN class="punctuation token">{</SPAN>
                fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"url"</SPAN><SPAN class="punctuation token">,</SPAN>
                label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Url"</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>
        fl <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>
          source<SPAN class="punctuation token">:</SPAN> gras<SPAN class="punctuation token">,</SPAN>
          objectIdField<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ObjectID"</SPAN><SPAN class="punctuation token">,</SPAN>
          geometryType<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"polygon"</SPAN><SPAN class="punctuation token">,</SPAN>
          fields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
            name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ObjectID"</SPAN><SPAN class="punctuation token">,</SPAN>
            alias<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ObjectID"</SPAN><SPAN class="punctuation token">,</SPAN>
            type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"oid"</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
            name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">,</SPAN>
            alias<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">,</SPAN>
            type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"string"</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
            name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"url"</SPAN><SPAN class="punctuation token">,</SPAN>
            alias<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"url"</SPAN><SPAN class="punctuation token">,</SPAN>
            type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"string"</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
            name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"grid_value"</SPAN><SPAN class="punctuation token">,</SPAN>
            alias<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"grid_value"</SPAN><SPAN class="punctuation token">,</SPAN>
            type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"double"</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
          renderer<SPAN class="punctuation token">:</SPAN> renderer<SPAN class="punctuation token">,</SPAN>
          popupEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
          popupTemplate<SPAN class="punctuation token">:</SPAN> popuptemp
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>fl<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>fl<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="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">let</SPAN> quakeFoldr <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">"Shakemaps"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>parentElement<SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">let</SPAN> onup <SPAN class="operator token">=</SPAN> quakeFoldr<SPAN class="punctuation token">.</SPAN>parentElement<SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">let</SPAN> twup <SPAN class="operator token">=</SPAN> onup<SPAN class="punctuation token">.</SPAN>parentElement<SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">let</SPAN> idElement <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>
      <SPAN class="keyword token">let</SPAN> isElement <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">"ul"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      idElement<SPAN class="punctuation token">.</SPAN>className <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"shaked"</SPAN><SPAN class="punctuation token">;</SPAN>
      isElement<SPAN class="punctuation token">.</SPAN>className <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"k-group"</SPAN><SPAN class="punctuation token">;</SPAN>
      twup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>idElement<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      idElement<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>isElement<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</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">let</SPAN> sqlExp <SPAN class="operator token">=</SPAN> <SPAN class="string token">''</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">let</SPAN> idChkBoxes <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>
        idChkBoxes<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">.</SPAN>checked<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            sqlExp <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"'"</SPAN> <SPAN class="operator token">+</SPAN> node<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="operator 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="punctuation token">;</SPAN>
        sqlExp <SPAN class="operator token">=</SPAN> sqlExp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">replace</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">/</SPAN><SPAN class="string token">' /g, "'</SPAN><SPAN class="punctuation token">,</SPAN> "<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        sqlExp <SPAN class="operator token">=</SPAN> sqlExp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">substring</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> sqlExp<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">-</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">info</SPAN><SPAN class="punctuation token">(</SPAN>sqlExp<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 IN ("</SPAN> <SPAN class="operator token">+</SPAN> sqlExp <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>
    <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">"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 <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"contn"</SPAN><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>
        <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"Shakemaps"</SPAN><SPAN class="operator token">></SPAN>Shakemaps<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>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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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