Thanks in advance.
Yes,
Here is an example using your html file.
<SPAN class="doctype token"><!DOCTYPE html></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">charset</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>utf-8<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">name</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>viewport<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">content</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>initial-scale<SPAN class="punctuation token">=</SPAN>1,maximum-scale<SPAN class="punctuation token">=</SPAN>1,user-scalable<SPAN class="punctuation token">=</SPAN>no<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>title</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Underground Utilities Caltrans District 7<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>title</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="language-css style token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="selector token">html, body</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">font-family</SPAN><SPAN class="punctuation token">:</SPAN> sans-serif<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">overflow</SPAN><SPAN class="punctuation token">:</SPAN> hidden<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN> white<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">text-align</SPAN><SPAN class="punctuation token">:</SPAN> center<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">#viewDiv</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">right</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">bottom</SPAN><SPAN class="punctuation token">:</SPAN> 60px<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">#viewy</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 1150px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 40px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN> 10%<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">text-align</SPAN><SPAN class="punctuation token">:</SPAN> justify<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">z-index</SPAN><SPAN class="punctuation token">:</SPAN> 1<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">text-align</SPAN><SPAN class="punctuation token">:</SPAN> center<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">-webkit-text-stroke-width</SPAN><SPAN class="punctuation token">:</SPAN> 1.2px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">-webkit-text-stroke-color</SPAN><SPAN class="punctuation token">:</SPAN> black<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN> 35px <SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">.footer</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">bottom</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 60px<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">.btns</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN> 0 auto<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN> flex<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">flex-direction</SPAN><SPAN class="punctuation token">:</SPAN> row<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">justify-content</SPAN><SPAN class="punctuation token">:</SPAN> center<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">align-items</SPAN><SPAN class="punctuation token">:</SPAN> center<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">overflow</SPAN><SPAN class="punctuation token">:</SPAN> auto<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">.btn-switch</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">flex-grow</SPAN><SPAN class="punctuation token">:</SPAN> 4<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> #54A0CD<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN> #FFF<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN> 1px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 50%<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 20px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">overflow</SPAN><SPAN class="punctuation token">:</SPAN> auto<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">text-align</SPAN><SPAN class="punctuation token">:</SPAN> center<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">cursor</SPAN><SPAN class="punctuation token">:</SPAN> pointer<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN> 0.7em<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">.active-map</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN> #fff<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> #54CDB4<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.3%2Fesri%2Fcss%2Fmain.css" target="_blank">https://js.arcgis.com/4.3/esri/css/main.css</A><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.3%2F" target="_blank">https://js.arcgis.com/4.3/</A><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN> <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN> <SPAN class="string token">"dojo/dom-construct"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/Legend"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/WebMap"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/Search"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/on"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/domReady!"</SPAN> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN> domConstruct<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">,</SPAN> Legend<SPAN class="punctuation token">,</SPAN> WebMap<SPAN class="punctuation token">,</SPAN> Search<SPAN class="punctuation token">,</SPAN> on <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> webmapids <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN> <SPAN class="string token">"ba7b97b7d6b24c6381eba23062f8aab1"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"7884594fbc904ac6bdb540727ff2f5d7"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"bde977a8dcb34a719a1b0bc30df9542d"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"e857341735434b67ae844244ae4701ca"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"4818da5fb8de4fafaa5499b4873c1bd7"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">/************************************************************ * Create multiple WebMap instances ************************************************************/</SPAN> <SPAN class="keyword token">var</SPAN> webmaps <SPAN class="operator token">=</SPAN> webmapids<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>webmapid<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">WebMap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> id<SPAN class="punctuation token">:</SPAN> webmapid <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="comment token">/************************************************************ * Initialize the View with the first WebMap ************************************************************/</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> map<SPAN class="punctuation token">:</SPAN> webmaps<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</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><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelector</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".btns"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">".btn-switch:click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN> event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">/************************************************************ * On a button click, change the map of the View ************************************************************/</SPAN> <SPAN class="keyword token">var</SPAN> id <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getAttribute</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"data-id"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>id<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> webmap <SPAN class="operator token">=</SPAN> webmaps<SPAN class="punctuation token">[</SPAN>id<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN> view<SPAN class="punctuation token">.</SPAN>map <SPAN class="operator token">=</SPAN> webmap<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> nodes <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelectorAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".btn-switch"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">var</SPAN> idx <SPAN class="operator token">=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> idx <SPAN class="operator token"><</SPAN> nodes<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">;</SPAN> idx<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> node <SPAN class="operator token">=</SPAN> nodes<SPAN class="punctuation token">[</SPAN>idx<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> mapIndex <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="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>mapIndex <SPAN class="operator token">===</SPAN> id<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> node<SPAN class="punctuation token">.</SPAN>classList<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"active-map"</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> node<SPAN class="punctuation token">.</SPAN>classList<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"active-map"</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="comment token">/******************* MY EDIT: ADD LEGEND HERE ***************************/</SPAN><SPAN class="operator token">/</SPAN> <SPAN class="keyword token">var</SPAN> legend <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Legend</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">:</SPAN> view <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="comment token">/************************************** END MY EDITS ******************/</SPAN><SPAN class="operator token">/</SPAN> <SPAN class="keyword token">var</SPAN> logo <SPAN class="operator token">=</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">create</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"img"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> src<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fonramp.dot.ca.gov%2Fhq%2Fpaffairs%2FCT_No_Logotype%2FCT_logo_no_type.gif" target="_blank">https://onramp.dot.ca.gov/hq/paffairs/CT_No_Logotype/CT_logo_no_type.gif</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"height:50px;width:80px;"</SPAN><SPAN class="punctuation token">,</SPAN> id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"logo"</SPAN><SPAN class="punctuation token">,</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Office of Surveys, Geospatial Unit"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> search <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Search</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">:</SPAN> view <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>logo<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"bottom-right"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>search<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-right"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>legend<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-right"</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="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>section</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>footer<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>btns<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>btn-switch active-map<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>0<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Caltrans Utilities<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>btn-switch<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>1<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Electrical<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>btn-switch<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>2<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Natural Gas<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>btn-switch<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>3<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Wastewater<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>btn-switch<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>4<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Water<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>btn-switch<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>5<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Utility Listing<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>section</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>viewy<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Underground Utilities within Caltrans District 7<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>viewDiv<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></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>
The styling is not the greatest, so you may want to fancy it up!
But it does work!
Chris
Check out: Legend | API Reference | ArcGIS API for JavaScript 4.3
This says it is not possible yet in the known limitations.
Which part isn't possible?
Thanks for the help. It works. Easier than what I thought. ☺
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
