AnsweredAssumed Answered

dijit/search widget - not working

Question asked by srajoli on Apr 23, 2015
Latest reply on Apr 24, 2015 by rscheitlin

Hello,

 

I am working on dijit/search widget. I am trying to use to find trees on the feature layer based on Memorial feature.

When I try to search - it says Pagination error /enter a search term.

Not sure what I am missing.

 

Below is the code I am trying to work on. Can some one please let me know, If I am missing something ?

Unable to find much info on this widget.

 

<!DOCTYPE html>

<html dir="ltr">

 

<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>ArcGIS API for JavaScript | Basic Search</title>

   <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">

   <link rel="stylesheet" href="http://js.arcgis.com/3.13/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: 20px;

         left: 74px;

      }

   </style>

      <script>

      var dojoConfig = {

         parseOnLoad: true

      };

   </script>

   <script src="http://js.arcgis.com/3.13/"></script>

   <script>

      require([

"esri/map","esri/dijit/Search","esri/InfoTemplate","esri/dijit/Popup", "esri/dijit/PopupTemplate", "esri/layers/FeatureLayer",

"esri/symbols/SimpleFillSymbol", "esri/Color", "dojo/dom-class", "dojo/dom-construct", "dojo/on",

"esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ArcGISTiledMapServiceLayer",

"dojox/charting/Chart", "dojox/charting/themes/Dollar", "esri/InfoTemplate","dojo/domReady!"

      ], function (Map,Search,InfoTemplate, Popup, PopupTemplate, FeatureLayer, SimpleFillSymbol, Color, domClass,

                 domConstruct, on, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, Chart,theme) {

          var fill = new SimpleFillSymbol("solid", null, new Color("#A4CE67"));

          var popup = new Popup({

            fillSymbol: fill,

            titleInBody: false

            }, domConstruct.create("div"));

            domClass.add(popup.domNode, "dark");

                         

         var map = new Map("map", {

            center: [-120.435, 46.159], // lon, lat

            zoom: 7,

            infoWindow: popup

         });

 

         var template = new PopupTemplate({

                    title: "BGSU Memorial Tree",

                    description: " Tree Memorial: {MEMORIAL} <br/>Tree Variety: {TREE_VARIETY} <br/>Tree Species: {TREE_SPECIES} Tree Species <br/> <img src={TLINK}  height =100px  width=100px alt=\"No image to display\" />",

                    //description1:"{TREE_SPECIES }: Tree Species",

                    fieldInfos: [{ //define field information 

                        fieldName: "TREE_SPECIES",

                        label: "Type"

                    }, {

                        fieldName: "TREE_VARIETY",

                        label: "Type"

                    }],

                    mediaInfos: [{ //define the template 

                        caption: "",

                        type: "",

                        value: {

                            theme: "",

                            fields: ["TREE_SPECIES", "TREE_VARIETY"]

                        }

                    }]

                });

                var basemap = new ArcGISTiledMapServiceLayer("https://gistest2.bgsu.edu/arcgis/rest/services/Basemap/Basemap/MapServer");

                map.addLayer(basemap);

                // this layer is for tree icons

                var usaLayer = new ArcGISDynamicMapServiceLayer("https://gistest2.bgsu.edu/arcgis/rest/services/MemorialTrees/MemorialTEST/MapServer/", {

                    opacity: 0.7,

                    visible: false

                });

                usaLayer.setVisibleLayers([2]);

                map.addLayer(usaLayer);

                // this is for data to be retrived and show in the template

        var featureLayer = new FeatureLayer("https://gistest2.bgsu.edu/arcgis/rest/services/MemorialTrees/MemorialTrees/MapServer/0", {

                    mode: FeatureLayer.MODE_ONDEMAND,

                    outFields: ["MEMORIAL", "TREE_VARIETY", "TREE_SPECIES", "TLINK"],

                    infoTemplate: template

                });

                map.addLayer(featureLayer);

               

                // search widget

                var search = new Search({

                 map: map,

                 sources: [],zoomScale: 5000000}, "search");

                

                  //listen for the load event and set the source properties

         search.on("load", function () {

            var sources = search.sources;

            sources.push({

               featureLayer: featureLayer,

               placeholder: "Search Memorial Trees",

               enableLabel: false,

               searchFields: ["MEMORIAL"],

               displayField: "MEMORIAL",

               exactMatch: false,

               outFields: ["MEMORIAL", "TREE_SPECIES", "TREE_VARIETY"]

            });

            //Set the sources above to the search widget

            search.set("sources", sources);

         });

         search.startup();

      });

   </script>

</head>

 

<body>

   <div id="search"></div>

   <div id="map"></div>

</body>

</html>

 

Thanks!

Outcomes