Community

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

1215
2
Jump to solution
10-28-2019 01:50 PM
ImtiyazPasha
by
Occasional Contributor
‎10-28-2019 01:50 PM

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

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎10-28-2019 04:43 PM

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

View solution in original post

2 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎10-28-2019 04:43 PM

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
ImtiyazPasha
by
Occasional Contributor
‎10-29-2019 03:39 AM

Robert,

Thanks a lot.

Below is my implementation

<!DOCTYPE html>
<html>
<head>
<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 -->
<link
rel="stylesheet"
href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.8.css"
/>

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

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

<style>
html,
body {
margin: 0;
padding: 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>
</head>

<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"
>
<!-- Menu -->
<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 class="sr-only">Toggle dropdown menu</span> <span></span>
<span></span> <span></span> <span></span>
</div>
</a>
<ul class="dropdown-menu">
<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="sceneTab" class="tab-pane fade" role="tabpanel">
<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 id="headingBasemaps" class="panel-heading" role="tab">
<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"
aria-labelledby="headingBasemaps"
>
<div class="panel-body"><div id="basemapPanelDiv"></div></div>
</div>
</div>

<!-- Panel Settings -->

<div id="panelSettings" class="panel panel-map collapse">
<div id="headingSettings" class="panel-heading">
<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"
aria-labelledby="headingSettings"
>
<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",
viewPadding: {
top: 50,
bottom: 0
},
uiComponents: ["zoom", "compass", "attribution"],
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,
padding: app.viewPadding,
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,
padding: app.viewPadding,
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.padding = app.viewPadding;
toView.viewpoint = viewPt;
}

// Search Widget
function syncSearch(view) {
watchUtils.whenTrueOnce(view, "ready", function() {
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) {
tab.addEventListener("click", function(event) {
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
*
* For more information about the CSS styles or Sass build visit:
* 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");
settingsTheme.addEventListener("change", function(event) {
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.add(textColor, bgColor);
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"
);
element.classList.add(bgColor);
});
settingsColor.value = "";
});

// Color - custom color
settingsColor.addEventListener("change", function(event) {
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.add(textColor, bgColor);
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"
);
element.classList.add(customColor);
if (!customColor) {
settingsTheme.dispatchEvent(new Event("change"));
}
});
});

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

// Layout - top or bottom nav position
const settingsLayout = document.getElementById("settingsLayout");
settingsLayout.addEventListener("change", function(event) {
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"
);
document.body.classList.add(layout);

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

// Set view padding for widgets based on navbar position
function setViewPadding(layout) {
let padding, uiPadding;
// Top
if (layout === "calcite-nav-top") {
padding = {
padding: {
top: 50,
bottom: 0
}
};
uiPadding = {
padding: {
top: 15,
right: 15,
bottom: 30,
left: 15
}
};
} else {
// Bottom
padding = {
padding: {
top: 0,
bottom: 50
}
};
uiPadding = {
padding: {
top: 30,
right: 15,
bottom: 15,
left: 15
}
};
}
app.mapView.set(padding);
app.mapView.ui.set(uiPadding);
app.sceneView.set(padding);
app.sceneView.ui.set(uiPadding);
// 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>

0 Kudos