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

Question

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

ArcGIS API for JavaScript Sandbox

3.x with minimizer

ArcGIS API for JavaScript Sandbox

Please help me to implement the above 3.x like Overview map widget in 4.x

RobertScheitlin__GISP · Accepted Answer

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> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍