Select and highlight feature layer

MinxueChen — Tue, 22 Apr 2014 08:30:43 GMT

Hello!
I'm trying to add a feature layer(a simply line feature, storing locally in arcgis server) to a map. Then select it for querying and highlighting. The query part works fine. But I couldn't get it highlighted. Can someone have a look at my code and show me the hint?
Thank you very much for help.

<!DOCTYPE html> <html>  <head>   <title>Pigeon Schematics</title>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">      <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css" />   <style>      html, body {        width: 100%;        height: 100%;        margin: 0;      }       /*left*/      #leftContainer{        width: 12%;      }            /*middle*/      #middleContainer{        padding: 0;            }      #handle{        background: url(../handle.png) center center no-repeat;          cursor: ew-resize;          width: 10px;          position: absolute;          top: 0;          right: 0;          bottom: 0;      }      #mapDiv1{         padding: 0;         height: 70%;         }        #mapDiv2{         padding: 0;         height: 30%;        }                /*right*/        #rightContainer{          padding:0;          width:10%;          font-size: 15px;                  }        #legendDiv{          font-size: 10px;        }        #att1{          height:50%;        }        #att2{          height:50%;        }   </style>      <script src="http://js.arcgis.com/3.9/"></script>   <script>         // function init() {         // //alert("Dojo ready, version:" + dojo.version);         // // More initialization here       // }    require([     "esri/map",     "esri/InfoTemplate",         "esri/symbols/SimpleLineSymbol",         "esri/symbols/SimpleFillSymbol",         "esri/Color",         "esri/arcgis/utils",     "esri/dijit/Legend",     "esri/layers/FeatureLayer",     "esri/layers/ArcGISDynamicMapServiceLayer",     "esri/graphic",      "esri/tasks/query", "esri/tasks/QueryTask",          "dojo/parser",         "dijit/layout/BorderContainer",         "dijit/layout/ContentPane",          "dijit/layout/AccordionContainer",         "dijit/layout/TabContainer",               "dojo/domReady!"     ], function(Map, InfoTemplate, SimpleLineSymbol, SimpleFillSymbol, Color, arcgisUtils, Legend, FeatureLayer, ArcGISDynamicMapServiceLayer, Graphic, Query, QueryTask, parser){       parser.parse();                   //add services     var map1;           var url3 = "http://localhost:6080/arcgis/rest/services/Pigeon/PigeonShape/FeatureServer/3";                                      map1 = new Map("mapDiv1",{             basemap: "topo",             center: [6.161323, 52.256595],             zoom: 16,             slider: false,           });                      var featureLayerSpoor = new FeatureLayer(url3,              {               mode: FeatureLayer.MODE_ONDEMAND,               outFields: ["*"]             });           map1.addLayers([featureLayerSein, featureLayerWisselNummber, featureLayerSpoor, featureLayerWissel]);                 //add legend     var legend = new Legend({      map: map1     },"legendDiv");     legend.startup();        var selectionSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,255,0,0]), 3);     featureLayerSpoor.setSelectionSymbol(selectionSymbol);           //map1 Click evt           // map1.on("click", executeQueryTask);                               queryTaskSpoor = new QueryTask(url3);           querySpoor = new Query();           querySpoor.outSpatialReference = {"wkid":28992};           querySpoor.returnGeometry = true;           querySpoor.outFields = ["*"];                      dojo.connect(map1, "onClick", executeQueryTask);                     dojo.connect(map1.infoWindow, "onHide");                                function executeQueryTask(evt){             map1.infoWindow.hide();             map1.graphics.clear();                                          var centerPoint = new esri.geometry.Point(evt.mapPoint.x,evt.mapPoint.y,evt.mapPoint.spatialReference);             var mapWidth = map1.extent.getWidth();               //Divide width in map units by width in pixels             var pixelWidth = mapWidth/map1.width;             var tolerance = 8 * pixelWidth;             console.log(mapWidth, tolerance);             //Build tolerance envelope and set it as the query geometry             var queryExtent = new esri.geometry.Extent(1,1,tolerance,tolerance,evt.mapPoint.spatialReference);              querySpoor.geometry = queryExtent.centerAt(centerPoint);                        queryTaskSpoor.execute(querySpoor, function(fset){               showFeature(fset.features[0],evt)});                        };                       function showFeature(feature, evt){               map1.graphics.clear();                            var graphic = feature;                // graphic.setSymbol(symbol);                       var graphic =new Graphic(feature.geometry, selectionSymbol);               // graphic.setInfoTemplate(infoTemplate_spoorshp);               console.log(feature);                  console.log(graphic);                                map1.graphics.add(graphic);               var attr = feature.attributes;                                       var content_spoorshp = "objectid_1 : " + attr.objectid_1                     + "<br />spoornumme : " + attr.spoornumme                     + "<br />objectnaam : " + attr.objectnaam                     + "<br />objectid : " + attr.objectid                      + "<br />van : " + attr.kmvan                       + "<br />to : " + attr.kmtot                        + "<br />length : " + attr.shape_leng;                                       map1.infoWindow.setTitle("Spoor");               map1.infoWindow.setContent(content_spoorshp);               (evt) ? map1.infoWindow.show(evt.screenPoint,map1.getInfoWindowAnchor(evt.screenPoint)) : null;                       };     });   </script>  </head>   <body class="claro">     <div id="topContainer" data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%;">      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Pigeon Schematics</div>            <div id="leftContainer" data-dojo-type="dijit/layout/AccordionContainer" data-dojo-props="region:'left'">        <div data-dojo-type="dijit/layout/ContentPane"            data-dojo-props="title:'Tool', selected:true">         <div id="tool1"></div>       </div>       <div data-dojo-type="dijit/layout/ContentPane"            data-dojo-props="title:'Others'">         This pane could contain tools or additional content       </div>      </div>            <div id="middleContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'center', design:'sidebar'">       <div id="mapDiv1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" >       </div>       <div id="mapDiv2" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" >       </div>             </div>            <div id="rightContainer" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'right'" >       <div data-dojo-type="dijit/layout/ContentPane" title="Legend">         <div id="legendDiv"></div>       </div>       <div data-dojo-type="dijit/layout/ContentPane" title="Attribute">         <div id="att1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">1</div>         <div id="att2" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">2</div>       </div>      </div>            <div id="bottomContainer" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">CGI GEO-ICT</div>       </body> </html>

Re: Select and highlight feature layer

JakeSkinner — Tue, 22 Apr 2014 10:45:36 GMT

Hi Minxue,

It looks like you are specifying 100% transparency for the Color in the selection symbol. Change:

var selectionSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,255,0,0]), 3);

to:

var selectionSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,255,0]), 3);

Re: Select and highlight feature layer

MinxueChen — Wed, 23 Apr 2014 12:05:09 GMT

Hi Minxue,

It looks like you are specifying 100% transparency for the Color in the selection symbol. Change:
var selectionSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,255,0,0]), 3);
to:
var selectionSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,255,0]), 3);

Hi Jake,
Thank you for replying.
I did change the transparency, but it is still not highlighted.

What else shall I check?

Re: Select and highlight feature layer

MichaelVolz — Wed, 23 Apr 2014 12:35:57 GMT

In the following line of code:

map1.addLayers([featureLayerSein, featureLayerWisselNummber, featureLayerSpoor, featureLayerWissel]);

Are you using any layer besides featureLayerSpoor, as this appears to me to be the only layer you are adding to the map?

Change your wkid code from:
querySpoor.outSpatialReference = {"wkid":28992};

to

querySpoor.outSpatialReference = {"wkid":102100};

I believe this is the wkid of the topo basemap which you need to reproject your data to in order for the highlight to work.

Also, the highlight only works on every other click. I'm not sure how to fix this problem, but Chrome Developer Tools is generating this error with every other mouse click:

Uncaught TypeError: Cannot read property 'apply' of null init.js:239

Re: Select and highlight feature layer

MichaelVolz — Wed, 23 Apr 2014 14:20:42 GMT

Together with Jake's suggestion, your problem is now partially solved where it highlights a line on every other mouse click of a supported line feature.

Re: Select and highlight feature layer

MinxueChen — Thu, 24 Apr 2014 07:18:51 GMT

Hi mvolz47 ,
After I change the wjid in outSpatialReference, I can finally see the highlight!
Thank you very much!!

topic Re: Select and highlight feature layer in ArcGIS JavaScript Maps SDK Questions

Select and highlight feature layer

Re: Select and highlight feature layer

Re: Select and highlight feature layer

Re: Select and highlight feature layer

Re: Select and highlight feature layer

Re: Select and highlight feature layer