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

Question

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

MattDriscoll · Answer

This should work to fix it as well... var widget = new Search({ view: view }); widget._set("allSources", widget.allSources.clone());‍‍‍‍

RaymondBaguio · Answer

Hi Undral Batsukh,

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

UndralBatsukh · Answer

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 });‍‍‍‍ AlixVezina_0-1627576223316.png