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

RaymondBaguio — Sat, 11 Dec 2021 13:41:21 GMT

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

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

RobertScheitlin__GISP — Wed, 02 Jan 2019 14:07:55 GMT

Raymond,

Have you contacted esri tech support about this? It definitely fells like a bug.

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

RaymondBaguio — Wed, 02 Jan 2019 15:28:02 GMT

Hi Robert,

Thank you for your reply. Haven't contacted ESRI support yet and don't know how to contact them because I don't have a paid subscription.

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

RobertScheitlin__GISP — Wed, 02 Jan 2019 15:56:58 GMT

OK. Reporting bugs like this to tech support is limited to customers under maintenance. Maybe they will see this thread.

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

UndralBatsukh — Sat, 11 Dec 2021 13:41:24 GMT

Hi there,

I am able to reproduce the issue. The issue is that Search widget is not zooming to its result once the result is located. We will fix the issue in a future release.

In meantime, you can use search.goToOverride or you can use the Search.search-complete event.

You can do something like:

searchWidget.on("search-complete", function(event){
 console.log("Results of the search: ", event);
 view.extent = event.results[0].results[0].extent
});‍‍‍‍

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

RaymondBaguio — Thu, 03 Jan 2019 03:25:11 GMT

Hi Undral Batsukh,

Thank you. I'll try this out and let you know if it works.

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

MattDriscoll — Sat, 11 Dec 2021 13:41:27 GMT

This should work to fix it as well...

var widget = new Search({
  view: view
});
widget._set("allSources", widget.allSources.clone());‍‍‍‍

topic Re: Search widget is not working with directions widget when used in switching view 2D to 3D and vice versa in ArcGIS JavaScript Maps SDK Questions

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

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

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

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

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

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

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