nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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.

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

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>

All comments

RobertScheitlin__GISP

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.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.