Hey everyone, I am using the search widget with custom source to allow users to look up different parts of the 3D diagram. Elevation offset has been applied onto the diagram via ArcGIS Online portal to be higher than it's default(underground) location. Upon completion of the search, it would still automatically redirect the user to it's default(underground) location as opposed to the elevated position. This is what I have tried so far, var map = new WebScene ( { portalItem : { id : "xyz" } } ) ; var view = new SceneView ( { container : "viewDiv" , map : map } ) ; var searchWidget = new Search ( { view : view , autoNavigate : false , //have tried with and without, still doesn't work autoSelect : false , //have tried with and without, still doesn't work sources : [ { name : "Stations" , layer : new FeatureLayer ( { url : 'xyz.com/server/rest/services/Hosted/Stations/FeatureServer/0' , outFields : [ "assetID" ] } ) , searchFields : [ "assetID" ] , displayField : "assetID" } ] } ) ; view . ui . add ( searchWidget , "top-right" ) ; searchWidget . on ( "search-complete" , function ( event ) { event . results [ 0 ] . results [ 0 ] . feature . sourceLayer . queryFeatures ( { objectIds : [ event . results [ 0 ] . results [ 0 ] . feature . attributes . objectid_1 ] , outFields : [ "*" ] , where : "1=1" } ) . then ( functions ( res ) { view . goTo ( res . features ) } ) ; } ) ; With the given code above, the map doesn't move at all after selecting the search result. I have tried checking on "select-result" as well. Am I doing something wrong or is there any other way I could redirect the search result to the appropriate 3D diagram and its location? Would greatly appreciate any help I could get. Thanks in advance!

I have the feeling there's something specific about the service. Just to make sure: is this a point geometry FeatureLayer with ObjectSymbol3DLayer symbol? I don't understand why you would get an error about passing in a multipatch geometry...

Hi Raluca, You are right about the layers not being loaded. The search camera pans to other parts only when I zoom out which loads every part of the diagram. Is there a way to counter this without having to zoom out every time before I search? This error appears regardless of whether the camera panning works: [esri.core.Accessor] Accessor#set 'esriGeometryMultiPatch' is not a valid value for this property, only the following values are valid: 'point', 'multipoint', 'polyline', 'polygon', 'extent', 'mesh' Here's my updated code: view . when ( function ( ) { var stationsLayer = view . map . layers . find ( layer = > layer . title === "subway" ) . layers . find ( layer = > layer . title === "stations" ) ; var searchWidget = new Search ( { view : view , sources : [ { name : "Stations" , layer : stationsLayer , searchFields : [ "assetID" ] , displayField : "assetID" } ] } ) ; view . ui . add ( searchWidget , "top-right" ) ; } ) ; This is all I have now in regards to the search function. As for the search widget not showing suggestions, is there a way to go about it?

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

ArcGIS JavaScript API: Redirecting goTo for search widget for 3D diagram

JamesHolden

Hey everyone, I am using the search widget with custom source to allow users to look up different parts of the 3D diagram. Elevation offset has been applied onto the diagram via ArcGIS Online portal to be higher than it's default(underground) location.

Upon completion of the search, it would still automatically redirect the user to it's default(underground) location as opposed to the elevated position.

This is what I have tried so far,

    <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">WebScene</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
            id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"xyz"</SPAN>
        <SPAN class="punctuation token">}</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

    <SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SceneView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
        map<SPAN class="punctuation token">:</SPAN> map
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>


    <SPAN class="keyword token">var</SPAN> searchWidget <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Search</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
        autoNavigate<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">//have tried with and without, still doesn't work</SPAN>
        autoSelect<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">//have tried with and without, still doesn't work</SPAN>
        sources<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
            name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Stations"</SPAN><SPAN class="punctuation token">,</SPAN>
            layer<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'xyz.com/server/rest/services/Hosted/Stations/FeatureServer/0'</SPAN><SPAN class="punctuation token">,</SPAN>
                outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"assetID"</SPAN><SPAN class="punctuation token">]</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
            searchFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"assetID"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
            displayField<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"assetID"</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>searchWidget<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-right"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>


    searchWidget<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"search-complete"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        event<SPAN class="punctuation token">.</SPAN>results<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>results<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>feature<SPAN class="punctuation token">.</SPAN>sourceLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN>
            <SPAN class="punctuation token">{</SPAN>
                objectIds<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>event<SPAN class="punctuation token">.</SPAN>results<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>results<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>objectid_1<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                where<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"1=1"</SPAN>
            <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">functions</SPAN><SPAN class="punctuation token">(</SPAN>res<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">goTo</SPAN><SPAN class="punctuation token">(</SPAN>res<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">)</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

<SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"></SPAN>With the given code above, the map doesn't move at all after selecting the search result. I have tried checking on "select-result" as well.

Am I doing something wrong or is there any other way I could redirect the search result to the appropriate 3D diagram and its location? Would greatly appreciate any help I could get. Thanks in advance!

Find more posts tagged with

Accepted answers

All comments

JamesHolden

Hi Raluca,

You are right about the layers not being loaded. The search camera pans to other parts only when I zoom out which loads every part of the diagram. Is there a way to counter this without having to zoom out every time before I search?

This error appears regardless of whether the camera panning works:

[esri.core.Accessor] Accessor#set 'esriGeometryMultiPatch' is not a valid value for this property, only the following values are valid: 'point', 'multipoint', 'polyline', 'polygon', 'extent', 'mesh'<SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

Here's my updated code:

view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
   <SPAN class="keyword token">var</SPAN> stationsLayer <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>layers<SPAN class="punctuation token">.</SPAN><SPAN class="token function">find</SPAN><SPAN class="punctuation token">(</SPAN>layer <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> layer<SPAN class="punctuation token">.</SPAN>title <SPAN class="operator token">===</SPAN> <SPAN class="string token">"subway"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>layers<SPAN class="punctuation token">.</SPAN><SPAN class="token function">find</SPAN><SPAN class="punctuation token">(</SPAN>layer <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> layer<SPAN class="punctuation token">.</SPAN>title <SPAN class="operator token">===</SPAN> <SPAN class="string token">"stations"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
   
   <SPAN class="keyword token">var</SPAN> searchWidget <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Search</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
      view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
      sources<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
         name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Stations"</SPAN><SPAN class="punctuation token">,</SPAN>
         layer<SPAN class="punctuation token">:</SPAN> stationsLayer<SPAN class="punctuation token">,</SPAN>
         searchFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"assetID"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
         displayField<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"assetID"</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN>
   <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
   view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>searchWidget<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-right"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

This is all I have now in regards to the search function.

As for the search widget not showing suggestions, is there a way to go about it?

RalucaNicola1

Hey James,

I think I'll need a bit more help to figure out what's going on. Using layers.find() is just a way of getting the layer from your webscene, so that shouldn't really cause any issues. Because you wrote "at times" it sounds like there might be a racing condition and the layer might not be loaded yet when the layers.find() gets run? Do you have the problem that the camera doesn't pan for the same features or does it randomly fail for different features? Do you get any console errors? Are you still implementing the view.goTo() separately on `search-complete`? If you could post an updated version of your snippet that would help a lot.

Thanks!

JamesHolden

Hello Raluca,

Sorry for the late response.

I went for the "layers.find()" method that you mentioned. It works, but at times, the camera doesn't pan to the searched diagram, which causes the popup to appear randomly on the screen, and the search widget doesn't show suggestions as they type.

From my guess, using layers.find() means that there isn't a feature layer for the search widget to derive the suggestions from.

Are there any ways I could counter the issues I have faced? Thank you so much for your help thus far

RalucaNicola1

So I understand that you want to search for a feature in a layer that is in your webscene and once the search widget finds it, you want to zoom to it and display more information. The features have 3D volumetric symbols and are offset from the ground. If this is correct, then here are some things are to keep in mind: the service doesn't know anything about your symbology and the offset that you apply. So when you query the service, then you will only get back the geometry and no offset (in your case I think you have to pass returnGeometry: true to the query - https://developers.arcgis.com/javascript/latest/api-reference/esri-tasks-support-Query.html#returnGeometry otherwise you don't get the geometry).

So my solution would be to pass the layer that you visualize in your view directly to the SearchWidget like this:

view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="keyword token">var</SPAN> treesLayer <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>layers<SPAN class="punctuation token">.</SPAN><SPAN class="token function">find</SPAN><SPAN class="punctuation token">(</SPAN>layer <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> layer<SPAN class="punctuation token">.</SPAN>title <SPAN class="operator token">===</SPAN> <SPAN class="string token">"Landscape Trees"</SPAN><SPAN class="punctuation token">)</SPAN>

  <SPAN class="keyword token">var</SPAN> searchWidget <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Search</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
    view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
    autoNavigate<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">//have tried with and without, still doesn't work</SPAN>
    autoSelect<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">//have tried with and without, still doesn't work</SPAN>
    sources<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
      name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Trees"</SPAN><SPAN class="punctuation token">,</SPAN>
      layer<SPAN class="punctuation token">:</SPAN> treesLayer<SPAN class="punctuation token">,</SPAN>
      searchFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"Tree_ID"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
      displayField<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Tree_ID"</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN>
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>searchWidget<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"bottom-right"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Then it will automatically zoom to it and display a popup. Here's an example with some data from one of our samples: https://codepen.io/ralucanicola/pen/eqebWX?editors=1000

Let me know if this doesn't work for you and we can brainstorm for some other solution.

JamesHolden

Hi Robert,

My intention is the opposite of what you have mentioned.

Originally before I made any code modifications, the default outcome after completing a search redirects the user underground as opposed to the elevated offset that was applied through ArcGIS Online. This causes the camera to point towards the ground while the 3D diagram is elevated above it. (As shown in the sketch below)

Sketch

After trying out the code to check on "search-complete" and "select-result", the camera doesn't move at all after completing the search.

I was thinking if there is a way to redirect the camera towards the floating 3D diagram as opposed to the ground?

RobertScheitlin__GISP

James,

So when a point does not contain a z value its z is interpolated from the scenes surface (offset and all). So because you have applied an offset to the scene your point will Not goTo the non offset elevation.

JamesHolden

Hi Robert,

The query result's hasZ value is false.

They both share the same Spatial Reference wikid(102100).

I have an identical query for configuring the Zoom To button for the popups and goTo is able to work even with a false hasZ value.

My guess is that something might be interfering with the goTo function on "search-complete" and "select-result" as the map doesn't redirect even after selecting a result.

RobertScheitlin__GISP

James,

Does the query result has a z value? Is the result in the same Spatial Reference as the view?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.