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>
Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
