AnsweredAssumed Answered

Search widget is not working with directions widget when used in switching view 2D to 3D and vice versa

Question asked by rpbaguio on Jan 1, 2019
Latest reply on Jan 2, 2019 by rpbaguio

Hi everyone!

 

Below is the sample code provided by ESRI from this link Switch view from 2D to 3D | ArcGIS API for JavaScript 4.10. Using the sample code I added two widgets (search and directions widgets) but search widget is not working with directions widget and If I remove the directions widget the search widget is working fine. Is there anyone encountered this kind of issue? How to fix this issue?

 

<!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.10</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.10/esri/css/main.css">
  <script src="https://js.arcgis.com/4.10/"></script>

  <script>
    require([
      "esri/views/MapView",
      "esri/views/SceneView",
      "esri/WebMap",
      "esri/WebScene",
      "esri/widgets/Search",
      "esri/widgets/Directions"
    ], function (MapView, SceneView, WebMap, WebScene, Search, Directions) {
      var switchButton = document.getElementById("switch-btn");

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

      var initialViewParams = {
        zoom: 12,
        center: [-122.43759993450347, 37.772798684981126],
        container: appConfig.container
      };
      var webmap = new WebMap({
        portalItem: { // autocasts as new PortalItem()
          id: "7ee3c8a93f254753a83ac0195757f137"
        }
      });
      var scene = new WebScene({
        portalItem: { // autocasts as new PortalItem()
          id: "4f081bc26af2452b91f36fa66ae586c1"
        }
      });
      // create 2D view and and set active
      appConfig.mapView = createView(initialViewParams, "2d");
      appConfig.mapView.map = webmap;
      appConfig.activeView = appConfig.mapView;

      // create 3D view, won't initialize until container is set
      initialViewParams.container = null;
      initialViewParams.map = scene;
      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";
        var activeViewpoint = appConfig.activeView.viewpoint.clone();

        // 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 = activeViewpoint;
          appConfig.mapView.container = appConfig.container;
          appConfig.activeView = appConfig.mapView;
          switchButton.value = "3D";
        } else {
          appConfig.sceneView.viewpoint = activeViewpoint;
          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);
         
          view.when(function(){
            appConfig.searchWidget = new Search({
              view: view
            });
            view.ui.add(appConfig.searchWidget, "top-right");
            appConfig.directionsWidget = new Directions({
              view: view
            });
            view.ui.add(appConfig.directionsWidget, "top-right");
          });
         
          return view;
        } else {
          view = new SceneView(params);
         
          view.when(function(){
            appConfig.searchWidget = new Search({
              view: view
            });
            view.ui.add(appConfig.searchWidget, "top-right");
            appConfig.directionsWidget = new Directions({
              view: view
            });
            view.ui.add(appConfig.directionsWidget, "top-right");
          });
         
        }
        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>

Outcomes