topic Re: Losing ui widgets after switch 2d/3D (maquette widget and more) in ArcGIS JavaScript Maps SDK Questions

Losing ui widgets after switch 2d/3D (maquette widget and more)

TubaKumbara — Wed, 07 Feb 2018 14:09:17 GMT

Hello.

My application was shown 2D and 3D map on different divs until today.

Today i tried to show sceneview and mapview in same div . and tried code which on below link

Notice: My application starts with 3D.

maquette widget generates error message when i try to change view from 3D to 2D and all of my ui widgets being disappear. But i never used maquette widget, maybe other widgets can use this. I have no idea.

0x800a139e - Javascript runtime error: NotFoundError

----

Problem -2

Adding Clock widget to sceneview but clock doesn't appear, Clockdiv is visible but has no clock inside. Just an empty div.

Clock widget was working without any error until change my code at today

-------

thanks inadvance.

Re: Losing ui widgets after switch 2d/3D (maquette widget and more)

RobertScheitlin__GISP — Wed, 07 Feb 2018 14:22:45 GMT

Tuba,

You have several confusing things here in your post.

maquette widget (I am not sure what this widget is)
clock widget (again I am not sure what this widget is).

I don't see either of those widgets listed in the the API.

I sounds like you have issues in your code but you did supply any code only a working esri sample.

Re: Losing ui widgets after switch 2d/3D (maquette widget and more)

TubaKumbara — Wed, 07 Feb 2018 14:54:36 GMT

Thanks for the answer.

Maquette is not 3th party JS file. Location is 4.6/esri/widgets/libs/maquette/maquette.js

I never user this widget but as i said getting error message while changing view as mapview.

But i found this error occurs while changing view when layerlist added into views (sceneview and mapview)

my code below.

appconfig.activeview.ui.add(mylayerlist, "top-right")

this code adds layerlist widget to activeview

have i add one layerlist to different views?

Re: Losing ui widgets after switch 2d/3D (maquette widget and more)

TubaKumbara — Wed, 07 Feb 2018 14:59:57 GMT

and ahother problem here

why ui.widgets disappearing after view change?

i will add widgets always in switchView function?

scenarioView has 3 widgets, application started and switched to 2D (has 2 widgets), again switched to 3D has no widgets.

Re: Losing ui widgets after switch 2d/3D (maquette widget and more)

RobertScheitlin__GISP — Fri, 10 Dec 2021 22:40:59 GMT

Tuba,

Again I can not tell what your issue is when you provide so little of your code. Here is a sample of how I add a LayerList widget to the MapView in the view switcher sample:

<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Switch view from 2D to 3D - 4.6</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #infoDiv {
      position: absolute;
      top: 15px;
      left: 60px;
    }

    #infoDiv input {
      border: none;
      box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
  <script src="https://js.arcgis.com/4.6/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/views/SceneView",
      "esri/widgets/LayerList",
      "dojo/domReady!"
    ], function(Map, MapView, SceneView, LayerList) {

      var switchButton = document.getElementById("switch-btn");

      var appConfig = {
        mapView: null,
        sceneView: null,
        activeView: null,
        container: "viewDiv" // use same container for views
      };

      var map = new Map({
        basemap: "streets",
        ground: "world-elevation"
      });

      var initialViewParams = {
        map: map,
        zoom: 4,
        center: [15, 65],
        container: appConfig.container
      };

      // create 2D view and and set active
      appConfig.mapView = createView(initialViewParams, "2d");
      appConfig.activeView = appConfig.mapView;
      var layerList = new LayerList({
        view: appConfig.activeView
      });
      // Adds widget below other elements in the top left corner of the view
      appConfig.activeView.ui.add(layerList, {
        position: "top-left"
      });

      // create 3D view, won't initialize until container is set
      initialViewParams.container = null;
      appConfig.sceneView = createView(initialViewParams, "3d");

      // switch the view between 2D and 3D each time the button is clicked
      switchButton.addEventListener("click", function() {
        switchView();
      });

      // Switches the view from 2D to 3D and vice versa
      function switchView() {
        var is3D = appConfig.activeView.type === "3d";

        // remove the reference to the container for the previous view
        appConfig.activeView.container = null;

        if (is3D) {
          // if the input view is a SceneView, set the viewpoint on the
          // mapView instance. Set the container on the mapView and flag
          // it as the active view
          appConfig.mapView.viewpoint = appConfig.activeView.viewpoint.clone();
          appConfig.mapView.container = appConfig.container;
          appConfig.activeView = appConfig.mapView;
          switchButton.value = "3D";
        } else {
          appConfig.sceneView.viewpoint = appConfig.activeView.viewpoint.clone();
          appConfig.sceneView.container = appConfig.container;
          appConfig.activeView = appConfig.sceneView;
          switchButton.value = "2D";
        }
      }

      // convenience function for creating a 2D or 3D view
      function createView(params, type) {
        var view;
        var is2D = type === "2d";
        if (is2D) {
          view = new MapView(params);
          return view;
        } else {
          view = new SceneView(params);
        }
        return view;
      }

    });
  </script>

</head>

<body>
  <div id="viewDiv"></div>
  <div id="infoDiv">
    <input class="esri-component esri-widget-button esri-widget esri-interactive" type="button"
      id="switch-btn" value="3D">
  </div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Losing ui widgets after switch 2d/3D (maquette widget and more)

ReneRubalcava — Fri, 09 Feb 2018 23:29:03 GMT

In 4x, we use Maquette to build all the widgets. I'm not sure how you are building your app, but it could be that by switching Views, you attached your widgets to one View, but the other View does not have them.

Roberts sample should put you on the right path to what you're trying to do.

Re: Losing ui widgets after switch 2d/3D (maquette widget and more)

MikaKoskimäki — Fri, 16 Feb 2018 12:09:11 GMT

Hi Rene,

I noticed that both Robert's and Tuba's example really loses all widgets after first toggling to 3d, then back to 2d.

I have been able to reproduce problem only with IE11 (Windows 10). Edge, Chrome and others seem to be working fine.

Unfortunately my application needs to be working also with IE11. Workaround seems to be always recreate the view which is not nice.

Mika

Re: Losing ui widgets after switch 2d/3D (maquette widget and more)

RobertScheitlin__GISP — Fri, 16 Feb 2018 14:55:54 GMT

Mika,

OK, I see that issue as well using IE 11 on Windows 7 machine.

Re: Losing ui widgets after switch 2d/3D (maquette widget and more)

TubaKumbara — Wed, 21 Feb 2018 06:09:58 GMT

Do you have any solution about this issue?

Re: Losing ui widgets after switch 2d/3D (maquette widget and more)

TubaKumbara — Tue, 27 Feb 2018 14:29:25 GMT

I tried any still trying somethings for solve this problem but nothing found yet. Edge and chrome has this problem too. We waiting a fix. This is urgent. Thanks.

Re: Losing ui widgets after switch 2d/3D (maquette widget and more)

RobertScheitlin__GISP — Tue, 27 Feb 2018 14:43:10 GMT

Tuba,

I absolutely do not see this issue in chrome. This issue is unlikely to get resolved unless a bug is submitted to tech support and then I may be addressed in the next release of the API. You will not get an immediate resolution on this.

Re: Losing ui widgets after switch 2d/3D (maquette widget and more)

MetinGenç — Tue, 27 Feb 2018 18:47:20 GMT

Hi Robert. Same issue here. This is my sample code. Alerting before activating switch button widget. Please check.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Switch view from 2D to 3D - 4.6</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#infoDiv {
position: absolute;
top: 15px;
left: 60px;
}

</style>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery-ui.js"></script>

<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
<script src="https://js.arcgis.com/4.6/"></script>
<script>
require([
"esri/views/2d/draw/Draw",
"esri/Map",
"esri/views/MapView",
"esri/views/SceneView",
"esri/Graphic",
"esri/geometry/Polygon",
"esri/geometry/geometryEngine",
"dojo/domReady!"
], function(Draw, Map, MapView, SceneView, Graphic, Polygon,
geometryEngine) {
var switchButton = document.getElementById("switch-btn");
var appConfig = {
mapView: null,
sceneView: null,
activeView: null,
container: "viewDiv" // use same container for views
};
var map = new Map({
basemap: "streets",
ground: "world-elevation",
});
var initialViewParams = {
map: map,
zoom: 4,
center: [15, 65],
container: appConfig.container
};
// create 3D view and and set active
appConfig.sceneView = createView(initialViewParams, "3d");
appConfig.activeView = appConfig.sceneView;

// create 2D view, won't initialize until container is set
initialViewParams.container = null;
appConfig.mapView = createView(initialViewParams, "2d");
// switch the view between 2D and 3D each time the button is clicked
switchButton.addEventListener("click", function() {
switchView();
});

activateWidgets();
// Switches the view from 2D to 3D and vice versa
function switchView() {
var is3D = appConfig.activeView.type === "3d";
// remove the reference to the container for the previous view
appConfig.activeView.container = null;
if (is3D) {
// if the input view is a SceneView, set the viewpoint on the
// mapView instance. Set the container on the mapView and flag
// it as the active view
appConfig.mapView.viewpoint = appConfig.activeView.viewpoint.clone();
appConfig.mapView.container = appConfig.container;
appConfig.activeView = appConfig.mapView;
switchButton.value = "3D";
} else {
appConfig.sceneView.viewpoint = appConfig.activeView.viewpoint.clone();
appConfig.sceneView.container = appConfig.container;
appConfig.activeView = appConfig.sceneView;
switchButton.value = "2D";
}

activateWidgets();

}
// convenience function for creating a 2D or 3D view
function createView(params, type) {
var view;
var is2D = type === "2d";
if (is2D) {
view = new MapView(params);
return view;
} else {
view = new SceneView(params);
}
return view;
}

function activateWidgets(){
alert("activating switch button");
appConfig.activeView.ui.add("switch-btn", "top-left");
appConfig.activeView.ui.remove("attribution");
}

});

</script>
</head>

<body>
<input class="esri-component esri-widget-button esri-widget esri-interactive" type="button"
id="switch-btn" value="2D">
<div id="viewDiv"></div>

</body>
</html>

Re: Losing ui widgets after switch 2d/3D (maquette widget and more)

RobertScheitlin__GISP — Tue, 27 Feb 2018 19:01:01 GMT

What browser are you using?

Re: Losing ui widgets after switch 2d/3D (maquette widget and more)

MetinGenç — Tue, 27 Feb 2018 19:14:43 GMT

Chrome But Internet Explorer has same error. Both of latest versions

Re: Losing ui widgets after switch 2d/3D (maquette widget and more)

RobertScheitlin__GISP — Fri, 10 Dec 2021 22:41:03 GMT

Metin,

Here is your code fix for Chrome.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Switch view from 2D to 3D - 4.6</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #infoDiv {
      position: absolute;
      top: 15px;
      left: 60px;
    }
  </style>
  <!-- <link rel="stylesheet" href="css/jquery-ui.css">
  <script src="js/jquery-1.12.4.js"></script>
  <script src="js/jquery-ui.js"></script> -->

  <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
  <script src="https://js.arcgis.com/4.6/"></script>

  <script>
    require([
      "esri/views/2d/draw/Draw",
      "esri/Map",
      "esri/views/MapView",
      "esri/views/SceneView",
      "esri/Graphic",
      "esri/geometry/Polygon",
      "esri/geometry/geometryEngine",
      "dojo/domReady!"
    ], function(Draw, Map, MapView, SceneView, Graphic, Polygon,
      geometryEngine) {

      var switchButton = document.getElementById("switch-btn");

      var appConfig = {
        mapView: null,
        sceneView: null,
        activeView: null,
        container: "viewDiv" // use same container for views
      };

      var map = new Map({
        basemap: "streets",
        ground: "world-elevation",
      });

      var initialViewParams = {
        map: map,
        zoom: 4,
        center: [15, 65],
        container: appConfig.container
      };

      // create 3D view and and set active
      appConfig.sceneView = createView(initialViewParams, "3d");
      appConfig.activeView = appConfig.sceneView;

      // create 2D view, won't initialize until container is set
      initialViewParams.container = null;
      appConfig.mapView = createView(initialViewParams, "2d");

      // switch the view between 2D and 3D each time the button is clicked
      switchButton.addEventListener("click", function() {
        switchView();
      });

      activateWidgets();

      // Switches the view from 2D to 3D and vice versa
      function switchView() {
        var is3D = appConfig.activeView.type === "3d";
        // remove the reference to the container for the previous view
        appConfig.activeView.container = null;
        if (is3D) {
          // if the input view is a SceneView, set the viewpoint on the
          // mapView instance. Set the container on the mapView and flag
          // it as the active view
          appConfig.mapView.viewpoint = appConfig.activeView.viewpoint.clone();
          appConfig.mapView.container = appConfig.container;
          appConfig.activeView = appConfig.mapView;
          switchButton.value = "3D";
        } else {
          appConfig.sceneView.viewpoint = appConfig.activeView.viewpoint.clone();
          appConfig.sceneView.container = appConfig.container;
          appConfig.activeView = appConfig.sceneView;
          switchButton.value = "2D";
        }
        activateWidgets();
      }

      // convenience function for creating a 2D or 3D view
      function createView(params, type) {
        var view;
        var is2D = type === "2d";
        if (is2D) {
          view = new MapView(params);
          return view;
        } else {
          view = new SceneView(params);
        }
        return view;
      }

      function activateWidgets() {
        //alert("activating switch button");
        appConfig.activeView.then(function(){
          appConfig.activeView.ui.add(switchButton, "top-left");
          appConfig.activeView.ui.remove("attribution");
        });

      }
    });
  </script>
</head>
<body>
  <input class="esri-component esri-widget-button esri-widget esri-interactive" type="button" id="switch-btn" value="2D">
  <div id="viewDiv"></div>
</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Losing ui widgets after switch 2d/3D (maquette widget and more)

MetinGenç — Wed, 28 Feb 2018 05:08:02 GMT

Thanks. It's worked on chrome and explorer.

Re: Losing ui widgets after switch 2d/3D (maquette widget and more)

MetinGenç — Wed, 28 Feb 2018 05:51:35 GMT

Thanks for code Robert but i'm still getting error message when switch between 2d and 3D.

appConfig.activeView.ui.add(switchButton, "top-left");

Error : TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

Re: Losing ui widgets after switch 2d/3D (maquette widget and more)

MetinGenç — Wed, 28 Feb 2018 09:00:07 GMT

Hi again Robert. Please open JSFIDDLE.NET (With Internet Explorer) and put this code and run. you will see Switch button is disappearing after first toggling to 3d, then back to 2d.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Switch view from 2D to 3D - 4.6</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#infoDiv {
position: absolute;
top: 15px;
left: 60px;
}
</style>

<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
<script src="https://js.arcgis.com/4.6/"></script>
<script>
require([
"esri/views/2d/draw/Draw",
"esri/Map",
"esri/views/MapView",
"esri/views/SceneView",
"esri/Graphic",
"esri/geometry/Polygon",
"esri/geometry/geometryEngine",
"dojo/domReady!"
], function(Draw, Map, MapView, SceneView, Graphic, Polygon,
geometryEngine) {
var switchButton = document.getElementById("switch-btn");
var appConfig = {
mapView: null,
sceneView: null,
activeView: null,
container: "viewDiv" // use same container for views
};
var map = new Map({
basemap: "streets",
ground: "world-elevation",
});
var initialViewParams = {
map: map,
zoom: 4,
center: [15, 65],
container: appConfig.container
};
// create 3D view and and set active
appConfig.sceneView = createView(initialViewParams, "3d");
appConfig.activeView = appConfig.sceneView;
// create 2D view, won't initialize until container is set
initialViewParams.container = null;
appConfig.mapView = createView(initialViewParams, "2d");
// switch the view between 2D and 3D each time the button is clicked
switchButton.addEventListener("click", function() {
switchView();
});
activateWidgets();
// Switches the view from 2D to 3D and vice versa
function switchView() {
var is3D = appConfig.activeView.type === "3d";
// remove the reference to the container for the previous view
appConfig.activeView.container = null;
if (is3D) {
// if the input view is a SceneView, set the viewpoint on the
// mapView instance. Set the container on the mapView and flag
// it as the active view
appConfig.mapView.viewpoint = appConfig.activeView.viewpoint.clone();
appConfig.mapView.container = appConfig.container;
appConfig.activeView = appConfig.mapView;
switchButton.value = "3D";
} else {
appConfig.sceneView.viewpoint = appConfig.activeView.viewpoint.clone();
appConfig.sceneView.container = appConfig.container;
appConfig.activeView = appConfig.sceneView;
switchButton.value = "2D";
}
activateWidgets();
}
// convenience function for creating a 2D or 3D view
function createView(params, type) {
var view;
var is2D = type === "2d";
if (is2D) {
view = new MapView(params);
return view;
} else {
view = new SceneView(params);
}
return view;
}
function activateWidgets() {
//alert("activating switch button");
appConfig.activeView.then(function(){
appConfig.activeView.ui.add(switchButton, "top-left");
appConfig.activeView.ui.remove("attribution");
});
}
});
</script>
</head>
<body>
<input class="esri-component esri-widget-button esri-widget esri-interactive" type="button" id="switch-btn" value="2D">
<div id="viewDiv"></div>
</body>
</html>