topic search widget+4.6 in ArcGIS JavaScript Maps SDK Questions

search widget+4.6

anjelinaponkerat — Fri, 10 Dec 2021 22:34:50 GMT

I,m using search widget in 3d view by 4.6 version , but I can not use my feature service!! why? this is my sample:

      var search = new Search({
        sources: [{
          featureLayer: new FeatureLayer("https://services.arcgis.com/b6gLrKHqgkQb393u/arcgis/rest/services/TaxParcelQuery/FeatureServer/0", {
            outFields: ["*"],
            infoTemplate: new InfoTemplate("Parcels", "Owner name: ${OWNERNME1}</br>Parcel ID: ${PARCELID}</br>Site address: ${SITEADDRESS}")
          }),
          outFields: ["OWNERNME1","PARCELID","SITEADDRESS"],
          displayField: "OWNERNME1",
          suggestionTemplate: "${PARCELID}: ${SITEADDRESS}",
          name: "Parcels",
          placeholder: "example: Shawn Smith",
          enableSuggestions: true
      }],
        view: view
      }, "search");


      search.startup();

Re: search widget+4.6

RobertScheitlin__GISP — Fri, 10 Dec 2021 22:34:53 GMT

Anjelina,

Attention to detail is going to cause you issues all the time. There is No "InfoTemplate" in the 4.x API it is now PopupTemplate (line 5).

      var search = new Search({
        sources: [{
          featureLayer: new FeatureLayer("https://services.arcgis.com/b6gLrKHqgkQb393u/arcgis/rest/services/TaxParcelQuery/FeatureServer/0", {
            outFields: ["*"],
            popupTemplate: new PopupTemplate("Parcels", "Owner name: ${OWNERNME1}</br>Parcel ID: ${PARCELID}</br>Site address: ${SITEADDRESS}")
          }),
          outFields: ["OWNERNME1","PARCELID","SITEADDRESS"],
          displayField: "OWNERNME1",
          suggestionTemplate: "${PARCELID}: ${SITEADDRESS}",
          name: "Parcels",
          placeholder: "example: Shawn Smith",
          enableSuggestions: true
      }],
        view: view
      }, "search");


      search.startup();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: search widget+4.6

anjelinaponkerat — Sun, 31 Dec 2017 16:16:33 GMT

I changed it but didnt work!!:

var search = new Search({
sources: [{
featureLayer: new FeatureLayer("https://services.arcgis.com/b6gLrKHqgkQb393u/arcgis/rest/services/TaxParcelQuery/FeatureServer/0", {
outFields: ["*"],

}),
outFields: ["OWNERNME1","PARCELID","SITEADDRESS"],
displayField: "OWNERNME1",
name: "Parcels",
placeholder: "example: Shawn Smith",
enableSuggestions: true
}],
view: view
}, "search");

search.startup();

Re: search widget+4.6

RobertScheitlin__GISP — Fri, 10 Dec 2021 22:34:55 GMT

Anjelina,

Must be something else in your code then because this works fine for me:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Intro to SceneView - Create a 3D map - 4.6</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
  <script src="https://js.arcgis.com/4.6/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/SceneView",
      "esri/layers/FeatureLayer",
      "esri/widgets/Search",
      "dojo/domReady!"
    ], function(Map, SceneView, FeatureLayer, Search) {

      var map = new Map({
        basemap: "streets",
        ground: "world-elevation"
      });

      var view = new SceneView({
        container: "viewDiv",
        map: map,
        scale: 50000000,
        center: [-101.17, 21.78]
      });
      
      var search = new Search({
        sources: [{
          featureLayer: new FeatureLayer("https://services.arcgis.com/b6gLrKHqgkQb393u/arcgis/rest/services/TaxParcelQuery/FeatureServer/0", {
            outFields: ["*"]
//notice you should not have a trailing comma if there is nothing else after the last property.
          }),
          outFields: ["OWNERNME1","PARCELID","SITEADDRESS"],
          displayField: "OWNERNME1",
          name: "Parcels",
          placeholder: "example: Shawn Smith",
          enableSuggestions: true
        }],
        view: view
      }, "search");
      
      // Add the search widget to the top right corner of the view
      view.ui.add(search, {
        position: "top-right"
      });

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="search"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: search widget+4.6

anjelinaponkerat — Mon, 01 Jan 2018 05:02:23 GMT

ok, but when I use my own map service for ground and base map the search tools can not navigate to result!!!

{

var ExaggeratedElevationLayer = BaseElevationLayer.createSubclass({
properties: {
exaggeration: 2.5
},

// The load() method is called when the layer is added to the map
// prior to it being rendered in the view.

load: function() {
this._elevation = new ElevationLayer({
url: "http://localhost:6080/arcgis/rest/services/dem_90/ImageServer"
});

// wait for the elevation layer to load before resolving load()
this.addResolvingPromise(this._elevation.load());
},

// Fetches the tile(s) visible in the view
fetchTile: function(level, row, col) {
// calls fetchTile() on the elevationlayer for the tiles
// visible in the view
return this._elevation.fetchTile(level, row, col)
.then(function(data) {

var exaggeration = this.exaggeration;

// `data` is an object that contains the
// the width of the tile in pixels,
// the height of the tile in pixels,
// and the values of each pixel
data.values.forEach(function(value, index, values) {
// each value represents an elevation sample for the
// given pixel position in the tile. Multiply this
// by the exaggeration value
values[index] = value * exaggeration;
});

return data;
}.bind(this));
}
});
/*****************************************************************
* Create two TileLayer instances. One pointing to a
* cached map service depicting U.S. male population and the other
* pointing to a layer of roads and highways.
*****************************************************************/
var transportationLyr = new TileLayer({
url: "http://localhost:6080/arcgis/rest/services/new/MapServer",
// This property can be used to uniquely identify the layer
id: "streets",
visible: false
});

var housingLyr = new TileLayer({
url: "http://localhost:6080/arcgis/rest/services/land/MapServer",
id: "ny-housing",
opacity: 0.3

});

/*****************************************************************
* Layers may be added to the map in the map's constructor
*****************************************************************/
var map = new Map({

ground: {
layers: [
new ExaggeratedElevationLayer()
]
}

});

/*****************************************************************
* Or they may be added to the map using map.add()
*****************************************************************/
map.add(transportationLyr);

var view = new SceneView({
container: "viewDiv",
map: map

});
map.add(housingLyr);

var search = new Search({
sources: [{
featureLayer: new FeatureLayer("http://localhost:6080/arcgis/rest/services/city/FeatureServer/0", {
outFields: ["*"]
//notice you should not have a trailing comma if there is nothing else after the last property.
}),
outFields: ["town"],
displayField: "town",
name: "town",
placeholder: "example: texas",
zoomScale:100000,
maxResults:6,
maxSuggestions:120,
autoNavigate: true,
supportsPagination: true,
}],
view: view
}, "search");

// Add the search widget to the top right corner of the view
view.ui.add(search, {
position: "top-right"
});

/*****************************************************************
* The map handles the layers' data while the view and layer views
* take care of renderering the layers
*****************************************************************/
view.on("layerview-create", function(event) {
if (event.layer.id === "ny-housing") {
// Explore the properties of the population layer's layer view here
console.log("LayerView for male population created!", event.layerView);
}
if (event.layer.id === "streets") {
// Explore the properties of the transportation layer's layer view here
// Explore the properties of the transportation layer's layer view here
console.log("LayerView for streets created!", event.layerView);
}
});

/*****************************************************************
* Layers are promises that resolve when loaded, or when all their
* properties may be accessed. Once the population layer has loaded,
* the view will animate to it's initial extent.
*****************************************************************/
view.when(function() {
housingLyr.when(function() {
view.goTo(housingLyr.fullExtent);
});
});

var streetsLyrToggle = dom.byId("streetsLyr");

/*****************************************************************
* The visible property on the layer can be used to toggle the
* layer's visibility in the view. When the visibility is turned off
* the layer is still part of the map, which means you can access
* its properties and perform analysis even though it isn't visible.
*******************************************************************/
on(streetsLyrToggle, "change", function() {
transportationLyr.visible = streetsLyrToggle.checked;
});

Re: search widget+4.6

RobertScheitlin__GISP — Mon, 01 Jan 2018 06:53:30 GMT

Anjelina,

Is this layer actually a cached layer localhost:6080/arcgis/rest/services/land/MapServer?

Are all the layer the same WKID?

Re: search widget+4.6

anjelinaponkerat — Mon, 01 Jan 2018 06:55:55 GMT

yes

All of them are 102100 wkid and have cash.

my feature service and my ground are on 10.5 and my basemap is on 10.2.2

Re: search widget+4.6

anjelinaponkerat — Mon, 01 Jan 2018 15:18:34 GMT

All of them are 102100 wkid and have cash.

my feature service and my ground are on 10.5 and my basemap is on 10.2.2

What should I do?

Re: search widget+4.6

RobertScheitlin__GISP — Mon, 01 Jan 2018 16:13:31 GMT

Anjelina,

Try smaller steps when debugging. Don't use your basemap or elevation layer and see if you can get the Search widget to work with your layer. Then if you get that working then try adding one of your Basemaps.

Re: search widget+4.6

anjelinaponkerat — Mon, 01 Jan 2018 16:45:39 GMT

I can use search widget with esri ground and base map, but I have problem with my own

Re: search widget+4.6

RobertScheitlin__GISP — Mon, 01 Jan 2018 17:13:50 GMT

Anjelina,

So what I have seen from all your posts is that you have not been able to use your own basemaps. Now you are attempting to use them in a 3D environment. If you can not get yours to work in a simple 2D 3.x environment then you are not going to have any better luck getting them to work in a 4,x 3D scene. You need to figure out the simple stuff be fore you go an try more advanced 3D and elevation stuff. If you could provide a public url to YOUR data then someone might be able to provide more help, but you just saying it does not work with my services does not help us provide you help.

Re: search widget+4.6

anjelinaponkerat — Mon, 01 Jan 2018 18:15:44 GMT

I can use my base map as 3d, but when I use my base map the search widget dont work

Re: search widget+4.6

RobertScheitlin__GISP — Tue, 02 Jan 2018 14:00:16 GMT

Anjelina,

And you see no errors in the browsers web console?

Re: search widget+4.6

anjelinaponkerat — Tue, 02 Jan 2018 16:38:16 GMT

No error, I cehcked firebog, this is response of search tools in web console:

{"objectIdFieldName":"OBJECTID","globalIdFieldName":"","geometryType":"esriGeometryPoint","spatialReference":{"wkid":102100,"latestWkid":3857},"fields":[{"name":"town","alias":"town","type":"esriFieldTypeString","length":50}],"features":[{"attributes":{"town":"Denver"},"geometry":{"x": -11683227.6,"y":4837619.6}}]}

Re: search widget+4.6

RobertScheitlin__GISP — Tue, 02 Jan 2018 16:44:31 GMT

Anjelina,

Sorry I can not figure out what is wrong on your end then.

Re: search widget+4.6

anjelinaponkerat — Tue, 02 Jan 2018 19:27:59 GMT

this is my code with some web based map services that are temporary:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>3d</title>

#layerToggle {
top: 20px;
right: 20px;
position: absolute;
z-index: 99;
background-color: white;
border-radius: 8px;
padding: 10px;
opacity: 0.75;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
left: 74px;
}
</style>

var ExaggeratedElevationLayer = BaseElevationLayer.createSubclass({
properties: {
exaggeration: 2.5
},

// The load() method is called when the layer is added to the map
// prior to it being rendered in the view.

load: function() {
this._elevation = new ElevationLayer({
url: "http://localhost:6080/arcgis/rest/services/dem_denver/ImageServer"
});

// wait for the elevation layer to load before resolving load()
this.addResolvingPromise(this._elevation.load());
},

var exaggeration = this.exaggeration;

return data;
}.bind(this));
}
});
/*****************************************************************
* Create two TileLayer instances. One pointing to a
* cached map service depicting U.S. male population and the other
* pointing to a layer of roads and highways.
*****************************************************************/
var transportationLyr = new TileLayer({
url: "http://localhost:6080/arcgis/rest/services/hill_denver2/MapServer",
// This property can be used to uniquely identify the layer
id: "streets",
visible: false
});

var housingLyr = new TileLayer({
url: "http://localhost:6080/arcgis/rest/services/hill_denver/MapServer",
id: "ny-housing",
opacity: 0.3

});

ground: {
layers: [
new ExaggeratedElevationLayer()
]
}
});

var streetsLyrToggle = dom.byId("streetsLyr");

var search = new Search({
sources: [{
featureLayer: new FeatureLayer("http://localhost:6080/arcgis/rest/services/city_denver/FeatureServer/0", {
outFields: ["*"],

}),
outFields: ["name","town"],
displayField: "name",
searchFields: ["name"],
name: "name",
placeholder: "example: denver",
exactMatch: false,
zoomScale:10000,
maxResults:6,
maxSuggestions:6,
autoNavigate: true,

enableSuggestions: true
}],
view: view
}, "search");

search.startup();

view.ui.add(searchWidget, {
position: "top-right"
});

});
</script>
</head>

</html>

Re: search widget+4.6

RobertScheitlin__GISP — Fri, 10 Dec 2021 22:34:58 GMT

Anjelina,

I get a couple of errors using your code. You need to use F12 browser developer tools and forget about FireBug (firebug is basically obsolete now that modern browser have such good developer tools).

You have:

view.ui.add(searchWidget, {
  position: "top-right"
});‍‍‍

When your search widget var is called search not searchWidget.

Your next issue is that you are setting the position in your css rule for #search yet you are trying to have the API set it's position using view.ui.add and position top-right.

Re: search widget+4.6

anjelinaponkerat — Wed, 03 Jan 2018 05:55:44 GMT

Thanks

but I have problem after apply your suggestions too. this is my changes:

var searchWidget = new Search({
sources: [{
featureLayer: new FeatureLayer("http://localhost:6080/arcgis/rest/services/city_denver/FeatureServer/0", {
outFields: ["*"],

}),
outFields: ["name","town"],
displayField: "name",
searchFields: ["name"],
name: "name",
placeholder: "example: denver",
exactMatch: false,
zoomScale:10000,
maxResults:6,
maxSuggestions:6,
autoNavigate: true,

enableSuggestions: true
}],
view: view
}, "search");

view.ui.add(searchWidget, {
position: "top-left"
});

});
</script>
</head>

<body>

</html>

and one more:

});
</script>
</head>

<body>

</body>

</html>

Re: search widget+4.6

RobertScheitlin__GISP — Fri, 10 Dec 2021 22:35:00 GMT

Anjelina,

Well you switch from one issue to another... Your first code snippet has

var searchWidget = new Search({
  sources: [{
    featureLayer: new FeatureLayer("http://localhost:6080/arcgis/rest/services/city_denver/FeatureServer/0", {
      outFields: ["*"],
// For some reason you still have the above trailing comma and proceeding properties
//even though I mentioned this before.
    }),‍‍‍‍‍‍‍
    outFields: ["name","town"],
    displayField: "name",
    searchFields: ["name"],
    name: "name",
    placeholder: "example: denver",
    exactMatch: false,
    zoomScale:10000,
    maxResults:6,
    maxSuggestions:6,
    autoNavigate: true,
    enableSuggestions: true
  }],
  view: view
}, "searchWidget");‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Then you have:

view.ui.add(searchWidget, {
  position: "top-left"
});‍‍‍

Which is great.

Then you have:

<body>

  <div id="viewDiv"></div>

  <span id="layerToggle">
    <input type="checkbox" id="streetsLyr"> new base map
  </span>
</body>‍‍‍‍‍‍‍‍

So this issue is that in the first code block line 21 you are creating the search widget and placing it at a div called "searchWidget" which does not exist.

So you need a div called "searchWidget".
If you are going to use view.ui.add then you DO NOT want a css rule that positions the "searchWidget" div.

Re: search widget+4.6

anjelinaponkerat — Wed, 03 Jan 2018 15:00:50 GMT

var searchWidget = new Search({
sources: [{
featureLayer: new FeatureLayer("http://localhost/arcgis/rest/services/city_denver/FeatureServer/0", {
outFields: ["*"]

view.ui.add(searchWidget, {
position: "top-left"
});

});
</script>
</head>

</html>