Highlight features by geometry : Sample Code

<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Highlight features by geometry</title> <link rel="stylesheet" href="https://js.arcgis.com/3.31/esri/css/esri.css"/> <style> html, body, #mapDiv{ padding: 0; margin: 0; height: 100%; } </style> <script src="https://js.arcgis.com/3.31/"></script> <script> var map; // Add layer Class with their AMD module require([ "esri/map", "dojo/dom", "dojo/on", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/tasks/QueryTask", "esri/tasks/query" ], function (Map, dom, on, ArcGISDynamicMapServiceLayer,SimpleMarkerSymbol, SimpleLineSymbol,SimpleFillSymbol,QueryTask, Query) { // Ceate Map map = new Map("mapDiv", { basemap: "topo", center: [84.65, 26.43], // longitude, latitude zoom: 7 }); var layerurl = "https://gis.fmiscwrdbihar.gov.in/arcgis/rest/services/BEAMS_BASE/BASE/MapServer"; //Creates a new Layer object. var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer(layerurl, { "opacity" : 0.9 }); dynamicMapServiceLayer.setVisibleLayers([0,4,8]); map.addLayer(dynamicMapServiceLayer); // Add Layer to map on(dom.byId("clickMe"), "click", doBaseSearch); function doBaseSearch() { // var layerName; var searchLayerField; //var baseLayerId = BASElayer.visibleLayers; var searchLayerNameId = dom.byId("layerid").value; //baseLayerId.push(parseInt(searchLayerNameId)); //var basevisIds = baselayerIdss(baseLayerId); dynamicMapServiceLayer.setVisibleLayers([searchLayerNameId]); switch (searchLayerNameId) { case "0": searchLayerField = "NAME"; break; case "4": searchLayerField = "RD_NO"; break; case "8": searchLayerField = "BEAMS.V_DISTRICT.DIST_NAME"; break; } var searchLayerValue = dom.byId("layervalue").value; var searchExtentUrl = layerurl + "/" + searchLayerNameId; var queryTask = new esri.tasks.QueryTask(searchExtentUrl); var query = new esri.tasks.Query(); query.where = searchLayerField + " = '" + searchLayerValue + "'"; query.outSpatialReference = { wkid: 102100 }; query.returnGeometry = true; // console.log(query); queryTask.execute(query, addPointsToMap); var highlightSymbol; //add points to map and set their symbology + info template function addPointsToMap(featureSet) { map.graphics.clear(); dojo.forEach(featureSet.features, function (feature) { if (feature.geometry.type === "point" || feature.geometry.type === "multipoint") { highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0, 0, 255])); } else if (feature.geometry.type === "line" || feature.geometry.type === "polyline") { highlightSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2); } else if (feature.geometry.type === "polygon") { highlightSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new esri.Color([255, 0, 0]), 2), new esri.Color([255, 255, 0, 0.25])); } map.graphics.add(feature.setSymbol(highlightSymbol)); var extent = feature._extent; map.setExtent(extent, true); }); } } }); </script> </head> <body> <div id="mapDiv"> <select id="layerid" class="form-control"> <option selected="selected" value="">Select Layer</option> <option value="8">District Boundary</option> <option value="4">Road Network</option> <option value="0">Police Station</option></select> <select id="layervalue" class="form-control"> <option selected="selected" value="">Select Layer Value</option> <option value="Patna">Patna</option> <option value="NH-28B">NH-28B</option> <option value="Hajipur police station">Hajipur police station</option></select> <input id="clickMe" type="button" class="btn btn-info" value="Search" /> </div> </body></html>