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

557
6
01-01-2019 11:46 PM
RaymondBaguio
New Contributor

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>
0 Kudos
6 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Raymond,

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

0 Kudos
RaymondBaguio
New Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

UndralBatsukh
Esri Regular Contributor

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
});
RaymondBaguio
New Contributor

Hi Undral Batsukh,

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

0 Kudos
MattDriscoll
Esri Contributor

This should work to fix it as well...

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