ArcGIS API for JS's 4.8 - Calcite Maps Bootstrap sample - Search widget - with Multiple sources issue. Unable to shows multiple sources
https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=frameworks-bootstrap
please suggest any ways solve this issue.
I am trying to achieve like the below sample.
http://esri.github.io/geodev-hackerlabs/develop/webmap_apps/create_calcite_maps_app/index.html
So here is that sample with multiple sources.
<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>meta charset<SPAN class="operator token">=</SPAN><SPAN class="string token">"utf-8"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"width=device-width,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>Calcite Maps and Bootstrap <SPAN class="operator token">-</SPAN> <SPAN class="number token">4.8</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> Calcite Bootstrap <SPAN class="operator token">--</SPAN><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"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fesri.github.io%2Fcalcite-maps%2Fdist%2Fcss%2Fcalcite-maps-bootstrap.min-v0.8.css" target="_blank">https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.8.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> Calcite Maps <SPAN class="operator token">--</SPAN><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"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fesri.github.io%2Fcalcite-maps%2Fdist%2Fcss%2Fcalcite-maps-arcgis-4.x.min-v0.8.css" target="_blank">https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-4.x.min-v0.8.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> ArcGIS JS <SPAN class="number token">4</SPAN> <SPAN class="operator token">--</SPAN><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"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.8%2Fesri%2Fcss%2Fmain.css" target="_blank">https://js.arcgis.com/4.8/esri/css/main.css</A><SPAN>"</SPAN></SPAN><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> margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> padding<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> <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><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>body <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-maps calcite-nav-top"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> Navbar <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>nav <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-dark"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> Menu <SPAN class="operator token">--</SPAN><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">"dropdown calcite-dropdown calcite-text-dark calcite-bg-light"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"presentation"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>a <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"dropdown-toggle"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> aria<SPAN class="operator token">-</SPAN>haspopup<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN> aria<SPAN class="operator token">-</SPAN>expanded<SPAN class="operator token">=</SPAN><SPAN class="string token">"false"</SPAN><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">"calcite-dropdown-toggle"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"sr-only"</SPAN><SPAN class="operator token">></SPAN>Toggle dropdown menu<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>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><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>ul <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"dropdown-menu"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>li <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"active"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>a <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"hidden-md hidden-lg"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"#mapTab"</SPAN> aria<SPAN class="operator token">-</SPAN>controls<SPAN class="operator token">=</SPAN><SPAN class="string token">"mapTab"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"tab"</SPAN> data<SPAN class="operator token">-</SPAN>toggle<SPAN class="operator token">=</SPAN><SPAN class="string token">"tab"</SPAN><SPAN class="operator token">></SPAN> Map<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>li<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>li<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>a <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"hidden-md hidden-lg"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"#sceneTab"</SPAN> aria<SPAN class="operator token">-</SPAN>controls<SPAN class="operator token">=</SPAN><SPAN class="string token">"sceneTab"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"tab"</SPAN> data<SPAN class="operator token">-</SPAN>toggle<SPAN class="operator token">=</SPAN><SPAN class="string token">"tab"</SPAN><SPAN class="operator token">></SPAN> Scene<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>li<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>li<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>a role<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> data<SPAN class="operator token">-</SPAN>target<SPAN class="operator token">=</SPAN><SPAN class="string token">"#panelBasemaps"</SPAN> aria<SPAN class="operator token">-</SPAN>haspopup<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"glyphicon glyphicon-th-large"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> Basemaps<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>li<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>li<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>a role<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> data<SPAN class="operator token">-</SPAN>target<SPAN class="operator token">=</SPAN><SPAN class="string token">"#panelSettings"</SPAN> aria<SPAN class="operator token">-</SPAN>haspopup<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"glyphicon glyphicon-cog"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> Settings<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>li<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>li<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>a role<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"calciteToggleNavbar"</SPAN> aria<SPAN class="operator token">-</SPAN>haspopup<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"glyphicon glyphicon-fullscreen"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> Full Map<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>li<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>ul<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><SPAN class="operator token">--</SPAN> Title <SPAN class="operator token">--</SPAN><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">"calcite-title calcite-overflow-hidden"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-title-main"</SPAN><SPAN class="operator token">></SPAN>Calcite Maps<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-title-divider hidden-xs"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-title-sub hidden-xs"</SPAN><SPAN class="operator token">></SPAN>A modern framework <SPAN class="keyword token">for</SPAN> building map apps<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>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><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> Nav <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>ul <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"nav navbar-nav calcite-nav"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>li <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"active"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>a id<SPAN class="operator token">=</SPAN><SPAN class="string token">"mapNav"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"hidden-xs hidden-sm"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"#mapTab"</SPAN> aria<SPAN class="operator token">-</SPAN>controls<SPAN class="operator token">=</SPAN><SPAN class="string token">"mapTab"</SPAN> aria<SPAN class="operator token">-</SPAN>expanded<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"tab"</SPAN> data<SPAN class="operator token">-</SPAN>toggle<SPAN class="operator token">=</SPAN><SPAN class="string token">"tab"</SPAN> data<SPAN class="operator token">-</SPAN>tooltip<SPAN class="operator token">=</SPAN><SPAN class="string token">"tip"</SPAN> title<SPAN class="operator token">=</SPAN><SPAN class="string token">"2D View"</SPAN> data<SPAN class="operator token">-</SPAN>placement<SPAN class="operator token">=</SPAN><SPAN class="string token">"bottom"</SPAN><SPAN class="operator token">></SPAN>Map<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>li<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>li<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>a id<SPAN class="operator token">=</SPAN><SPAN class="string token">"sceneNav"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"hidden-xs hidden-sm"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"#sceneTab"</SPAN> aria<SPAN class="operator token">-</SPAN>controls<SPAN class="operator token">=</SPAN><SPAN class="string token">"sceneTab"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"tab"</SPAN> data<SPAN class="operator token">-</SPAN>toggle<SPAN class="operator token">=</SPAN><SPAN class="string token">"tab"</SPAN> data<SPAN class="operator token">-</SPAN>tooltip<SPAN class="operator token">=</SPAN><SPAN class="string token">"tip"</SPAN> title<SPAN class="operator token">=</SPAN><SPAN class="string token">"3D View"</SPAN> data<SPAN class="operator token">-</SPAN>placement<SPAN class="operator token">=</SPAN><SPAN class="string token">"bottom"</SPAN><SPAN class="operator token">></SPAN>Scene<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>li<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>li<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><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">"calcite-navbar-search calcite-search-expander"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"searchWidgetDiv"</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><SPAN class="operator token">!</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><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>li<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>ul<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>nav<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN><SPAN class="operator token">/</SPAN><SPAN class="punctuation token">.</SPAN>calcite<SPAN class="operator token">-</SPAN>navbar <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> Map <SPAN class="operator token">--</SPAN><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">"calcite-map calcite-map-absolute"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"tabContainer"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"tab-content"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"mapTab"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"tab-pane fade in active"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"tabpanel"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"mapViewDiv"</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><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">"sceneTab"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"tab-pane fade"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"tabpanel"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"sceneViewDiv"</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><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><SPAN class="operator token">--</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="punctuation token">.</SPAN>calcite<SPAN class="operator token">-</SPAN>map <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> Panels <SPAN class="operator token">--</SPAN><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">"calcite-panels calcite-panels-right calcite-text-light calcite-bg-dark panel-group"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> Basemaps Panel <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"panelBasemaps"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel collapse"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"headingBasemaps"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-heading"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"tab"</SPAN><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">"panel-title"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>a <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-toggle collapsed"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> data<SPAN class="operator token">-</SPAN>toggle<SPAN class="operator token">=</SPAN><SPAN class="string token">"collapse"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"#collapseBasemaps"</SPAN> aria<SPAN class="operator token">-</SPAN>expanded<SPAN class="operator token">=</SPAN><SPAN class="string token">"false"</SPAN> aria<SPAN class="operator token">-</SPAN>controls<SPAN class="operator token">=</SPAN><SPAN class="string token">"collapseBasemaps"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"glyphicon glyphicon-th-large"</SPAN> aria<SPAN class="operator token">-</SPAN>hidden<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-label"</SPAN><SPAN class="operator token">></SPAN>Basemaps<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>a <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-close"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> data<SPAN class="operator token">-</SPAN>toggle<SPAN class="operator token">=</SPAN><SPAN class="string token">"collapse"</SPAN> data<SPAN class="operator token">-</SPAN>target<SPAN class="operator token">=</SPAN><SPAN class="string token">"#panelBasemaps"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-icon esri-icon-close"</SPAN> aria<SPAN class="operator token">-</SPAN>hidden<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<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>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"collapseBasemaps"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-collapse collapse"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"tabpanel"</SPAN> aria<SPAN class="operator token">-</SPAN>labelledby<SPAN class="operator token">=</SPAN><SPAN class="string token">"headingBasemaps"</SPAN><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">"panel-body"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"basemapPanelDiv"</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><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><SPAN class="operator token">--</SPAN> Panel Settings <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"panelSettings"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel panel-map collapse"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"headingSettings"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-heading"</SPAN><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">"panel-title"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>a <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-toggle"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> data<SPAN class="operator token">-</SPAN>toggle<SPAN class="operator token">=</SPAN><SPAN class="string token">"collapse"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"#collapseSettings"</SPAN> data<SPAN class="operator token">-</SPAN>parent<SPAN class="operator token">=</SPAN><SPAN class="string token">"#panelAccordion"</SPAN> aria<SPAN class="operator token">-</SPAN>expanded<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN> aria<SPAN class="operator token">-</SPAN>controls<SPAN class="operator token">=</SPAN><SPAN class="string token">"collapseSettings"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"glyphicon glyphicon-cog"</SPAN> aria<SPAN class="operator token">-</SPAN>hidden<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-label"</SPAN><SPAN class="operator token">></SPAN>Settings<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>a <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-close"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> data<SPAN class="operator token">-</SPAN>toggle<SPAN class="operator token">=</SPAN><SPAN class="string token">"collapse"</SPAN> data<SPAN class="operator token">-</SPAN>target<SPAN class="operator token">=</SPAN><SPAN class="string token">"#panelSettings"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-icon esri-icon-close"</SPAN> aria<SPAN class="operator token">-</SPAN>hidden<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<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>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"collapseSettings"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-collapse collapse"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"tabpanel"</SPAN> aria<SPAN class="operator token">-</SPAN>labelledby<SPAN class="operator token">=</SPAN><SPAN class="string token">"headingSettings"</SPAN><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">"panel-body"</SPAN><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">"form-horizontal"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> Theme <SPAN class="operator token">--</SPAN><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">"form-group"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>label <SPAN class="keyword token">for</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"settingsTheme"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"col-xs-3 control-label"</SPAN><SPAN class="operator token">></SPAN>Theme<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>label<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">"col-xs-9"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>select id<SPAN class="operator token">=</SPAN><SPAN class="string token">"settingsTheme"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"form-control"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-dark"</SPAN> data<SPAN class="operator token">-</SPAN>textcolor<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-text-light"</SPAN> data<SPAN class="operator token">-</SPAN>bgcolor<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-bg-dark"</SPAN> selected<SPAN class="operator token">></SPAN>Calcite Dark<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-light"</SPAN> data<SPAN class="operator token">-</SPAN>textcolor<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-text-dark"</SPAN> data<SPAN class="operator token">-</SPAN>bgcolor<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-bg-light"</SPAN><SPAN class="operator token">></SPAN>Calcte Light<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>select<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><SPAN class="operator token">--</SPAN> Color <SPAN class="operator token">--</SPAN><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">"form-group"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>label <SPAN class="keyword token">for</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"settingsColor"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"col-xs-3 control-label"</SPAN><SPAN class="operator token">></SPAN>Color<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>label<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">"col-xs-9"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>select id<SPAN class="operator token">=</SPAN><SPAN class="string token">"settingsColor"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"form-control"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">""</SPAN> data<SPAN class="operator token">-</SPAN>theme<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-theme-light"</SPAN><SPAN class="operator token">></SPAN>Calcite Default<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-bgcolor-dark-blue"</SPAN> data<SPAN class="operator token">-</SPAN>textcolor<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-text-light"</SPAN> data<SPAN class="operator token">-</SPAN>bgcolor<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-bg-custom"</SPAN><SPAN class="operator token">></SPAN>Calcite Dark Blue<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-bgcolor-dark-green"</SPAN> data<SPAN class="operator token">-</SPAN>textcolor<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-text-light"</SPAN> data<SPAN class="operator token">-</SPAN>bgcolor<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-bg-custom"</SPAN><SPAN class="operator token">></SPAN>Calcite Dark Green<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-bgcolor-dark-brown"</SPAN> data<SPAN class="operator token">-</SPAN>textcolor<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-text-light"</SPAN> data<SPAN class="operator token">-</SPAN>bgcolor<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-bg-custom"</SPAN><SPAN class="operator token">></SPAN>Calcite Dark Brown <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-bgcolor-dark-red"</SPAN> data<SPAN class="operator token">-</SPAN>textcolor<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-text-light"</SPAN> data<SPAN class="operator token">-</SPAN>bgcolor<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-bg-custom"</SPAN><SPAN class="operator token">></SPAN>Calcite Dark Red<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-bgcolor-darkest-grey"</SPAN> data<SPAN class="operator token">-</SPAN>textcolor<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-text-light"</SPAN> data<SPAN class="operator token">-</SPAN>bgcolor<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-bg-custom"</SPAN><SPAN class="operator token">></SPAN>Calcite Darkest Grey<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-bgcolor-lightest-grey"</SPAN> data<SPAN class="operator token">-</SPAN>textcolor<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-text-dark"</SPAN> data<SPAN class="operator token">-</SPAN>bgcolor<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-bg-custom"</SPAN><SPAN class="operator token">></SPAN>Calcite Lightest Grey<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-bgcolor-blue-75"</SPAN> data<SPAN class="operator token">-</SPAN>textcolor<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-text-light"</SPAN> data<SPAN class="operator token">-</SPAN>bgcolor<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-bg-custom"</SPAN><SPAN class="operator token">></SPAN>Calcite Blue <SPAN class="number token">75</SPAN><SPAN class="operator token">%</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-bgcolor-black-75"</SPAN> data<SPAN class="operator token">-</SPAN>textcolor<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-text-light"</SPAN> data<SPAN class="operator token">-</SPAN>bgcolor<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-bg-custom"</SPAN><SPAN class="operator token">></SPAN>Calcite Black <SPAN class="number token">75</SPAN><SPAN class="operator token">%</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>select<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><SPAN class="operator token">--</SPAN> Widgets <SPAN class="operator token">--</SPAN><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">"form-group"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>label <SPAN class="keyword token">for</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"settingsWidgets"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"col-xs-3 control-label"</SPAN><SPAN class="operator token">></SPAN>Widgets<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>label<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">"col-xs-9"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>select id<SPAN class="operator token">=</SPAN><SPAN class="string token">"settingsWidgets"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"form-control"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-widgets-dark"</SPAN><SPAN class="operator token">></SPAN>Calcite Dark<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-widgets-light"</SPAN> selected<SPAN class="operator token">></SPAN>Calcite Light<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>select<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><SPAN class="operator token">--</SPAN> Layout <SPAN class="operator token">--</SPAN><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">"form-group"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>label <SPAN class="keyword token">for</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"settingsLayout"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"col-xs-3 control-label"</SPAN><SPAN class="operator token">></SPAN>Layout<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>label<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">"col-xs-9"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>select id<SPAN class="operator token">=</SPAN><SPAN class="string token">"settingsLayout"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"form-control"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-nav-top"</SPAN> data<SPAN class="operator token">-</SPAN>nav<SPAN class="operator token">=</SPAN><SPAN class="string token">"navbar-fixed-top"</SPAN> selected<SPAN class="operator token">></SPAN>Top<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-nav-bottom"</SPAN> data<SPAN class="operator token">-</SPAN>nav<SPAN class="operator token">=</SPAN><SPAN class="string token">"navbar-fixed-bottom"</SPAN><SPAN class="operator token">></SPAN>Bottom<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>select<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>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><SPAN class="operator token">--</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="punctuation token">.</SPAN>calcite<SPAN class="operator token">-</SPAN>panels <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script type<SPAN class="operator token">=</SPAN><SPAN class="string token">"text/javascript"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="keyword token">var</SPAN> dojoConfig <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> packages<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">"bootstrap"</SPAN><SPAN class="punctuation token">,</SPAN> location<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%2Fesri.github.io%2Fcalcite-maps%2Fdist%2Fvendor%2Fdojo-bootstrap" target="_blank">https://esri.github.io/calcite-maps/dist/vendor/dojo-bootstrap</A><SPAN>"</SPAN></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">"calcite-maps"</SPAN><SPAN class="punctuation token">,</SPAN> location<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%2Fesri.github.io%2Fcalcite-maps%2Fdist%2Fjs%2Fdojo" target="_blank">https://esri.github.io/calcite-maps/dist/js/dojo</A><SPAN>"</SPAN></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><SPAN class="operator token">--</SPAN> ArcGIS JS <SPAN class="number token">4</SPAN> <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.8%2F" target="_blank">https://js.arcgis.com/4.8/</A><SPAN>"</SPAN></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="keyword token">var</SPAN> app<SPAN class="punctuation 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/views/SceneView"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/Search"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/BasemapGallery"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/core/watchUtils"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/query"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/on"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/tasks/Locator"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// Calcite Maps</SPAN> <SPAN class="string token">"calcite-maps/calcitemaps-v0.8"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// Calcite Maps ArcGIS Support</SPAN> <SPAN class="string token">"calcite-maps/calcitemaps-arcgis-support-v0.8"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// Bootstrap</SPAN> <SPAN class="string token">"bootstrap/Collapse"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"bootstrap/Dropdown"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"bootstrap/Tab"</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>Map<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">,</SPAN> SceneView<SPAN class="punctuation token">,</SPAN> Search<SPAN class="punctuation token">,</SPAN> Basemaps<SPAN class="punctuation token">,</SPAN> watchUtils<SPAN class="punctuation token">,</SPAN> query<SPAN class="punctuation token">,</SPAN> on<SPAN class="punctuation token">,</SPAN> FeatureLayer<SPAN class="punctuation token">,</SPAN> Locator<SPAN class="punctuation token">,</SPAN> CalciteMaps<SPAN class="punctuation token">,</SPAN> CalciteMapsArcGIS<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">/****************************************************************** * * App settings * ******************************************************************/</SPAN> app <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">40</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">40</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> scale<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">50000000</SPAN><SPAN class="punctuation token">,</SPAN> basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"streets"</SPAN><SPAN class="punctuation token">,</SPAN> viewPadding<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> top<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">50</SPAN><SPAN class="punctuation token">,</SPAN> bottom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> uiComponents<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"zoom"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"compass"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"attribution"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> mapView<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">,</SPAN> sceneView<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">,</SPAN> containerMap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"mapViewDiv"</SPAN><SPAN class="punctuation token">,</SPAN> containerScene<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"sceneViewDiv"</SPAN><SPAN class="punctuation token">,</SPAN> activeView<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">,</SPAN> searchWidget<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">null</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">/****************************************************************** * * Create the map and scene view and ui components * ******************************************************************/</SPAN> <SPAN class="comment token">// Map</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> app<SPAN class="punctuation token">.</SPAN>basemap <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// 2D view</SPAN> app<SPAN class="punctuation token">.</SPAN>mapView <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> app<SPAN class="punctuation token">.</SPAN>containerMap<SPAN class="punctuation token">,</SPAN> map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN> center<SPAN class="punctuation token">:</SPAN> app<SPAN class="punctuation token">.</SPAN>center<SPAN class="punctuation token">,</SPAN> scale<SPAN class="punctuation token">:</SPAN> app<SPAN class="punctuation token">.</SPAN>scale<SPAN class="punctuation token">,</SPAN> padding<SPAN class="punctuation token">:</SPAN> app<SPAN class="punctuation token">.</SPAN>viewPadding<SPAN class="punctuation token">,</SPAN> ui<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> components<SPAN class="punctuation token">:</SPAN> app<SPAN class="punctuation token">.</SPAN>uiComponents <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> CalciteMapsArcGIS<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setPopupPanelSync</SPAN><SPAN class="punctuation token">(</SPAN>app<SPAN class="punctuation token">.</SPAN>mapView<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// 3D view</SPAN> app<SPAN class="punctuation token">.</SPAN>sceneView <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SceneView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> container<SPAN class="punctuation token">:</SPAN> app<SPAN class="punctuation token">.</SPAN>containerScene<SPAN class="punctuation token">,</SPAN> map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN> center<SPAN class="punctuation token">:</SPAN> app<SPAN class="punctuation token">.</SPAN>center<SPAN class="punctuation token">,</SPAN> scale<SPAN class="punctuation token">:</SPAN> app<SPAN class="punctuation token">.</SPAN>scale<SPAN class="punctuation token">,</SPAN> padding<SPAN class="punctuation token">:</SPAN> app<SPAN class="punctuation token">.</SPAN>viewPadding<SPAN class="punctuation token">,</SPAN> ui<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> components<SPAN class="punctuation token">:</SPAN> app<SPAN class="punctuation token">.</SPAN>uiComponents <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> CalciteMapsArcGIS<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setPopupPanelSync</SPAN><SPAN class="punctuation token">(</SPAN>app<SPAN class="punctuation token">.</SPAN>sceneView<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Set the active view to scene</SPAN> <SPAN class="token function">setActiveView</SPAN><SPAN class="punctuation token">(</SPAN>app<SPAN class="punctuation token">.</SPAN>mapView<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> sources <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Add neighborhoods search</SPAN> sources<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> featureLayer<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fservices.arcgis.com%2FuCXeTVveQzP4IIcx%2Farcgis%2Frest%2Fservices%2FPDX_Neighborhoods_Enriched_Styled%2FFeatureServer%2F0" target="_blank">http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Neighborhoods_Enriched_Styled/FeatureServer/0</A><SPAN>"</SPAN></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> searchFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"NAME"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> displayField<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"NAME"</SPAN><SPAN class="punctuation token">,</SPAN> exactMatch<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</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> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Find a Neighborhood"</SPAN><SPAN class="punctuation token">,</SPAN> placeholder<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"e.g. old town"</SPAN><SPAN class="punctuation token">,</SPAN> popupEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> popupOpenOnSelect<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> searchExtent<SPAN class="punctuation token">:</SPAN> app<SPAN class="punctuation token">.</SPAN>initialExtent<SPAN class="punctuation token">,</SPAN> withinViewEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN> searchAllEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="punctuation token">{</SPAN> locator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Locator</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> url<SPAN class="punctuation token">:</SPAN> "<SPAN class="comment token">//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }),</SPAN> singleLineFieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"SingleLine"</SPAN><SPAN class="punctuation token">,</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Custom Geocoding Service"</SPAN><SPAN class="punctuation token">,</SPAN> localSearchOptions<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> minScale<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">300000</SPAN><SPAN class="punctuation token">,</SPAN> distance<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">50000</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> placeholder<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Search Geocoder"</SPAN><SPAN class="punctuation token">,</SPAN> maxResults<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3</SPAN><SPAN class="punctuation token">,</SPAN> maxSuggestions<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">6</SPAN><SPAN class="punctuation token">,</SPAN> suggestionsEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN> minSuggestCharacters<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Create the search widget and add it to the navbar instead of view</SPAN> app<SPAN class="punctuation token">.</SPAN>searchWidget <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> app<SPAN class="punctuation token">.</SPAN>activeView<SPAN class="punctuation token">,</SPAN> sources<SPAN class="punctuation token">:</SPAN> sources<SPAN class="punctuation token">,</SPAN> includeDefaultSources<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"searchWidgetDiv"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> CalciteMapsArcGIS<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setSearchExpandEvents</SPAN><SPAN class="punctuation token">(</SPAN>app<SPAN class="punctuation token">.</SPAN>searchWidget<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Create basemap widget</SPAN> app<SPAN class="punctuation token">.</SPAN>basemapWidget <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Basemaps</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">:</SPAN> app<SPAN class="punctuation token">.</SPAN>activeView<SPAN class="punctuation token">,</SPAN> container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"basemapPanelDiv"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">/****************************************************************** * * Synchronize the view, search and popup * ******************************************************************/</SPAN> <SPAN class="comment token">// Views</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">setActiveView</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> app<SPAN class="punctuation token">.</SPAN>activeView <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">syncViews</SPAN><SPAN class="punctuation token">(</SPAN>fromView<SPAN class="punctuation token">,</SPAN> toView<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> viewPt <SPAN class="operator token">=</SPAN> fromView<SPAN class="punctuation token">.</SPAN>viewpoint<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clone</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> fromView<SPAN class="punctuation token">.</SPAN>container <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>fromView<SPAN class="punctuation token">.</SPAN>type <SPAN class="operator token">===</SPAN> <SPAN class="string token">"3d"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> toView<SPAN class="punctuation token">.</SPAN>container <SPAN class="operator token">=</SPAN> app<SPAN class="punctuation token">.</SPAN>containerMap<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN> toView<SPAN class="punctuation token">.</SPAN>container <SPAN class="operator token">=</SPAN> app<SPAN class="punctuation token">.</SPAN>containerScene<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> toView<SPAN class="punctuation token">.</SPAN>padding <SPAN class="operator token">=</SPAN> app<SPAN class="punctuation token">.</SPAN>viewPadding<SPAN class="punctuation token">;</SPAN> toView<SPAN class="punctuation token">.</SPAN>viewpoint <SPAN class="operator token">=</SPAN> viewPt<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="comment token">// Search Widget</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">syncSearch</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenTrueOnce</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"ready"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> app<SPAN class="punctuation token">.</SPAN>searchWidget<SPAN class="punctuation token">.</SPAN>view <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>app<SPAN class="punctuation token">.</SPAN>searchWidget<SPAN class="punctuation token">.</SPAN>selectedResult<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> app<SPAN class="punctuation token">.</SPAN>searchWidget<SPAN class="punctuation token">.</SPAN><SPAN class="token function">search</SPAN><SPAN class="punctuation token">(</SPAN>app<SPAN class="punctuation token">.</SPAN>searchWidget<SPAN class="punctuation token">.</SPAN>selectedResult<SPAN class="punctuation token">.</SPAN>name<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">// Tab - toggle between map and scene view</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".calcite-navbar li a[data-toggle='tab']"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"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="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>text<SPAN class="punctuation token">.</SPAN><SPAN class="token function">indexOf</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Map"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">></SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="token function">syncViews</SPAN><SPAN class="punctuation token">(</SPAN>app<SPAN class="punctuation token">.</SPAN>sceneView<SPAN class="punctuation token">,</SPAN> app<SPAN class="punctuation token">.</SPAN>mapView<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">setActiveView</SPAN><SPAN class="punctuation token">(</SPAN>app<SPAN class="punctuation token">.</SPAN>mapView<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">syncViews</SPAN><SPAN class="punctuation token">(</SPAN>app<SPAN class="punctuation token">.</SPAN>mapView<SPAN class="punctuation token">,</SPAN> app<SPAN class="punctuation token">.</SPAN>sceneView<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">setActiveView</SPAN><SPAN class="punctuation token">(</SPAN>app<SPAN class="punctuation token">.</SPAN>sceneView<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="token function">syncSearch</SPAN><SPAN class="punctuation token">(</SPAN>app<SPAN class="punctuation token">.</SPAN>activeView<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">/****************************************************************** * * Apply Calcite Maps CSS classes to change application on the fly * * For more information about the CSS styles or Sass build visit: <SPAN> * </SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fgithub.com%2Fesri%2Fcalcite-maps" target="_blank">http://github.com/esri/calcite-maps</A> * ******************************************************************/</SPAN> <SPAN class="keyword token">var</SPAN> cssSelectorUI <SPAN class="operator token">=</SPAN> <SPAN class="string token">".calcite-navbar, .calcite-panels"</SPAN><SPAN class="punctuation token">,</SPAN> cssSelectorMap <SPAN class="operator token">=</SPAN> <SPAN class="string token">".calcite-map"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Theme - light (default) or dark theme</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#settingsTheme"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"change"</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="keyword token">var</SPAN> textColor <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>options<SPAN class="punctuation token">[</SPAN>event<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>selectedIndex<SPAN class="punctuation token">]</SPAN> <SPAN class="punctuation token">.</SPAN>dataset<SPAN class="punctuation token">.</SPAN>textcolor<SPAN class="punctuation token">,</SPAN> bgColor <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>options<SPAN class="punctuation token">[</SPAN>event<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>selectedIndex<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>dataset <SPAN class="punctuation token">.</SPAN>bgcolor<SPAN class="punctuation token">;</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN>cssSelectorUI<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeClass</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="string token">"calcite-text-dark calcite-text-light calcite-bg-dark calcite-bg-light calcite-bg-custom"</SPAN> <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">addClass</SPAN><SPAN class="punctuation token">(</SPAN>textColor <SPAN class="operator token">+</SPAN> <SPAN class="string token">" "</SPAN> <SPAN class="operator token">+</SPAN> bgColor<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN>cssSelectorUI<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeClass</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="string token">"calcite-bgcolor-dark-blue calcite-bgcolor-blue-75 calcite-bgcolor-dark-green calcite-bgcolor-dark-brown calcite-bgcolor-darkest-grey calcite-bgcolor-lightest-grey calcite-bgcolor-black-75 calcite-bgcolor-dark-red"</SPAN> <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">addClass</SPAN><SPAN class="punctuation token">(</SPAN>bgColor<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#settingsColor"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">attr</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"value"</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> <SPAN class="comment token">// Color - custom color</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#settingsColor"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"change"</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="keyword token">var</SPAN> customColor <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">,</SPAN> textColor <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>options<SPAN class="punctuation token">[</SPAN>event<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>selectedIndex<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>dataset <SPAN class="punctuation token">.</SPAN>textcolor<SPAN class="punctuation token">,</SPAN> bgColor <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>options<SPAN class="punctuation token">[</SPAN>event<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>selectedIndex<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>dataset <SPAN class="punctuation token">.</SPAN>bgcolor<SPAN class="punctuation token">;</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN>cssSelectorUI<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeClass</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="string token">"calcite-text-dark calcite-text-light calcite-bg-dark calcite-bg-light calcite-bg-custom"</SPAN> <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">addClass</SPAN><SPAN class="punctuation token">(</SPAN>textColor <SPAN class="operator token">+</SPAN> <SPAN class="string token">" "</SPAN> <SPAN class="operator token">+</SPAN> bgColor<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN>cssSelectorUI<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeClass</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="string token">"calcite-bgcolor-dark-blue calcite-bgcolor-blue-75 calcite-bgcolor-dark-green calcite-bgcolor-dark-brown calcite-bgcolor-darkest-grey calcite-bgcolor-lightest-grey calcite-bgcolor-black-75 calcite-bgcolor-dark-red"</SPAN> <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">addClass</SPAN><SPAN class="punctuation token">(</SPAN>customColor<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>customColor<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> on<SPAN class="punctuation token">.</SPAN><SPAN class="token function">emit</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#settingsTheme"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"change"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> bubbles<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> cancelable<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</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="comment token">// Widgets - light (default) or dark theme</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#settingsWidgets"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"change"</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="keyword token">var</SPAN> theme <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">;</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN>cssSelectorMap<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeClass</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="string token">"calcite-widgets-dark calcite-widgets-light"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">addClass</SPAN><SPAN class="punctuation token">(</SPAN> theme<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">// Layout - top or bottom nav position</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#settingsLayout"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"change"</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="keyword token">var</SPAN> layout <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> layoutNav <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>options<SPAN class="punctuation token">[</SPAN>event<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>selectedIndex<SPAN class="punctuation token">]</SPAN> <SPAN class="punctuation token">.</SPAN>dataset<SPAN class="punctuation token">.</SPAN>nav<SPAN class="punctuation token">;</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"body"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeClass</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"calcite-nav-bottom calcite-nav-top"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">.</SPAN><SPAN class="token function">addClass</SPAN><SPAN class="punctuation token">(</SPAN>layout<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"nav"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeClass</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"navbar-fixed-bottom navbar-fixed-top"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">.</SPAN><SPAN class="token function">addClass</SPAN><SPAN class="punctuation token">(</SPAN>layoutNav<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">setViewPadding</SPAN><SPAN class="punctuation token">(</SPAN>layout<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">// Basemap events</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#selectBasemapPanel"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"change"</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> app<SPAN class="punctuation token">.</SPAN>mapView<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>basemap <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>options<SPAN class="punctuation token">[</SPAN>event<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>selectedIndex<SPAN class="punctuation token">]</SPAN> <SPAN class="punctuation token">.</SPAN>dataset<SPAN class="punctuation token">.</SPAN>vector<SPAN class="punctuation token">;</SPAN> app<SPAN class="punctuation token">.</SPAN>sceneView<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>basemap <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Set view padding for widgets based on navbar position</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">setViewPadding</SPAN><SPAN class="punctuation token">(</SPAN>layout<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> padding<SPAN class="punctuation token">,</SPAN> uiPadding<SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Top</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>layout <SPAN class="operator token">===</SPAN> <SPAN class="string token">"calcite-nav-top"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> padding <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> padding<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> top<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">50</SPAN><SPAN class="punctuation token">,</SPAN> bottom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> uiPadding <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> padding<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> top<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">15</SPAN><SPAN class="punctuation token">,</SPAN> right<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">15</SPAN><SPAN class="punctuation token">,</SPAN> bottom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">30</SPAN><SPAN class="punctuation token">,</SPAN> left<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">15</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">else</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// Bottom</SPAN> padding <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> padding<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> top<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> bottom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">50</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> uiPadding <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> padding<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> top<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">30</SPAN><SPAN class="punctuation token">,</SPAN> right<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">15</SPAN><SPAN class="punctuation token">,</SPAN> bottom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">15</SPAN><SPAN class="punctuation token">,</SPAN> left<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">15</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> app<SPAN class="punctuation token">.</SPAN>mapView<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">set</SPAN><SPAN class="punctuation token">(</SPAN>padding<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> app<SPAN class="punctuation token">.</SPAN>mapView<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">set</SPAN><SPAN class="punctuation token">(</SPAN>uiPadding<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> app<SPAN class="punctuation token">.</SPAN>sceneView<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">set</SPAN><SPAN class="punctuation token">(</SPAN>padding<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> app<SPAN class="punctuation token">.</SPAN>sceneView<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">set</SPAN><SPAN class="punctuation token">(</SPAN>uiPadding<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Reset popup</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>app<SPAN class="punctuation token">.</SPAN>activeView<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN>visible <SPAN class="operator token">&&</SPAN> app<SPAN class="punctuation token">.</SPAN>activeView<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN>dockEnabled<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> app<SPAN class="punctuation token">.</SPAN>activeView<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN>visible <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN> app<SPAN class="punctuation token">.</SPAN>activeView<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN>visible <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</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>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></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.
Robert,
Thanks a lot for your response.
I was looking for the same search widget with multiple options in the below sample.
Imtiyaz,
Here is that site updated to 4.8 API:
<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>html lang<SPAN class="operator token">=</SPAN><SPAN class="string token">"en"</SPAN><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 http<SPAN class="operator token">-</SPAN>equiv<SPAN class="operator token">=</SPAN><SPAN class="string token">"X-UA-Compatible"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"IE=edge"</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">"width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"description"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"Calcite Maps App"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"author"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">""</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"icon"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fwww.esri.com%2Ffavicon.ico" target="_blank">http://www.esri.com/favicon.ico</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>PDX Neighborhoods <SPAN class="operator token">-</SPAN> Calcite Maps<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> Calcite Bootstrap <SPAN class="operator token">--</SPAN><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"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fesri.github.io%2Fcalcite-maps%2Fdist%2Fcss%2Fcalcite-maps-bootstrap.min-v0.8.css" target="_blank">https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.8.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> Calcite Maps <SPAN class="operator token">--</SPAN><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"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fesri.github.io%2Fcalcite-maps%2Fdist%2Fcss%2Fcalcite-maps-arcgis-4.x.min-v0.8.css" target="_blank">https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-4.x.min-v0.8.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> ArcGIS JS <SPAN class="number token">4.0</SPAN> <SPAN class="operator token">--</SPAN><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"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.8%2Fesri%2Fcss%2Fmain.css" target="_blank">https://js.arcgis.com/4.8/esri/css/main.css</A><SPAN>"</SPAN></SPAN><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> margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> padding<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> <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><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>body <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-maps calcite-nav-top"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> Navbar <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>nav <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-dark calcite-bgcolor-red-75"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> Dropdown <SPAN class="operator token">--</SPAN><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">"dropdown calcite-dropdown calcite-bg-light calcite-text-dark"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"presentation"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>a <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"dropdown-toggle"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> aria<SPAN class="operator token">-</SPAN>haspopup<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN> aria<SPAN class="operator token">-</SPAN>expanded<SPAN class="operator token">=</SPAN><SPAN class="string token">"false"</SPAN><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">"calcite-dropdown-toggle"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"sr-only"</SPAN><SPAN class="operator token">></SPAN>Toggle dropdown menu<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>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><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>ul <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"dropdown-menu"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>li<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>a <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"visible-xs"</SPAN> data<SPAN class="operator token">-</SPAN>target<SPAN class="operator token">=</SPAN><SPAN class="string token">"#panelSearch"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> aria<SPAN class="operator token">-</SPAN>haspopup<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"glyphicon glyphicon-search"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> Search<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>li<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>li<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>a role<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> data<SPAN class="operator token">-</SPAN>target<SPAN class="operator token">=</SPAN><SPAN class="string token">"#panelLegend"</SPAN> aria<SPAN class="operator token">-</SPAN>haspopup<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"glyphicon glyphicon-list"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> Legend<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>li<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>li<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>a role<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> data<SPAN class="operator token">-</SPAN>target<SPAN class="operator token">=</SPAN><SPAN class="string token">"#panelBasemaps"</SPAN> aria<SPAN class="operator token">-</SPAN>haspopup<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"glyphicon glyphicon-th-large"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> Basemaps<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>li<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>li<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>a role<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"calciteToggleNavbar"</SPAN> aria<SPAN class="operator token">-</SPAN>haspopup<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"glyphicon glyphicon-fullscreen"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> Toggle Title<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>li<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>ul<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><SPAN class="operator token">--</SPAN> Title <SPAN class="operator token">--</SPAN><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">"calcite-title calcite-overflow-hidden"</SPAN><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">"calcite-title-main"</SPAN><SPAN class="operator token">></SPAN><SPAN class="number token">2015</SPAN> Portland Population Density<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"calcite-title-divider hidden-xs"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<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">"calcite-title-sub hidden-xs"</SPAN><SPAN class="operator token">></SPAN>Explore where people are living <SPAN class="keyword token">in</SPAN> downtown neighborhoods<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><SPAN class="operator token">--</SPAN> Nav <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>ul <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"nav navbar-nav calcite-nav"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>li<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">"calcite-navbar-search hidden-xs"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"searchNavDiv"</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><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>li<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>ul<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="regex token">/nav><!--/</SPAN><SPAN class="punctuation token">.</SPAN>calcite<SPAN class="operator token">-</SPAN>navbar <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> Map Container <SPAN class="operator token">--</SPAN><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">"calcite-map map-position-absolute"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"mapViewDiv"</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><SPAN class="regex token">/div><!-- /</SPAN><SPAN class="punctuation token">.</SPAN>calcite<SPAN class="operator token">-</SPAN>map <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> Panels <SPAN class="operator token">--</SPAN><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">"calcite-panels calcite-panels-right calcite-text-dark calcite-bg-light panel-group"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"tablist"</SPAN> aria<SPAN class="operator token">-</SPAN>multiselectable<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> Legend Panel <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"panelLegend"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel panel-default collapse"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"headingPanel"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-heading"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"tab"</SPAN><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">"panel-title"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>a <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-toggle"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> data<SPAN class="operator token">-</SPAN>toggle<SPAN class="operator token">=</SPAN><SPAN class="string token">"collapse"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"#collapseLegend"</SPAN> data<SPAN class="operator token">-</SPAN>parent<SPAN class="operator token">=</SPAN><SPAN class="string token">"#panelAccordion"</SPAN> aria<SPAN class="operator token">-</SPAN>expanded<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN> aria<SPAN class="operator token">-</SPAN>controls<SPAN class="operator token">=</SPAN><SPAN class="string token">"collapseLegend"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"glyphicon glyphicon-info-sign"</SPAN> aria<SPAN class="operator token">-</SPAN>hidden<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-label"</SPAN><SPAN class="operator token">></SPAN>Legend<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>a <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-close"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> data<SPAN class="operator token">-</SPAN>toggle<SPAN class="operator token">=</SPAN><SPAN class="string token">"collapse"</SPAN> data<SPAN class="operator token">-</SPAN>target<SPAN class="operator token">=</SPAN><SPAN class="string token">"#panelLegend"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-icon esri-icon-close"</SPAN> aria<SPAN class="operator token">-</SPAN>hidden<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<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>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"collapseLegend"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-collapse collapse"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"tabpanel"</SPAN> aria<SPAN class="operator token">-</SPAN>labelledby<SPAN class="operator token">=</SPAN><SPAN class="string token">"headingLegend"</SPAN><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">"panel-body"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"legendDiv"</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><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><SPAN class="operator token">--</SPAN> Basemaps Panel <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"panelBasemaps"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel collapse"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"headingBasemaps"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-heading"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"tab"</SPAN><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">"panel-title"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>a <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-toggle collapsed"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> data<SPAN class="operator token">-</SPAN>toggle<SPAN class="operator token">=</SPAN><SPAN class="string token">"collapse"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"#collapseBasemaps"</SPAN> aria<SPAN class="operator token">-</SPAN>expanded<SPAN class="operator token">=</SPAN><SPAN class="string token">"false"</SPAN> aria<SPAN class="operator token">-</SPAN>controls<SPAN class="operator token">=</SPAN><SPAN class="string token">"collapseBasemaps"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"glyphicon glyphicon-th-large"</SPAN> aria<SPAN class="operator token">-</SPAN>hidden<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-label"</SPAN><SPAN class="operator token">></SPAN>Basemaps<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>a <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-close"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> data<SPAN class="operator token">-</SPAN>toggle<SPAN class="operator token">=</SPAN><SPAN class="string token">"collapse"</SPAN> data<SPAN class="operator token">-</SPAN>target<SPAN class="operator token">=</SPAN><SPAN class="string token">"#panelBasemaps"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-icon esri-icon-close"</SPAN> aria<SPAN class="operator token">-</SPAN>hidden<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<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>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"collapseBasemaps"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-collapse collapse"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"tabpanel"</SPAN> aria<SPAN class="operator token">-</SPAN>labelledby<SPAN class="operator token">=</SPAN><SPAN class="string token">"headingBasemaps"</SPAN><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">"panel-body"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>select id<SPAN class="operator token">=</SPAN><SPAN class="string token">"selectBasemapPanel"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"form-control"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"streets"</SPAN> data<SPAN class="operator token">-</SPAN>vector<SPAN class="operator token">=</SPAN><SPAN class="string token">"streets-vector"</SPAN><SPAN class="operator token">></SPAN>Streets<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"satellite"</SPAN> data<SPAN class="operator token">-</SPAN>vector<SPAN class="operator token">=</SPAN><SPAN class="string token">"satellite"</SPAN><SPAN class="operator token">></SPAN>Satellite<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"hybrid"</SPAN> data<SPAN class="operator token">-</SPAN>vector<SPAN class="operator token">=</SPAN><SPAN class="string token">"hybrid"</SPAN><SPAN class="operator token">></SPAN>Hybrid<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"national-geographic"</SPAN> data<SPAN class="operator token">-</SPAN>vector<SPAN class="operator token">=</SPAN><SPAN class="string token">"national-geographic"</SPAN><SPAN class="operator token">></SPAN>National Geographic<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"topo"</SPAN> data<SPAN class="operator token">-</SPAN>vector<SPAN class="operator token">=</SPAN><SPAN class="string token">"topo-vector"</SPAN><SPAN class="operator token">></SPAN>Topographic<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"gray"</SPAN> data<SPAN class="operator token">-</SPAN>vector<SPAN class="operator token">=</SPAN><SPAN class="string token">"gray-vector"</SPAN><SPAN class="operator token">></SPAN>Gray<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"dark-gray"</SPAN> data<SPAN class="operator token">-</SPAN>vector<SPAN class="operator token">=</SPAN><SPAN class="string token">"dark-gray-vector"</SPAN><SPAN class="operator token">></SPAN>Dark Gray<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"osm"</SPAN> data<SPAN class="operator token">-</SPAN>vector<SPAN class="operator token">=</SPAN><SPAN class="string token">"osm"</SPAN><SPAN class="operator token">></SPAN>Open Street Map<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"dark-gray"</SPAN> data<SPAN class="operator token">-</SPAN>vector<SPAN class="operator token">=</SPAN><SPAN class="string token">"streets-night-vector"</SPAN> selected<SPAN class="operator token">></SPAN>Streets Night<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"streets"</SPAN> data<SPAN class="operator token">-</SPAN>vector<SPAN class="operator token">=</SPAN><SPAN class="string token">"streets-navigation-vector"</SPAN><SPAN class="operator token">></SPAN>Streets Mobile<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>select<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><SPAN class="operator token">--</SPAN> Search Panel <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"panelSearch"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel panel-default collapse hidden-sm hidden-md hidden-lg"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"headingSearch"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-heading"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"tab"</SPAN><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">"panel-title"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>a <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-toggle collapsed"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> data<SPAN class="operator token">-</SPAN>toggle<SPAN class="operator token">=</SPAN><SPAN class="string token">"collapse"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"#collapseSearch"</SPAN> data<SPAN class="operator token">-</SPAN>parent<SPAN class="operator token">=</SPAN><SPAN class="string token">"#panelAccordion"</SPAN> aria<SPAN class="operator token">-</SPAN>expanded<SPAN class="operator token">=</SPAN><SPAN class="string token">"false"</SPAN> aria<SPAN class="operator token">-</SPAN>controls<SPAN class="operator token">=</SPAN><SPAN class="string token">"collapseSearch"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"glyphicon glyphicon-search"</SPAN> aria<SPAN class="operator token">-</SPAN>hidden<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> Search<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>a <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-close"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> data<SPAN class="operator token">-</SPAN>toggle<SPAN class="operator token">=</SPAN><SPAN class="string token">"collapse"</SPAN> data<SPAN class="operator token">-</SPAN>target<SPAN class="operator token">=</SPAN><SPAN class="string token">"#panelSearch"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"esri-icon esri-icon-close"</SPAN> aria<SPAN class="operator token">-</SPAN>hidden<SPAN class="operator token">=</SPAN><SPAN class="string token">"true"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<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>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"collapseSearch"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"panel-collapse collapse"</SPAN> role<SPAN class="operator token">=</SPAN><SPAN class="string token">"tabpanel"</SPAN> aria<SPAN class="operator token">-</SPAN>labelledby<SPAN class="operator token">=</SPAN><SPAN class="string token">"headingSearch"</SPAN><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">"panel-body calcite-body-expander"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"searchPanelDiv"</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><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="regex token">/div> <!-- /</SPAN><SPAN class="punctuation token">.</SPAN>panel<SPAN class="operator token">-</SPAN>group <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script type<SPAN class="operator token">=</SPAN><SPAN class="string token">"text/javascript"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="keyword token">var</SPAN> dojoConfig <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> packages<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">"bootstrap"</SPAN><SPAN class="punctuation token">,</SPAN> location<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%2Fesri.github.io%2Fcalcite-maps%2Fdist%2Fvendor%2Fdojo-bootstrap" target="_blank">https://esri.github.io/calcite-maps/dist/vendor/dojo-bootstrap</A><SPAN>"</SPAN></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">"calcite-maps"</SPAN><SPAN class="punctuation token">,</SPAN> location<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%2Fesri.github.io%2Fcalcite-maps%2Fdist%2Fjs%2Fdojo" target="_blank">https://esri.github.io/calcite-maps/dist/js/dojo</A><SPAN>"</SPAN></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>script src<SPAN class="operator 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%2Fjs.arcgis.com%2F4.8%2F" target="_blank">https://js.arcgis.com/4.8/</A><SPAN>"</SPAN></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="keyword token">var</SPAN> app<SPAN class="punctuation 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/WebMap"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/layers/FeatureLayer"</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/Search"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/Legend"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/query"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/tasks/Locator"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// Calcite Maps</SPAN> <SPAN class="string token">"calcite-maps/calcitemaps-v0.8"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// Calcite Maps ArcGIS Support</SPAN> <SPAN class="string token">"calcite-maps/calcitemaps-arcgis-support-v0.8"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// Bootstrap</SPAN> <SPAN class="string token">"bootstrap/Collapse"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"bootstrap/Dropdown"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"bootstrap/Tab"</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>Map<SPAN class="punctuation token">,</SPAN> WebMap<SPAN class="punctuation token">,</SPAN> FeatureLayer<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">,</SPAN> Search<SPAN class="punctuation token">,</SPAN> Legend<SPAN class="punctuation token">,</SPAN> query<SPAN class="punctuation token">,</SPAN> Locator<SPAN class="punctuation token">,</SPAN> CalciteMaps<SPAN class="punctuation token">,</SPAN> CalciteMapsArcGIS<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// App</SPAN> app <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> initialExtent<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">,</SPAN> mapView<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">,</SPAN> viewPadding<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> top<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">50</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> searchWidgetNav<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">,</SPAN> searchWidgetPanel<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">null</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Webmap</SPAN> <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</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> <SPAN class="string token">"7186a92406194797aa518c06c189a71f"</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">// View</SPAN> app<SPAN class="punctuation token">.</SPAN>mapView <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">"mapViewDiv"</SPAN><SPAN class="punctuation token">,</SPAN> map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN> padding<SPAN class="punctuation token">:</SPAN> app<SPAN class="punctuation token">.</SPAN>viewPadding<SPAN class="punctuation token">,</SPAN> ui<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> components<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"zoom"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"compass"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"attribution"</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> CalciteMapsArcGIS<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setPopupPanelSync</SPAN><SPAN class="punctuation token">(</SPAN>app<SPAN class="punctuation token">.</SPAN>mapView<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> app<SPAN class="punctuation token">.</SPAN>mapView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// Set view properties</SPAN> app<SPAN class="punctuation token">.</SPAN>initialExtent <SPAN class="operator token">=</SPAN> app<SPAN class="punctuation token">.</SPAN>mapView<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clone</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> app<SPAN class="punctuation token">.</SPAN>mapView<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN>dockOptions <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> breakpoint<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">768</SPAN><SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="comment token">// Search</SPAN> app<SPAN class="punctuation token">.</SPAN>searchWidgetNav <SPAN class="operator token">=</SPAN> <SPAN class="token function">createSearchWidget</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"searchNavDiv"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> app<SPAN class="punctuation token">.</SPAN>searchWidgetPanel <SPAN class="operator token">=</SPAN> <SPAN class="token function">createSearchWidget</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"searchPanelDiv"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Legend</SPAN> <SPAN class="token function">createLegendWidget</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"legendDiv"</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">createLegendWidget</SPAN><SPAN class="punctuation token">(</SPAN>parentId<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation 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> viewModel<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">:</SPAN> app<SPAN class="punctuation token">.</SPAN>mapView <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> parentId<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> legend<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">return</SPAN> legend<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">createSearchWidget</SPAN><SPAN class="punctuation token">(</SPAN>parentId<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> app<SPAN class="punctuation token">.</SPAN>mapView<SPAN class="punctuation token">,</SPAN> allPlaceholder<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Find neighborhoods and places"</SPAN><SPAN class="punctuation token">,</SPAN> includeDefaultSources<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> parentId<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> sources <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Add neighborhoods search</SPAN> sources<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> featureLayer<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fservices.arcgis.com%2FuCXeTVveQzP4IIcx%2Farcgis%2Frest%2Fservices%2FPDX_Neighborhoods_Enriched_Styled%2FFeatureServer%2F0" target="_blank">http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Neighborhoods_Enriched_Styled/FeatureServer/0</A><SPAN>"</SPAN></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> searchFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"NAME"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> displayField<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"NAME"</SPAN><SPAN class="punctuation token">,</SPAN> exactMatch<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</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> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Find a Neighborhood"</SPAN><SPAN class="punctuation token">,</SPAN> placeholder<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"e.g. old town"</SPAN><SPAN class="punctuation token">,</SPAN> popupEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> popupOpenOnSelect<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> searchExtent<SPAN class="punctuation token">:</SPAN> app<SPAN class="punctuation token">.</SPAN>initialExtent<SPAN class="punctuation token">,</SPAN> withinViewEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN> searchAllEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="punctuation token">{</SPAN> locator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Locator</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> url<SPAN class="punctuation token">:</SPAN> "<SPAN class="comment token">//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }),</SPAN> singleLineFieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"SingleLine"</SPAN><SPAN class="punctuation token">,</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Custom Geocoding Service"</SPAN><SPAN class="punctuation token">,</SPAN> localSearchOptions<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> minScale<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">300000</SPAN><SPAN class="punctuation token">,</SPAN> distance<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">50000</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> placeholder<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Search Geocoder"</SPAN><SPAN class="punctuation token">,</SPAN> maxResults<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3</SPAN><SPAN class="punctuation token">,</SPAN> maxSuggestions<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">6</SPAN><SPAN class="punctuation token">,</SPAN> suggestionsEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN> minSuggestCharacters<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// // Add Esri geocoder search</SPAN> <SPAN class="comment token">// search.defaultSource.name = "Find an address or place";</SPAN> <SPAN class="comment token">// search.defaultSource.placeholder = "e.g. Starbucks";</SPAN> <SPAN class="comment token">// search.defaultSource.searchExtent = app.initialExtent;</SPAN> <SPAN class="comment token">// sources.push(search.defaultSource);</SPAN> <SPAN class="comment token">// Set search sources</SPAN> search<SPAN class="punctuation token">.</SPAN>sources <SPAN class="operator token">=</SPAN> sources<SPAN class="punctuation token">;</SPAN> search<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">return</SPAN> search<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="comment token">// Basemaps</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#selectBasemapPanel"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"change"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> app<SPAN class="punctuation token">.</SPAN>mapView<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>basemap <SPAN class="operator token">=</SPAN> e<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>options<SPAN class="punctuation token">[</SPAN>e<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>selectedIndex<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>dataset<SPAN class="punctuation token">.</SPAN>vector<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Popup - undock</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".calcite-panels .panel"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"show.bs.collapse"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> app<SPAN class="punctuation token">.</SPAN>mapView<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN>dockEnabled <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</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">// Panels - hide</SPAN> app<SPAN class="punctuation token">.</SPAN>mapView<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"currentDockPosition"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>result<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>result <SPAN class="operator token">&&</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".calcite-panels .panel.in"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN><SPAN class="punctuation token">(</SPAN>window<SPAN class="punctuation token">.</SPAN>innerWidth <SPAN class="operator token">></SPAN> <SPAN class="number token">544</SPAN> <SPAN class="operator token">&&</SPAN> window<SPAN class="punctuation token">.</SPAN>innerWidth <SPAN class="operator token"><</SPAN> <SPAN class="number token">768</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".calcite-panels"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">addClass</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"invisible"</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">else</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".calcite-panels"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeClass</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"invisible"</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>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>
サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
