Using the search dijit on a featurelayer created from a feature collection.

JasonLevine — Sat, 11 Dec 2021 07:16:42 GMT

Hello,

I'm trying to use the example code as a proof of concept for using the search widget for searching a feature layer that was created from a feature collection. For some reason, I always get "no results found". Is this a limitation with the search widget?

Here is my code. I'm not really concerned with how pretty this looks as this is just a proof of concept.

<!DOCTYPE html>
<html>  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Flickr</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
      #search {
         display: block;
         position: absolute;
         z-index: 2;
         top: 70px;
         left: 74px;
      }
      /*Beginning of search box modifications*/
      .arcgisSearch .searchClear {
         background-color: #E5E5E5;
      }
      .arcgisSearch .esriIconZoom {
         background-image: url("finding.png");
         background-size: 20px 20px;
      }
      .esriIconZoom:before {
         content: "";
      }
      .arcgisSearch .searchGroup .searchInput,
      .arcgisSearch .searchBtn,
      .arcgisSearch .noResultsMenu,
      .arcgisSearch .suggestionsMenu {
         border: 1px solid #003300;
         background-color: #E5E5E5;
      }
      .arcgisSearch .noValueText {
         color: red;
         font-size: 14px;
      }
      .esriScalebar{
        padding: 20px 20px; 
      } 
      #map{ 
        padding:0;
      }
    </style>
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="https://js.arcgis.com/3.15/"></script>
    <script>
      var map;
      require([
        "esri/map",
        "esri/dijit/Search",
        "esri/layers/FeatureLayer",
        "esri/dijit/PopupTemplate",
        "esri/request",
        "esri/geometry/Point",
        "esri/graphic",
        "dojo/on",
        "dojo/_base/array",
        "dojo/domReady!"
      ], function(
        Map,
        Search,
        FeatureLayer, 
        PopupTemplate,
        esriRequest,
        Point,
        Graphic,
        on,
        array
      ) {
        var featureLayer;
        map = new Map("map", {
          basemap: "satellite",
          center: [-46.807, 32.553],
          zoom: 3
        });
        //hide the popup if its outside the map's extent
        map.on("mouse-drag", function(evt) {
          if (map.infoWindow.isShowing) {
            var loc = map.infoWindow.getSelectedFeature().geometry;
            if (!map.extent.contains(loc)) {
              map.infoWindow.hide();
            }
          }
        });
        //create a feature collection for the flickr photos
        var featureCollection = {
          "layerDefinition": null,
          "featureSet": {
            "features": [],
            "geometryType": "esriGeometryPoint"
          }
        };
        featureCollection.layerDefinition = {
          "geometryType": "esriGeometryPoint",
          "objectIdField": "ObjectID",
          "drawingInfo": {
            "renderer": {
              "type": "simple",
              "symbol": {
                "type": "esriPMS",
                "url": "images/flickr.png",
                "contentType": "image/png",
                "width": 15,
                "height": 15
              }
            }
          },
          "fields": [{
            "name": "ObjectID",
            "alias": "ObjectID",
            "type": "esriFieldTypeOID"
          }, {
            "name": "description",
            "alias": "Description",
            "type": "esriFieldTypeString"
          }, {
            "name": "title",
            "alias": "Title",
            "type": "esriFieldTypeString"
          }, {
            "name": "author",
            "alias": "Author",
            "type": "esriFieldTypeString"
          }]
        };
        var popupTemplate = new PopupTemplate({
          title: "{author}",
          description: "{description}"
        });
        featureLayer = new FeatureLayer(featureCollection, {
          id: 'flickrLayer',
          infoTemplate: popupTemplate
        });
        featureLayer.on("click", function(evt) {
          map.infoWindow.setFeatures([evt.graphic]);
        });
        map.on("layers-add-result", function(results) {
          requestPhotos();
        });
        map.addLayers([featureLayer]);
      function requestPhotos() {
        var requestHandle = esriRequest({
          url: "https://api.flickr.com/services/feeds/geo?&format=json",
          callbackParamName: "jsoncallback"
        });
        requestHandle.then(requestSucceeded, requestFailed);
      }
      function requestSucceeded(response, io) {
        var features = [];
        array.forEach(response.items, function(item) {
          var attr = {};
          attr["description"] = item.description;
          attr["title"] = item.title ? item.title : "Flickr Photo";
          attr["author"] = item.author;

          var geometry = new Point(item);

          var graphic = new Graphic(geometry);
          graphic.setAttributes(attr);
          features.push(graphic);
        });
        featureLayer.applyEdits(features, null, null);
      }
      function requestFailed(error) {
        console.log('failed');
      }
     var search = new Search({
        map: map,
        sources: [],
        zoomScale: 5000000
     }, "search"); 
     search.on("load", function () {
        var sources = search.sources;
        sources.push({
           featureLayer: featureLayer,
           placeholder: "Enter an Author name...",
           enableLabel: false,
           searchFields: ["author"],
           displayField: "author",
           exactMatch: false,
           outFields: ["*"]
        });
        search.set("sources", sources);
     });
     search.startup();
    });
    </script>
  </head>
  <body >
  <div id="search"></div>
   <div id="info" />
    <div id="map"></div>
  </body>
</html>

Thanks,

Jason

Re: Using the search dijit on a featurelayer created from a feature collection.

JasonLevine — Thu, 07 Jan 2016 01:21:28 GMT

Here's the code

Re: Using the search dijit on a featurelayer created from a feature collection.

RobertScheitlin__GISP — Thu, 07 Jan 2016 15:09:09 GMT

Jason,

This is going to be a known limitation as the Search dijit needs to query the FeatureLayer for the text entered and the FeatureLayer using a collection have this limitation:

Does not support queries that need to be performed on the server, e.g. queries with a where clause or non-extent based spatial queries.

topic Using the search dijit on a featurelayer created from a feature collection. in ArcGIS JavaScript Maps SDK Questions

Using the search dijit on a featurelayer created from a feature collection.

Re: Using the search dijit on a featurelayer created from a feature collection.

Re: Using the search dijit on a featurelayer created from a feature collection.