topic Re: Search is not linked to map in ArcGIS API in ArcGIS JavaScript Maps SDK Questions

Search is not linked to map in ArcGIS API

SteveCline — Sat, 02 May 2015 03:40:51 GMT

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.

Re: Search is not linked to map in ArcGIS API

RobertScheitlin__GISP — Sat, 11 Dec 2021 10:09:24 GMT

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>

Re: Search is not linked to map in ArcGIS API

SteveCline — Tue, 05 May 2015 00:46:05 GMT

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.

Re: Search is not linked to map in ArcGIS API

RobertScheitlin__GISP — Tue, 05 May 2015 00:54:48 GMT

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.