search widget

NedaPeiravian — Tue, 25 Apr 2017 03:46:19 GMT

Hi,

I try to create search widget for my map that when someone search the object id of the trees the map shows that tree with popup to user. the problem is the search widget didn't return objid.

Re: search widget

Anonymous User — Tue, 25 Apr 2017 07:52:48 GMT

Can you please share some test objectIDs to test in application.

Re: search widget

RobertScheitlin__GISP — Sat, 11 Dec 2021 10:27:40 GMT

Neda,

Your issue is that you are not setting up your search sources property correctly:

      var search = new Search({
        view: view,
        sources: [{
          featureLayer: tree,
          searchFields: ["objectid"],
          displayField: "objectid",
          exactMatch: true,
          outFields: ["objectid"],
          name: "Tree FS",
          placeholder: "object ID",
          maxResults: 6,
          maxSuggestions: 6,
          suggestionsEnabled: false,
          minSuggestCharacters: 0
        }]
      });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: search widget

NedaPeiravian — Tue, 25 Apr 2017 21:51:24 GMT

Hey Robert,

Thank you for fixing my code, although the search widget shows up with place holder name now, it cannot find the object id of trees, should I add any property to var tree?

Re: search widget

RobertScheitlin__GISP — Sat, 11 Dec 2021 10:27:43 GMT

Neda,

Strange the search widget works for me with that change in your code. I turned off autosuggest (as it seems to have an issue with OID fields) is that what you mean does not work? When I type 34 in the widget and hit enter it take me to that tree. Here is the full code with corrections:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Interactive web map for CSULB Trees dataset</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.3/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/geometry/Extent",
      "esri/layers/FeatureLayer",
      "esri/widgets/Search",
      "esri/widgets/Legend",
      "esri/widgets/ScaleBar",
      "dojo/domReady!"
    ], function(Map, MapView, Extent, FeatureLayer, Search, Legend, ScaleBar) {
      var map = new Map({
        basemap: "gray"
      });
      var initialExtent = new Extent({
        xmin: -118.13,
        xmax: -118.1,
        ymin: 33.77,
        ymax: 33.79
        //spatialReference: 102100

      });
      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 15,
        center: [-118.114090, 33.783823],
        extent: initialExtent
      });

      var template = {
        title: "CSULB Tree Details, Tree ID: {tree_id}",
        content: "<li>Common name: <b>{common_name}</b></li>" +
          "<li>Scientific name: <b>{scientific_name}</b></li>" +
          "<li>Genus: <b>{genus}</b> </li>" +
          "<li>Specific epithet: <b>{specific_epithet}</b></li>" +
          "<li>Cultivar subspecies: <b>{cultivar_subspecies}</b> </li>" +
          "<li>Family: <b>{family}</b> </li>" +
          "<li>Condition: <b>{condition}</b> </li>" +
          "<li>Average of Trunk dbt: <b>{average_trunk_dbh_cm}</b></li>" +
          "<li>Height: <b>{hight_m}</b> Meter</li>" +
          "<li>Canopy height: <b>{canopy_height_m}</b> Meter</li>" +
          "<li>Canopy width: <b>{canopy_width_m}</b> Meter</li>" +
          "<li>Canopy shape: <b>{canopy_shape}</b> Meter</li>" +
          "<li>Biomass Mt: <b>{biomass_mt}</b></li>" +
          "<li>Co2 sequestration: <b>{co2_sequestration_kg}</b> Kg</li>" +
          "<li>Owner: <b>{owner}</b> </li>" +
          "<li>Photo: <b>{photo_urls}</b> Meter</li>" +
          "<li>Date planted: <b>{date_planted}</b> </li>" +
          "<li>ObjectId: <b>{objectid}</b> </li>",

        fieldInfos: [{
          fieldName: "canopy_width_m",
          format: {
            digitSeparator: true, // Use a comma separator for large numbers
            places: 0 // Sets the number of decimal places to 0 and rounds up
          }
        }, {
          fieldName: "average_trunk_dbh_cm",
          format: {
            digitSeparator: true,
            places: 0
          },
        }]
      };

      var campus = new FeatureLayer({
        url: "http://services3.arcgis.com/vq5vGR4r1YX7ueLg/arcgis/rest/services/CampusTreeLayers/FeatureServer/1?token=R1VkseUaX5VeH-vBErTZrlB5cmP-sbvkiphjqt_QYJa6Vf2-5vtfczfMBZGc9qO2yu4lq1UclgeUo2fwnCytdDGlO658prv_BClf2E9tQaUuF8kfOJmsz66WSPyMn93DUz11f_gLn7O8EbtItskZPytYN6Q6LSzQ6Z2oYc6va9o8TjRcFgQRfMYT9VPjzKjBwIFMzhVpZw57KldjDdiNHAX4g2EvQ3-vJTBBZdVJ7H0."

      });
      map.add(campus);

      var tree = new FeatureLayer({
        url: "http://services3.arcgis.com/vq5vGR4r1YX7ueLg/arcgis/rest/services/CampusTreeLayers/FeatureServer/0?token=R1VkseUaX5VeH-vBErTZrlB5cmP-sbvkiphjqt_QYJa6Vf2-5vtfczfMBZGc9qO2yu4lq1UclgeUo2fwnCytdDGlO658prv_BClf2E9tQaUuF8kfOJmsz66WSPyMn93DUz11f_gLn7O8EbtItskZPytYN6Q6LSzQ6Z2oYc6va9o8TjRcFgQRfMYT9VPjzKjBwIFMzhVpZw57KldjDdiNHAX4g2EvQ3-vJTBBZdVJ7H0.",
        outFields: ["*"],
        popupTemplate: template
      });
      map.add(tree);

      var search = new Search({
        view: view,
        sources: [{
          featureLayer: tree,
          searchFields: ["objectid"],
          displayField: "objectid",
          exactMatch: true,
          outFields: ["*"],
          name: "Tree FS",
          placeholder: "Object ID",
          maxResults: 6,
          maxSuggestions: 6,
          suggestionsEnabled: true,
          minSuggestCharacters: 0
        }]
      });

      view.ui.add(search, "top-right");

      var legend = new Legend({
        view: view,
        layerInfos: [{
          layer: campus,
          title: "CSULB Campus Land covers"
        }]
      });
      view.ui.add(legend, "bottom-left");

      var scaleBar = new ScaleBar({
        view: view,
        unit: "non-metric"
      });
      view.ui.add(scaleBar, {
        position: "bottom-left"
      });

    });
  </script>
</head>

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

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: search widget

NedaPeiravian — Wed, 26 Apr 2017 00:26:35 GMT

Yea, by turning off the autosuggest it works for me too. Thank you.

Re: search widget

RobertScheitlin__GISP — Wed, 26 Apr 2017 00:40:39 GMT

Great, Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.

topic Re: search widget in ArcGIS JavaScript Maps SDK Questions

search widget

Re: search widget

Re: search widget

Re: search widget

Re: search widget

Re: search widget

Re: search widget