# Minimize Overviewmap at 4.13 like Legacy Overviewmap widget at 3.x

470
2
10-28-2019 01:50 PM
New Contributor III

I am trying to find the Overviewmap widget with Minimizer at 4.13 as we have at Legacy Overviewmap widget at 3.x

4.13 without minimizer

3.x with minimizer

Tags (1)
1 Solution

Accepted Solutions
MVP Esteemed Contributor

Imtiyaz,

With a little effort.

``<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <meta      name="viewport"      content="initial-scale=1,maximum-scale=1,user-scalable=no"    />    <title>Overview map - 4.13</title>    <style>      html,      body,      #viewDiv {        padding: 0;        margin: 0;        height: 100%;        width: 100%;        z-index: -1;      }      #overviewDiv {        position: absolute;        top: 12px;        right: 12px;        width: 300px;        height: 200px;        border: 1px solid black;        z-index: 1;        overflow: hidden;      }            #overviewDiv.hide {        width: 20px;        height: 20px;        border: 0 solid black;      }      #extentDiv {        background-color: rgba(0, 0, 0, 0.5);        position: absolute;        z-index: 2;      }      .ovwHide {        background: url(https://js.arcgis.com/3.30/esri/dijit/images/overview.png)          0px -78px;      }      .ovwShow {        background: url(https://js.arcgis.com/3.30/esri/dijit/images/overview.png)          0px 0px;      }      #ovwButton {        position: absolute;        top:2px;        right:2px;        width: 16px;        height: 16px;        cursor: pointer;        z-index: 99;      }    </style>    <link      rel="stylesheet"      href="https://js.arcgis.com/4.13/esri/themes/light/main.css"    />    <script src="https://js.arcgis.com/4.13/"></script>    <script>      require([        "esri/Map",        "esri/views/SceneView",        "esri/views/MapView",        "esri/geometry/Point",        "esri/core/watchUtils",        "dojo/on",        "dojo/_base/html",        "dojo/query"      ], function(Map, SceneView, MapView, Point, watchUtils, on, html, query) {        // Create a Map with a basemap, to be used with in the main view        var mainMap = new Map({          basemap: "hybrid",          ground: "world-elevation"        });        // Create another Map, to be used in the overview "view"        var overviewMap = new Map({          basemap: "topo"        });        // Create the SceneView        var mainView = new SceneView({          container: "viewDiv",          map: mainMap,          camera: {            position: {              spatialReference: {                latestWkid: 3857,                wkid: 102100              },              x: 925151,              y: 5956309,              z: 3871            },            heading: 203,            tilt: 72          }        });        // Create the MapView for overview map        var mapView = new MapView({          container: "overviewDiv",          map: overviewMap,          constraints: {            rotationEnabled: false          }        });        // Remove the default widgets        mapView.ui.components = [];        var extentDiv = document.getElementById("extentDiv");        var ovButton = document.getElementById("ovwButton");                on(ovButton, 'click', function(){          if(html.hasClass(ovButton, "ovwHide")){            html.setAttr(ovButton, 'title', 'Show Map Overview')            html.replaceClass(ovButton, "ovwShow","ovwHide");            html.setStyle(query('.esri-view-root', 'overviewDiv')[0], 'display','none');            html.setStyle(extentDiv, 'display','none');          }else{            html.replaceClass(ovButton, "ovwHide","ovwShow");            html.setAttr(ovButton, 'title', 'Hide Map Overview');            html.setStyle(query('.esri-view-root', 'overviewDiv')[0], 'display','block');            html.setStyle(extentDiv, 'display','block');          }          html.toggleClass("overviewDiv" ,"hide");        });        mapView.when(function() {          // Update the overview extent whenever the MapView or SceneView extent changes          mainView.watch("extent", updateOverviewExtent);          mapView.watch("extent", updateOverviewExtent);          // Update the minimap overview when the main view becomes stationary          watchUtils.when(mainView, "stationary", updateOverview);          function updateOverview() {            // Animate the MapView to a zoomed-out scale so we get a nice overview.            // We use the "progress" callback of the goTo promise to update            // the overview extent while animating            mapView.goTo({              center: mainView.center,              scale:                mainView.scale *                2 *                Math.max(                  mainView.width / mapView.width,                  mainView.height / mapView.height                )            });          }          function updateOverviewExtent() {            // Update the overview extent by converting the SceneView extent to the            // MapView screen coordinates and updating the extentDiv position.            var extent = mainView.extent;            var bottomLeft = mapView.toScreen(              new Point({                x: extent.xmin,                y: extent.ymin,                spatialReference: extent.spatialReference              })            );            var topRight = mapView.toScreen(              new Point({                x: extent.xmax,                y: extent.ymax,                spatialReference: extent.spatialReference              })            );            extentDiv.style.top = topRight.y + "px";            extentDiv.style.left = bottomLeft.x + "px";            extentDiv.style.height = bottomLeft.y - topRight.y + "px";            extentDiv.style.width = topRight.x - bottomLeft.x + "px";          }        });      });    </script>  </head>  <body>    <div id="viewDiv"></div>    <div id="overviewDiv">      <div id="ovwButton"        class="ovwHide"        title="Hide Map Overview"      ></div>      <div id="extentDiv"></div>    </div>  </body></html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍``
2 Replies
MVP Esteemed Contributor

Imtiyaz,

With a little effort.

``<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <meta      name="viewport"      content="initial-scale=1,maximum-scale=1,user-scalable=no"    />    <title>Overview map - 4.13</title>    <style>      html,      body,      #viewDiv {        padding: 0;        margin: 0;        height: 100%;        width: 100%;        z-index: -1;      }      #overviewDiv {        position: absolute;        top: 12px;        right: 12px;        width: 300px;        height: 200px;        border: 1px solid black;        z-index: 1;        overflow: hidden;      }            #overviewDiv.hide {        width: 20px;        height: 20px;        border: 0 solid black;      }      #extentDiv {        background-color: rgba(0, 0, 0, 0.5);        position: absolute;        z-index: 2;      }      .ovwHide {        background: url(https://js.arcgis.com/3.30/esri/dijit/images/overview.png)          0px -78px;      }      .ovwShow {        background: url(https://js.arcgis.com/3.30/esri/dijit/images/overview.png)          0px 0px;      }      #ovwButton {        position: absolute;        top:2px;        right:2px;        width: 16px;        height: 16px;        cursor: pointer;        z-index: 99;      }    </style>    <link      rel="stylesheet"      href="https://js.arcgis.com/4.13/esri/themes/light/main.css"    />    <script src="https://js.arcgis.com/4.13/"></script>    <script>      require([        "esri/Map",        "esri/views/SceneView",        "esri/views/MapView",        "esri/geometry/Point",        "esri/core/watchUtils",        "dojo/on",        "dojo/_base/html",        "dojo/query"      ], function(Map, SceneView, MapView, Point, watchUtils, on, html, query) {        // Create a Map with a basemap, to be used with in the main view        var mainMap = new Map({          basemap: "hybrid",          ground: "world-elevation"        });        // Create another Map, to be used in the overview "view"        var overviewMap = new Map({          basemap: "topo"        });        // Create the SceneView        var mainView = new SceneView({          container: "viewDiv",          map: mainMap,          camera: {            position: {              spatialReference: {                latestWkid: 3857,                wkid: 102100              },              x: 925151,              y: 5956309,              z: 3871            },            heading: 203,            tilt: 72          }        });        // Create the MapView for overview map        var mapView = new MapView({          container: "overviewDiv",          map: overviewMap,          constraints: {            rotationEnabled: false          }        });        // Remove the default widgets        mapView.ui.components = [];        var extentDiv = document.getElementById("extentDiv");        var ovButton = document.getElementById("ovwButton");                on(ovButton, 'click', function(){          if(html.hasClass(ovButton, "ovwHide")){            html.setAttr(ovButton, 'title', 'Show Map Overview')            html.replaceClass(ovButton, "ovwShow","ovwHide");            html.setStyle(query('.esri-view-root', 'overviewDiv')[0], 'display','none');            html.setStyle(extentDiv, 'display','none');          }else{            html.replaceClass(ovButton, "ovwHide","ovwShow");            html.setAttr(ovButton, 'title', 'Hide Map Overview');            html.setStyle(query('.esri-view-root', 'overviewDiv')[0], 'display','block');            html.setStyle(extentDiv, 'display','block');          }          html.toggleClass("overviewDiv" ,"hide");        });        mapView.when(function() {          // Update the overview extent whenever the MapView or SceneView extent changes          mainView.watch("extent", updateOverviewExtent);          mapView.watch("extent", updateOverviewExtent);          // Update the minimap overview when the main view becomes stationary          watchUtils.when(mainView, "stationary", updateOverview);          function updateOverview() {            // Animate the MapView to a zoomed-out scale so we get a nice overview.            // We use the "progress" callback of the goTo promise to update            // the overview extent while animating            mapView.goTo({              center: mainView.center,              scale:                mainView.scale *                2 *                Math.max(                  mainView.width / mapView.width,                  mainView.height / mapView.height                )            });          }          function updateOverviewExtent() {            // Update the overview extent by converting the SceneView extent to the            // MapView screen coordinates and updating the extentDiv position.            var extent = mainView.extent;            var bottomLeft = mapView.toScreen(              new Point({                x: extent.xmin,                y: extent.ymin,                spatialReference: extent.spatialReference              })            );            var topRight = mapView.toScreen(              new Point({                x: extent.xmax,                y: extent.ymax,                spatialReference: extent.spatialReference              })            );            extentDiv.style.top = topRight.y + "px";            extentDiv.style.left = bottomLeft.x + "px";            extentDiv.style.height = bottomLeft.y - topRight.y + "px";            extentDiv.style.width = topRight.x - bottomLeft.x + "px";          }        });      });    </script>  </head>  <body>    <div id="viewDiv"></div>    <div id="overviewDiv">      <div id="ovwButton"        class="ovwHide"        title="Hide Map Overview"      ></div>      <div id="extentDiv"></div>    </div>  </body></html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍``
New Contributor III

Robert,

Thanks a lot.

Below is my implementation

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Calcite Maps and Bootstrap - 4.13</title>

<!-- Calcite Bootstrap -->
rel="stylesheet"
href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.8.css"
/>

<!-- Calcite Maps -->
rel="stylesheet"
href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-4.x.min-v0.8.css"
/>

<!-- ArcGIS JS 4 -->
rel="stylesheet"
href="https://js.arcgis.com/4.13/esri/themes/light/main.css"
/>

<style>
html,
body {
margin: 0;
height: 100%;
}

#overviewDiv {
position: absolute;
bottom: 1px;
right: 1px;
width: 300px;
height: 200px;
border: 1px solid black;
z-index: 1;
overflow: hidden;
}

#overviewDiv.hide {
width: 20px;
height: 20px;
border: 0 solid black;
}

#extentDiv {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
z-index: 2;
}

.ovwHide {
background: url(https://js.arcgis.com/3.30/esri/dijit/images/overview.png)
no-repeat -1px -27px;
}
.ovwShow {
background: url(https://js.arcgis.com/3.30/esri/dijit/images/overview.png)
no-repeat -1px -53px;
}
#ovwButton {
position: absolute;
bottom:2px;
right:2px;
width: 16px;
height: 16px;
cursor: pointer;
z-index: 99;
}
</style>

<body class="calcite-maps calcite-nav-top">
<!-- Navbar -->
<div id="overviewDiv">

<div id="extentDiv"></div>
</div>
<div id="ovwButton"
class="ovwHide"
title="Hide Map Overview"
></div>
<nav
class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-dark"
>
<div
class="dropdown calcite-dropdown calcite-text-dark calcite-bg-light"
role="presentation"
>
<a
class="dropdown-toggle"
role="button"
aria-haspopup="true"
aria-expanded="false"
>
<div class="calcite-dropdown-toggle">
<span></span> <span></span> <span></span>
</div>
</a>
<li class="active">
<a
class="hidden-md hidden-lg"
href="#mapTab"
aria-controls="mapTab"
role="tab"
data-toggle="tab"
>
Map</a
>
</li>
<li>
<a
class="hidden-md hidden-lg"
href="#sceneTab"
aria-controls="sceneTab"
role="tab"
data-toggle="tab"
>
Scene</a
>
</li>
<li>
<a role="button" data-target="#panelBasemaps" aria-haspopup="true"
><span class="glyphicon glyphicon-th-large"></span> Basemaps</a
>
</li>
<li>
<a role="button" data-target="#panelSettings" aria-haspopup="true"
><span class="glyphicon glyphicon-cog"></span> Settings</a
>
</li>
<li>
<a role="button" id="calciteToggleNavbar" aria-haspopup="true"
><span class="glyphicon glyphicon-fullscreen"></span> Full Map</a
>
</li>
</ul>
</div>
<!-- Title -->
<div class="calcite-title calcite-overflow-hidden">
<span class="calcite-title-main">Calcite Maps</span>
<span class="calcite-title-divider hidden-xs"></span>
<span class="calcite-title-sub hidden-xs"
>A modern framework for building map apps</span
>
</div>
<!-- Nav -->
<ul class="nav navbar-nav calcite-nav">
<li class="active">
<a
id="mapNav"
class="hidden-xs hidden-sm"
href="#mapTab"
aria-controls="mapTab"
aria-expanded="true"
role="tab"
data-toggle="tab"
data-tooltip="tip"
title="2D View"
data-placement="bottom"
>Map</a
>
</li>
<li>
<a
id="sceneNav"
class="hidden-xs hidden-sm"
href="#sceneTab"
aria-controls="sceneTab"
role="tab"
data-toggle="tab"
data-tooltip="tip"
title="3D View"
data-placement="bottom"
>Scene</a
>
</li>
<li>
<div class="calcite-navbar-search calcite-search-expander">
<div id="searchWidgetDiv"></div>
</div>
</li>
</ul>
</nav>
<!--/.calcite-navbar -->

<!-- Map -->

<div class="calcite-map calcite-map-absolute">
<div id="tabContainer" class="tab-content">
<div id="mapTab" class="tab-pane fade in active" role="tabpanel">
<div id="mapViewDiv"></div>
</div>
<div id="sceneViewDiv"></div>
</div>
</div>
</div>
<!-- /.calcite-map -->

<!-- Panels -->

<div
class="calcite-panels calcite-panels-right calcite-text-light calcite-bg-dark panel-group"
>
<!-- Basemaps Panel -->

<div id="panelBasemaps" class="panel collapse">
<div class="panel-title">
<a
class="panel-toggle collapsed"
role="button"
data-toggle="collapse"
href="#collapseBasemaps"
aria-expanded="false"
aria-controls="collapseBasemaps"
><span
class="glyphicon glyphicon-th-large"
aria-hidden="true"
></span
><span class="panel-label">Basemaps</span></a
>
<a
class="panel-close"
role="button"
data-toggle="collapse"
data-target="#panelBasemaps"
><span class="esri-icon esri-icon-close" aria-hidden="true"></span
></a>
</div>
</div>
<div
id="collapseBasemaps"
class="panel-collapse collapse"
role="tabpanel"
>
<div class="panel-body"><div id="basemapPanelDiv"></div></div>
</div>
</div>

<!-- Panel Settings -->

<div id="panelSettings" class="panel panel-map collapse">
<div class="panel-title">
<a
class="panel-toggle"
role="button"
data-toggle="collapse"
href="#collapseSettings"
data-parent="#panelAccordion"
aria-expanded="true"
aria-controls="collapseSettings"
><span class="glyphicon glyphicon-cog" aria-hidden="true"></span
><span class="panel-label">Settings</span></a
>
<a
class="panel-close"
role="button"
data-toggle="collapse"
data-target="#panelSettings"
><span class="esri-icon esri-icon-close" aria-hidden="true"></span
></a>
</div>
</div>
<div
id="collapseSettings"
class="panel-collapse collapse"
role="tabpanel"
>
<div class="panel-body">
<div class="form-horizontal">
<!-- Theme -->

<div class="form-group">
<label for="settingsTheme" class="col-xs-3 control-label"
>Theme</label
>
<div class="col-xs-9">
<select id="settingsTheme" class="form-control">
<option
value="calcite-dark"
data-textcolor="calcite-text-light"
data-bgcolor="calcite-bg-dark"
selected
>Calcite Dark</option
>
<option
value="calcite-light"
data-textcolor="calcite-text-dark"
data-bgcolor="calcite-bg-light"
>Calcte Light</option
>
</select>
</div>
</div>

<!-- Color -->

<div class="form-group">
<label for="settingsColor" class="col-xs-3 control-label"
>Color</label
>
<div class="col-xs-9">
<select id="settingsColor" class="form-control">
<option value="" data-theme="calcite-theme-light"
>Calcite Default</option
>
<option
value="calcite-bgcolor-dark-blue"
data-textcolor="calcite-text-light"
data-bgcolor="calcite-bg-custom"
>Calcite Dark Blue</option
>
<option
value="calcite-bgcolor-dark-green"
data-textcolor="calcite-text-light"
data-bgcolor="calcite-bg-custom"
>Calcite Dark Green</option
>
<option
value="calcite-bgcolor-dark-brown"
data-textcolor="calcite-text-light"
data-bgcolor="calcite-bg-custom"
>Calcite Dark Brown
</option>
<option
value="calcite-bgcolor-dark-red"
data-textcolor="calcite-text-light"
data-bgcolor="calcite-bg-custom"
>Calcite Dark Red</option
>
<option
value="calcite-bgcolor-darkest-grey"
data-textcolor="calcite-text-light"
data-bgcolor="calcite-bg-custom"
>Calcite Darkest Grey</option
>
<option
value="calcite-bgcolor-lightest-grey"
data-textcolor="calcite-text-dark"
data-bgcolor="calcite-bg-custom"
>Calcite Lightest Grey</option
>
<option
value="calcite-bgcolor-blue-75"
data-textcolor="calcite-text-light"
data-bgcolor="calcite-bg-custom"
>Calcite Blue 75%</option
>
<option
value="calcite-bgcolor-black-75"
data-textcolor="calcite-text-light"
data-bgcolor="calcite-bg-custom"
>Calcite Black 75%</option
>
</select>
</div>
</div>

<!-- Widgets -->

<div class="form-group">
<label for="settingsWidgets" class="col-xs-3 control-label"
>Widgets</label
>
<div class="col-xs-9">
<select id="settingsWidgets" class="form-control">
<option value="calcite-widgets-dark">Calcite Dark</option>
<option value="calcite-widgets-light" selected
>Calcite Light</option
>
</select>
</div>
</div>

<!-- Layout -->

<div class="form-group">
<label for="settingsLayout" class="col-xs-3 control-label"
>Layout</label
>
<div class="col-xs-9">
<select id="settingsLayout" class="form-control">
<option
value="calcite-nav-top"
data-nav="navbar-fixed-top"
selected
>Top</option
>
<option
value="calcite-nav-bottom"
data-nav="navbar-fixed-bottom"
>Bottom</option
>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.calcite-panels -->

<script type="text/javascript">
var dojoConfig = {
packages: [
{
name: "bootstrap",
location:
"https://esri.github.io/calcite-maps/dist/vendor/dojo-bootstrap"
},
{
name: "calcite-maps",
location: "https://esri.github.io/calcite-maps/dist/js/dojo"
}
]
};
</script>

<!-- ArcGIS JS 4 -->
<script src="https://js.arcgis.com/4.13/"></script>

<script>
var app;

require([
"esri/Map",
"esri/views/MapView",
"esri/views/SceneView",
"esri/geometry/Point",
"esri/widgets/Search",
"esri/widgets/BasemapGallery",
"esri/core/watchUtils",
"dojo/on",
"dojo/_base/html",
"dojo/query",
// Calcite Maps
"calcite-maps/calcitemaps-v0.8",

// Calcite Maps ArcGIS Support
"calcite-maps/calcitemaps-arcgis-support-v0.8",

// Bootstrap
"bootstrap/Collapse",
"bootstrap/Dropdown",
"bootstrap/Tab",
// Can use @dojo shim for Array.from for IE11
"@dojo/framework/shim/array"
], function(
Map,
MapView,
SceneView,
Point,
Search,
Basemaps,
watchUtils,
on,
html,
query,
CalciteMaps,
CalciteMapsArcGIS
) {
/******************************************************************
*
* App settings
*
******************************************************************/

app = {
center: [-40, 40],
scale: 50000000,
basemap: "streets",
top: 50,
bottom: 0
},
mapView: null,
sceneView: null,
containerMap: "mapViewDiv",
containerScene: "sceneViewDiv",
activeView: null,
searchWidget: null
};

/******************************************************************
*
* Create the map and scene view and ui components
*
******************************************************************/

// Map
const map = new Map({
basemap: app.basemap
});

// 2D view
app.mapView = new MapView({
container: app.containerMap,
map: map,
center: app.center,
scale: app.scale,
ui: {
components: app.uiComponents
}
});

CalciteMapsArcGIS.setPopupPanelSync(app.mapView);

// 3D view
app.sceneView = new SceneView({
container: app.containerScene,
map: map,
center: app.center,
scale: app.scale,
ui: {
components: app.uiComponents
}
});

CalciteMapsArcGIS.setPopupPanelSync(app.sceneView);

// Set the active view to scene
setActiveView(app.mapView);

// Create the search widget and add it to the navbar instead of view
app.searchWidget = new Search(
{
view: app.activeView
},
"searchWidgetDiv"
);

CalciteMapsArcGIS.setSearchExpandEvents(app.searchWidget);

// Create basemap widget
app.basemapWidget = new Basemaps({
view: app.activeView,
container: "basemapPanelDiv"
});

/******************************************************************
*
* Synchronize the view, search and popup
*
******************************************************************/

// Views
function setActiveView(view) {
app.activeView = view;
}

function syncViews(fromView, toView) {
const viewPt = fromView.viewpoint.clone();
fromView.container = null;
if (fromView.type === "3d") {
toView.container = app.containerMap;
} else {
toView.container = app.containerScene;
}
toView.viewpoint = viewPt;
}

// Search Widget
function syncSearch(view) {
app.searchWidget.view = view;
if (app.searchWidget.selectedResult) {
app.searchWidget.search(app.searchWidget.selectedResult.name);
}
});
}

// Tab - toggle between map and scene view
const tabs = Array.from(
document.querySelectorAll(".calcite-navbar li a[data-toggle='tab']")
);
tabs.forEach(function(tab) {
if (event.target.text.indexOf("Map") > -1) {
syncViews(app.sceneView, app.mapView);
setActiveView(app.mapView);
} else {
syncViews(app.mapView, app.sceneView);
setActiveView(app.sceneView);
}
syncSearch(app.activeView);
});
});

/******************************************************************
*
* Apply Calcite Maps CSS classes to change application on the fly
*
* http://github.com/esri/calcite-maps
*
******************************************************************/

const cssSelectorUi = [
document.querySelector(".calcite-navbar"),
document.querySelector(".calcite-panels")
];
const cssSelectorMap = document.querySelector(".calcite-map");

// Theme - light (default) or dark theme
const settingsTheme = document.getElementById("settingsTheme");
const settingsColor = document.getElementById("settingsColor");
const textColor =
event.target.options[event.target.selectedIndex].dataset.textcolor;
const bgColor =
event.target.options[event.target.selectedIndex].dataset.bgcolor;

cssSelectorUi.forEach(function(element) {
element.classList.remove(
"calcite-text-dark",
"calcite-text-light",
"calcite-bg-dark",
"calcite-bg-light",
"calcite-bg-custom"
);
element.classList.remove(
"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"
);
});
settingsColor.value = "";
});

// Color - custom color
const customColor = event.target.value;
const textColor =
event.target.options[event.target.selectedIndex].dataset.textcolor;
const bgColor =
event.target.options[event.target.selectedIndex].dataset.bgcolor;

cssSelectorUi.forEach(function(element) {
element.classList.remove(
"calcite-text-dark",
"calcite-text-light",
"calcite-bg-dark",
"calcite-bg-light",
"calcite-bg-custom"
);
element.classList.remove(
"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"
);
if (!customColor) {
settingsTheme.dispatchEvent(new Event("change"));
}
});
});

// Widgets - light (default) or dark theme
const settingsWidgets = document.getElementById("settingsWidgets");
const theme = event.target.value;
cssSelectorMap.classList.remove(
"calcite-widgets-dark",
"calcite-widgets-light"
);
});

// Layout - top or bottom nav position
const settingsLayout = document.getElementById("settingsLayout");
const layout = event.target.value;
const layoutNav =
event.target.options[event.target.selectedIndex].dataset.nav;

document.body.classList.remove(
"calcite-nav-bottom",
"calcite-nav-top"
);

const nav = document.querySelector("nav");
nav.classList.remove("navbar-fixed-bottom", "navbar-fixed-top");
});

// Set view padding for widgets based on navbar position
// Top
if (layout === "calcite-nav-top") {
top: 50,
bottom: 0
}
};
top: 15,
right: 15,
bottom: 30,
left: 15
}
};
} else {
// Bottom
top: 0,
bottom: 50
}
};
top: 30,
right: 15,
bottom: 15,
left: 15
}
};
}
// Reset popup
if (
app.activeView.popup.visible &&
app.activeView.popup.dockEnabled
) {
app.activeView.popup.visible = false;
app.activeView.popup.visible = true;
}
}

// Create another Map, to be used in the overview "view"
var overviewMap = new Map({
basemap: "topo"
});

// Create the MapView for overview map
var overView = new MapView({
container: "overviewDiv",
map: overviewMap,
constraints: {
rotationEnabled: false
}
});

// Remove the default widgets
overView.ui.components = [];

var extentDiv = document.getElementById("extentDiv");
var ovButton = document.getElementById("ovwButton");

on(ovButton, 'click', function(){
if(html.hasClass(ovButton, "ovwHide")){
html.setAttr(ovButton, 'title', 'Show Map Overview')
html.replaceClass(ovButton, "ovwShow","ovwHide");
html.setStyle(query('.esri-view-root', 'overviewDiv')[0], 'display','none');
html.setStyle(extentDiv, 'display','none');
}else{
html.replaceClass(ovButton, "ovwHide","ovwShow");
html.setAttr(ovButton, 'title', 'Hide Map Overview');
html.setStyle(query('.esri-view-root', 'overviewDiv')[0], 'display','block');
html.setStyle(extentDiv, 'display','block');
}
html.toggleClass("overviewDiv" ,"hide");
});

overView.when(function() {
// Update the overview extent whenever the MapView or SceneView extent changes
app.activeView.watch("extent", updateOverviewExtent);
overView.watch("extent", updateOverviewExtent);

// Update the minimap overview when the main view becomes stationary
watchUtils.when(app.activeView, "stationary", updateOverview);

function updateOverview() {
// Animate the MapView to a zoomed-out scale so we get a nice overview.
// We use the "progress" callback of the goTo promise to update
// the overview extent while animating
overView.goTo({
center: app.activeView.center,
scale:
app.activeView.scale *
2 *
Math.max(
app.activeView.width / overView.width,
app.activeView.height / overView.height
)
});
}

function updateOverviewExtent() {
// Update the overview extent by converting the SceneView extent to the
// MapView screen coordinates and updating the extentDiv position.
var extent = app.activeView.extent;

var bottomLeft = overView.toScreen(
new Point({
x: extent.xmin,
y: extent.ymin,
spatialReference: extent.spatialReference
})
);

var topRight = overView.toScreen(
new Point({
x: extent.xmax,
y: extent.ymax,
spatialReference: extent.spatialReference
})
);

extentDiv.style.top = topRight.y + "px";
extentDiv.style.left = bottomLeft.x + "px";

extentDiv.style.height = bottomLeft.y - topRight.y + "px";
extentDiv.style.width = topRight.x - bottomLeft.x + "px";
}
});

});
</script>
</body>
</html>