Search is not linked to map in ArcGIS API

[SteveCline]

I am trying to add this search function to a map:

require([

        "esri/map",
        "esri/dijit/Search",
        "dojo/domReady!"

      ], function (Map, Search) {
         var map = new Map("map", {
            basemap: "gray",
            center: [-120.435, 46.159], // lon, lat
            zoom: 7
         });

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

      });

Here is the full js:

    var map;

    require([

      "esri/map",

      "esri/dijit/Search",

      "esri/arcgis/utils",

      "esri/dijit/Legend",

      "esri/layers/ArcGISTiledMapServiceLayer",

      "esri/layers/ArcGISDynamicMapServiceLayer",

      "dojo/dom",

      "dojo/dom-construct",

      "dojo/parser",

      "dojo/_base/array",

      "dijit/form/CheckBox",

      "esri/graphic",

      "esri/symbols/SimpleMarkerSymbol",

      "esri/geometry/screenUtils",

      "dojo/query",

      "dojo/_base/Color",

      "dijit/layout/AccordionContainer",

      "dijit/layout/BorderContainer",

      "dijit/layout/ContentPane",

      "dojo/domReady!"

    ],

      function (

        Map, Search, utils, Legend, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,

  dom, domConstruct,

        parser, arrayUtils, CheckBox, Graphic, SimpleMarkerSymbol, screenUtils, query, Color

      ) {

        parser.parse();

  var legendLayers = [];

  var s = new Search({

            map: map

         }, "search");

         s.startup();

        map = new Map("map", {

          basemap: "topo",

          center: [10, 23],

          zoom: 2

        });

// duplicate this for each layer - use dynamic layer service for those types

        var LADALandUse = new ArcGISTiledMapServiceLayer("http://tiles.arcgis.com/tiles/HVjI8GKrRtjcQ4Ry/arcgis/rest/services/LADA_Land_Use_Systems/MapServer", {

          id: 'landuse'

        });

        legendLayers.push({ layer: LADALandUse, title: 'Land Use' });

//         to here

        var WWFTerEco = new ArcGISTiledMapServiceLayer("http://tiles.arcgis.com/tiles/HVjI8GKrRtjcQ4Ry/arcgis/rest/services/LADA_Land_Use_Systems/MapServer", {

          id: 'WWFTerEco'

        });

        legendLayers.push({ layer: WWFTerEco, title: 'WWF Terrestrial Ecoregion' });

        var climateLayer = new ArcGISTiledMapServiceLayer("http://tiles.arcgis.com/tiles/HVjI8GKrRtjcQ4Ry/arcgis/rest/services/LADA_Land_Use_Systems/MapServer", {

            id: 'climate'

        });

        map.on('layers-add-result', function () {

          var legend = new Legend({

            map: map,

            layerInfos: legendLayers

          }, "legendDiv");

          legend.startup();

        });

        legendLayers.push({ layer: climateLayer, title: "Climate" });

        map.addLayers([ climateLayer, LADALandUse, WWFTerEco ]); /*add the layer var here*/

        map.on('layers-add-result', function () {

          //add check boxes

          arrayUtils.forEach(legendLayers, function (layer) {

            var layerName = layer.title;

            var checkBox = new CheckBox({

              name: "checkBox" + layer.layer.id,

              value: layer.layer.id,

              checked: layer.layer.visible

            });

            checkBox.on("change", function () {

              var targetLayer = map.getLayer(this.value);

              targetLayer.setVisibility(!targetLayer.visible);

              this.checked = targetLayer.visible;

            });

            //add the check box and label to the toc

            domConstruct.place(checkBox.domNode, dom.byId("toggle"), "after");

            var checkLabel = domConstruct.create('label', {

                'for': checkBox.name,

                innerHTML: layerName

              }, checkBox.domNode, "after");

            domConstruct.place("<br />", checkLabel, "after");

          });

        });

      });

Any guidance is greatly appreciated.

[RobertScheitlin__GISP · Accepted solution]

Steve,

  Here is a working sample. Without having your full code I had to recreate your app and thus can not say exactly what your issue was.

<!DOCTYPE html>

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
    on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Map with legend and Search DIjit</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 {
      height: 97%;
      width: 98%;
      margin: 1%;
    }

    #search {
      display: block;
      position: absolute;
      z-index: 2;
      top: 20px;
      left: 74px;
    }

    #rightPane {
      width: 20%;
    }

    #legendPane {
      border: solid #97DCF2 1px;
    }
  </style>

  <script src="http://js.arcgis.com/3.13/"></script>
  <script>
    var map;
    require([
      "esri/map",
      "esri/dijit/Search",
      "esri/arcgis/utils",
      "esri/dijit/Legend",
      "esri/layers/ArcGISTiledMapServiceLayer",
      "esri/layers/ArcGISDynamicMapServiceLayer",
      "dojo/dom",
      "dojo/dom-construct",
      "dojo/parser",
      "dojo/_base/array",
      "esri/graphic",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/geometry/screenUtils",
      "dojo/query",
      "dojo/_base/Color",
      "dijit/form/CheckBox",
      "dijit/layout/AccordionContainer",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/domReady!"
    ],

      function (
        Map, Search, utils, Legend, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
        dom, domConstruct,
        parser, arrayUtils, Graphic, SimpleMarkerSymbol, screenUtils, query, Color, CheckBox
      ) {

        parser.parse();

        var legendLayers = [];

        map = new Map("map", {
          basemap: "topo",
          center: [10, 23],
          zoom: 2
        });

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

        // duplicate this for each layer - use dynamic layer service for those types
        var LADALandUse = new ArcGISTiledMapServiceLayer("http://tiles.arcgis.com/tiles/HVjI8GKrRtjcQ4Ry/arcgis/rest/services/LADA_Land_Use_Systems/MapServer", {
          id: 'landuse'
        });

        legendLayers.push({
          layer: LADALandUse,
          title: 'Land Use'
        });

        //         to here
        var WWFTerEco = new ArcGISTiledMapServiceLayer("http://tiles.arcgis.com/tiles/HVjI8GKrRtjcQ4Ry/arcgis/rest/services/LADA_Land_Use_Systems/MapServer", {
          id: 'WWFTerEco'
        });

        legendLayers.push({
          layer: WWFTerEco,
          title: 'WWF Terrestrial Ecoregion'
        });

        var climateLayer = new ArcGISTiledMapServiceLayer("http://tiles.arcgis.com/tiles/HVjI8GKrRtjcQ4Ry/arcgis/rest/services/LADA_Land_Use_Systems/MapServer", {
          id: 'climate'
        });

        legendLayers.push({
          layer: climateLayer,
          title: "Climate"
        });

        map.on('layers-add-result', function () {
          var legend = new Legend({
            map: map,
            layerInfos: legendLayers
          }, "legendDiv");
          legend.startup();
        });

        map.on('layers-add-result', function () {
          //add check boxes
          arrayUtils.forEach(legendLayers, function (layer) {
            var layerName = layer.title;
            var checkBox = new CheckBox({
              name: "checkBox" + layer.layer.id,
              value: layer.layer.id,
              checked: layer.layer.visible
            });

            checkBox.on("change", function () {
              var targetLayer = map.getLayer(this.value);
              targetLayer.setVisibility(!targetLayer.visible);
              this.checked = targetLayer.visible;
            });

            //add the check box and label to the toc
            domConstruct.place(checkBox.domNode, dom.byId("toggle"), "after");
            var checkLabel = domConstruct.create('label', {
              'for': checkBox.name,
              innerHTML: layerName
            }, checkBox.domNode, "after");
            domConstruct.place("<br />", checkLabel, "after");
          });
        });

        map.addLayers([climateLayer, LADALandUse, WWFTerEco]); /*add the layer var here*/
      });
  </script>
</head>

<body class="claro">
<!--[if IE 7]>
<style>
  html, body {
    margin: 0;
  }
</style>
<![endif]-->
<div id="content"
     data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">

  <div id="rightPane"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'right'">

    <div data-dojo-type="dijit/layout/AccordionContainer">
      <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
           data-dojo-props="title:'Legend', selected:true">
        <div id="legendDiv"></div>
      </div>
      <div data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="title:'Pane 2'">
        This pane could contain tools or additional content
      </div>
    </div>
  </div>
  <div id="map"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'center'"
       style="overflow:hidden;">
  </div>
  <div id="search"></div>
</div>
</body>

</html>

[SteveCline]

That solved it.  Looks like my require list was wrong.  Thanks.

Any idea if it is possible to control how much the search feature zooms in?  I would like to decrease the zoom.

[RobertScheitlin__GISP]

Steve,

   The zoom scale is only used  If the result does not have an associated extent, specify this number to use as the zoom scale for the result.

So If your data is a polygon, or polyline then the zoom scale is not used, but if you are dealing with points then you can set the zoomScale.