Search Layer and Zoom to Layer-Arcgis JavaScript API

5869
9
04-19-2016 01:47 AM
Muqit_Zoarder
Occasional Contributor

There is a default search box in ArcGIS javascript API dojo lib to search by place name or by city. Now i want to add a intelligent search box to search within the layer. I would like to know how to add such search box and implement function to search within the layer.I have a ArcGIS javascript API application where I have 30 layers and I want to search the layers accoding to name in search box and fly to that corresponding layer. Please suggest me the right way.

I have attached the image of my application with all the layers (arcgisdynamicmaplayers).

0 Kudos
9 Replies
RobertScheitlin__GISP
MVP Emeritus

Muqit,

If you use the Search widget instead of the deprecated Geocoder widget then you will be able to search FeatureLayer sources as well as geocoder sources:

Search | API Reference | ArcGIS API for JavaScript

Search multiple sources | ArcGIS API for JavaScript 

Muqit_Zoarder
Occasional Contributor

Hello Robert, thanks for your reply. I saw this example before in ArcGIS for Javascript API sandbox. My case is little different. If you see my screenshort , there are 30 layers inside one mapservice. and I want to search by the name of the layer. The example belongs to one or more featurelayer table_fields value searching option. So in my case the layer names are not in any table, so how can I make the search?

Thanks

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Muqit,

  The search widget does not care if the layers are added to the map or not. So in your case you would need to add the FeatureLayer sources to the Search widget (all 30 if you really need to search them all).

Muqit_Zoarder
Occasional Contributor

I am not sure where to put the search widget and which field eaxctly i need to query, can you please suggest me? My codes are as follows:

var map, operational;

require(["dojo/_base/connect",

"dojo/dom", "dojo/parser", "dojo/on", "dojo/_base/Color",

"esri/IdentityManager",

"esri/map",

"esri/InfoTemplate",

"esri/geometry/Extent",

"esri/dijit/Measurement",

"esri/layers/FeatureLayer",

"esri/layers/ArcGISTiledMapServiceLayer",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/symbols/SimpleFillSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/renderers/ClassBreaksRenderer",

"agsjs/dijit/TOC",

"esri/dijit/BasemapGallery",

"esri/arcgis/utils",

"esri/tasks/IdentifyTask",

"esri/tasks/IdentifyParameters",

"esri/tasks/QueryTask",

"esri/dijit/Popup",

"esri/dijit/HomeButton",

"esri/dijit/Geocoder",

"dojo/_base/array",

"esri/Color",

"dojo/dom-construct",

"esri/dijit/Scalebar",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dijit/TitlePane",

"dojo/fx", "dojo/domReady!"],

function init(connect, dom, parser, on, Color, IdentityManager, Map, InfoTemplate, Extent, Measurement, FeatureLayer, ArcGISTiledMapServiceLayer,

ArcGISDynamicMapServiceLayer, SimpleFillSymbol, SimpleLineSymbol, ClassBreaksRenderer, TOC, BasemapGallery, arcgisUtils,

IdentifyTask, IdentifyParameters, QueryTask, Popup, HomeButton, Geocoder, arrayUtils, Color, domConstruct) {

  parser.parse();

  map = new Map("mapDiv", {

  center: [11.8802278, 51.3902768 ] ,

  zoom: 17,

  basemap: "satellite",

  //slider: false

  });

  var geocoder = new Geocoder({

  map: map

  }, "search");

  geocoder.startup();

  var basemapGallery = new BasemapGallery({

  showArcGISBasemaps: true,

  map: map

  }, "basemapGallery");

  basemapGallery.startup();

  basemapGallery.on("error", function (msg) {

  console.log("basemap gallery error: ", msg);

  });

  var scalebar = new esri.dijit.Scalebar({ map: map, scalebarUnit: "dual" });

  var home = new HomeButton({

  map: map

  }, "HomeButton");

  home.startup();

  var measurement = new Measurement({

  map: map

  }, dom.byId("measurementDiv"));

  measurement.startup();

  operational = "https://192.168.224.13/arcgis/rest/services/LTFE_Sites_DEUTSCHLAND/MapServer";

  var operationalLayer = new esri.layers.ArcGISDynamicMapServiceLayer(operational, { id: 'Dynamic' }

  );

  map.addLayers([operationalLayer]);

  // Add Table of Contents Start 

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

  try {

  var toc = new TOC({

  map: map,

  layerInfos: [{

  layer: operationalLayer,

  title: "LTFE Sites"

  }]

  }, "legendDiv");

  toc.startup();

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

  console.log("TOC loaded");

  });

  }

  catch (e) { console.error(e.message); }

  });

  functionMode = true;

  on(map, "click", function (evt) {

  if (functionMode == true) {

  executeIdentifyTask(evt);

  } else {

  return;

  }

  });

  identifyTask = new IdentifyTask(operational);

  identifyParams = new IdentifyParameters();

  identifyParams.tolerance = 3;

  identifyParams.returnGeometry = true;

  identifyParams.layerIds = operationalLayer.visibleLayers;

  identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;

  identifyParams.width = map.width;

  identifyParams.height = map.height;

  function executeIdentifyTask(evt) {

  identifyParams.geometry = evt.mapPoint;

  identifyParams.mapExtent = map.extent;

  identifyParams.layerIds = operationalLayer.visibleLayers;

  var deferred = identifyTask.execute(identifyParams);

  deferred.addCallback(function (response) {

  return dojo.map(response, function (result) {

  var feature = result.feature;

  feature.attributes.layerName = result.layerName;

  var template = new InfoTemplate("", "${*}");

  feature.setInfoTemplate(template);

  return feature;

  });

  });

  map.infoWindow.setFeatures([deferred]);

  map.infoWindow.show(evt.mapPoint);

  }

});

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Muqit,

  You would replace the Geocoder widget with the Search widget and follow the code sample in my second link previously posted to understand how to configure multiple search sources.

0 Kudos
Muqit_Zoarder
Occasional Contributor

Hello, i understand the widget problem. But what should i use for the queryfield! here . I am not using a specific layer like /mapserver/0 or 1 or 2 . See the image , i am using commonly the map service. How could i use the layer name then?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Muqit,

  As I said it does not matter if you are using the whole map service in the map. The Search Widget requires you to add a FeatureLayer (a specific layer of the map service) that is why i mentioned that you will need to add all 30 if you really need to search all of them.

0 Kudos
Muqit_Zoarder
Occasional Contributor

Hi, i have tried according to your details. But its not working. See my added code. Still now i have the same question how could i search using the layer name ? Becase Layer name is not a layer_table Field. I want to search (for example: BadLauch1978)

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Muqit,

  I am struggling to see why you are not getting this if you are reading the help documentation for the Search widget.

Here is an example search source:

sources.push({
            featureLayer: new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CongressionalDistricts/FeatureServ..."),
            searchFields: ["DISTRICTID"],
            displayField: "DISTRICTID",
            exactMatch: false,
            outFields: ["DISTRICTID", "NAME", "PARTY"],
            name: "Congressional Districts",
            placeholder: "3708",
            maxResults: 6,
            maxSuggestions: 6,

            //Create an InfoTemplate and include three fields
            infoTemplate: new InfoTemplate("Congressional District", "District ID: ${DISTRICTID}</br>Name: ${NAME}</br>Party Affiliation: ${PARTY}"),
            enableSuggestions: true,
            minCharacters: 0
        });

Notice this source has a "name" property that will be displayed in the Search widgets dropdown list.