Search Widget on my own data

SteveAdams · ‎10-16-2015

I have started to make the journey from Flex to javascript.

I am really new at this so forgive me.

I can get my map layer to show up but

just can't seem to get the search to look at my mapserver

ArcGIS API for JavaScript | Basic Search

<!DOCTYPE html>

<head>

<title>ArcGIS API for JavaScript | Basic Search</title>

<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>

var map;

require([

"esri/map",

"esri/dijit/Search",

"dojo/domReady!"

], function (Map, Search) {

var initExtent = new esri.geometry.Extent({ "xmin": -119.609356, "ymin": 36.780374, "xmax": -119.797153, "ymax": 36.895779, "spatialReference": { "wkid": 4326} });

map = new esri.Map("map", { extent: initExtent });

var MyMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://cusdmaps2012.cusd.com/arcgis/rest/services/flex/CUSD_MapFlex3/MapServer", {

});

map.addLayer(MyMapLayer);

var s = new Search({

enableButtonMode: true, //this enables the search widget to display as a single button

enableLabel: false,

enableInfoWindow: true,

showInfoWindowOnSelect: false,

map: MyMapLayer

}, "search");

var sources = [];

sources.push({

featureLayer: new FeatureLayer("http://cusdmaps2012.cusd.com/arcgis/rest/services/flex/CUSD_MapFlex3/MapServer/0"),

searchFields: ["FULL_ADDRESS"],

displayField: "FULL_ADDRESS",

exactMatch: false,

name: "test",

outFields: ["*"],

placeholder: "test",

maxResults: 6,

maxSuggestions: 6,

enableSuggestions: true,

minCharacters: 0

});

//Set the sources above to the search widget

s.set("sources", sources);

s.startup();

});

</script>

</head>

<body>

</body>

</html>

KellyHutchins · ‎10-16-2015

Your sample code was missing a few things. First you needed to load esri/layers/FeatureLayer and second in your code that creates the Search widget you were setting the map equal to your dynamic layer. Instead it needed to be the map. Here's a revised version of your code.

<!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.14/dijit/themes/claro/claro.css">
   <link rel="stylesheet" href="http://js.arcgis.com/3.14/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 src="http://js.arcgis.com/3.14/"></script>
   <script>
       require([


        "esri/map",
        "esri/dijit/Search",
        "esri/geometry/Extent",
        "esri/layers/FeatureLayer",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "dojo/domReady!"


      ], function (Map, Search, Extent, FeatureLayer, ArcGISDynamicMapServiceLayer) {
          var initExtent = new Extent({ "xmin": -119.609356, "ymin": 36.780374, "xmax": -119.797153, "ymax": 36.895779, "spatialReference": { "wkid": 4326} });
          var map = new esri.Map("map", { extent: initExtent });
          var MyMapLayer = ArcGISDynamicMapServiceLayer("http://cusdmaps2012.cusd.com/arcgis/rest/services/flex/CUSD_MapFlex3/MapServer", {


          });
          map.addLayer(MyMapLayer);


          var s = new Search({
              map: map
          }, "search");


          var sources = [];

          sources.push({
              featureLayer: new FeatureLayer("http://cusdmaps2012.cusd.com/arcgis/rest/services/flex/CUSD_MapFlex3/MapServer/0"),
              searchFields: ["FULL_ADDRESS"],
              displayField: "FULL_ADDRESS",
              name: "CUSD",
              placeholder: "Enter address",
              outFields: ["*"]
          });


          //Set the sources above to the search widget
          s.set("sources", sources);
          s.startup();


      });
   </script>
</head>


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


</html>

View solution in original post

KellyHutchins · ‎10-16-2015

Your sample code was missing a few things. First you needed to load esri/layers/FeatureLayer and second in your code that creates the Search widget you were setting the map equal to your dynamic layer. Instead it needed to be the map. Here's a revised version of your code.

<!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.14/dijit/themes/claro/claro.css">
   <link rel="stylesheet" href="http://js.arcgis.com/3.14/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 src="http://js.arcgis.com/3.14/"></script>
   <script>
       require([


        "esri/map",
        "esri/dijit/Search",
        "esri/geometry/Extent",
        "esri/layers/FeatureLayer",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "dojo/domReady!"


      ], function (Map, Search, Extent, FeatureLayer, ArcGISDynamicMapServiceLayer) {
          var initExtent = new Extent({ "xmin": -119.609356, "ymin": 36.780374, "xmax": -119.797153, "ymax": 36.895779, "spatialReference": { "wkid": 4326} });
          var map = new esri.Map("map", { extent: initExtent });
          var MyMapLayer = ArcGISDynamicMapServiceLayer("http://cusdmaps2012.cusd.com/arcgis/rest/services/flex/CUSD_MapFlex3/MapServer", {


          });
          map.addLayer(MyMapLayer);


          var s = new Search({
              map: map
          }, "search");


          var sources = [];

          sources.push({
              featureLayer: new FeatureLayer("http://cusdmaps2012.cusd.com/arcgis/rest/services/flex/CUSD_MapFlex3/MapServer/0"),
              searchFields: ["FULL_ADDRESS"],
              displayField: "FULL_ADDRESS",
              name: "CUSD",
              placeholder: "Enter address",
              outFields: ["*"]
          });


          //Set the sources above to the search widget
          s.set("sources", sources);
          s.startup();


      });
   </script>
</head>


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


</html>