topic Re: Search Layer and Zoom to Layer-Arcgis JavaScript API in ArcGIS Server with JavaScript API Questions

Search Layer and Zoom to Layer-Arcgis JavaScript API

Muqit_Zoarder — Tue, 19 Apr 2016 08:47:36 GMT

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

Re: Search Layer and Zoom to Layer-Arcgis JavaScript API

RobertScheitlin__GISP — Tue, 19 Apr 2016 14:22:38 GMT

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

Re: Search Layer and Zoom to Layer-Arcgis JavaScript API

Muqit_Zoarder — Wed, 20 Apr 2016 13:15:44 GMT

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

Re: Search Layer and Zoom to Layer-Arcgis JavaScript API

RobertScheitlin__GISP — Wed, 20 Apr 2016 13:26:23 GMT

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

Re: Search Layer and Zoom to Layer-Arcgis JavaScript API

Muqit_Zoarder — Wed, 20 Apr 2016 13:33:52 GMT

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

}

});

Re: Search Layer and Zoom to Layer-Arcgis JavaScript API

RobertScheitlin__GISP — Wed, 20 Apr 2016 13:38:46 GMT

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.

Re: Search Layer and Zoom to Layer-Arcgis JavaScript API

Muqit_Zoarder — Wed, 20 Apr 2016 13:54:14 GMT

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?

Re: Search Layer and Zoom to Layer-Arcgis JavaScript API

RobertScheitlin__GISP — Wed, 20 Apr 2016 14:00:31 GMT

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.

Re: Search Layer and Zoom to Layer-Arcgis JavaScript API

Muqit_Zoarder — Wed, 20 Apr 2016 14:56:07 GMT

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)

Re: Search Layer and Zoom to Layer-Arcgis JavaScript API

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:57:24 GMT

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/FeatureServer/0"),
            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.