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

TubaKumbara · ‎02-07-2018

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.

MetinGenç · ‎02-27-2018

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>

RobertScheitlin__GISP · ‎02-27-2018

What browser are you using?

MetinGenç · ‎02-27-2018

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

RobertScheitlin__GISP · ‎02-27-2018

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

MetinGenç · ‎02-27-2018

Thanks. It's worked on chrome and explorer.

MetinGenç · ‎02-27-2018

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'

MetinGenç · ‎02-28-2018

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>

TubaKumbara · ‎02-20-2018

Do you have any solution about this issue?