Select and highlight feature layer

567
5
Jump to solution
04-22-2014 01:30 AM
MinxueChen
New Contributor II
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>
0 Kudos
1 Solution

Accepted Solutions
MichaelVolz
Esteemed Contributor
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

View solution in original post

0 Kudos
5 Replies
JakeSkinner
Esri Esteemed Contributor
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);
0 Kudos
MinxueChen
New Contributor II
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?
0 Kudos
MichaelVolz
Esteemed Contributor
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

View solution in original post

0 Kudos
MichaelVolz
Esteemed Contributor
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.
0 Kudos
MinxueChen
New Contributor II
Hi mvolz47 ,
After I change the wjid in outSpatialReference, I can finally see the highlight!
Thank you very much!!
0 Kudos