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.

RobertScheitlin__GISP · ‎02-07-2018

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.

TubaKumbara · ‎02-07-2018

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?

TubaKumbara · ‎02-07-2018

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.

RobertScheitlin__GISP · ‎02-07-2018

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

ReneRubalcava · ‎02-09-2018

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.

MikaKoskimäki · ‎02-16-2018

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

RobertScheitlin__GISP · ‎02-16-2018

Mika,

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

TubaKumbara · ‎02-27-2018

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.

RobertScheitlin__GISP · ‎02-27-2018

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.