[GIS] Selecting/highlighting point feature in ArcGIS Server using JavaScript

arcgis-serverjavascript

How do you go about "selecting/hightlighting a feature" in the map control when a user clicks on a point in the map, all via ADF JavaScript?

I know it can be done server side with a selection graphics layer etc, so I am just wondering if it can be done client side.

Best Answer

Below I have put the code that I have used to display a black crosshair over a point feature in a map. It was quite simple in the end, but the overall implementation is a bit more involved and beyond the scope of this answer - but in essence -

  1. The user clicks on the map and I capture the coordinates.
  2. Coordinates are sent to webservice by XmlHttpRequest and a spatial filter is conducted.
  3. XML recieved from webservice after a successful spatial filter with results is found.
  4. The REAL x and y coordinates are passed back too from the spatial filter.

  5. These real x and y coordinates are used to place the graphic on the map - so it will only show if a successful query has been made - if not the graphic will never show - which is pretty much an emulation of the a select funcitonality.

    //you must use a unique ID each time you create a graphic
//this is incremented at the end of the drawGraphic function.
var graphicCount = 0; 
var newPoint = new ESRI.ADF.Geometries.Point(456465, 354141);
drawGraphic(newPoint);

    function drawGraphic(point) {
        //I am using a png graphic file here to mark a point in a kind of crosshair
        //24x24 pixels big and it looks pretty cool - make sure you have the background
        //transparent or else you won't be able to see underneath the graphic.

        var symbol = new ESRI.ADF.Graphics.MarkerSymbol("blacktarget.png", 12, 12, "");
        var coords = point.toString("<br>", ",");
        var attributes = { "ID": graphicCount, "featureCoordinates": coords };

        graphicFeature = $create(ESRI.ADF.Graphics.GraphicFeature, { "id": graphicCount.toString(), "geometry": point, "symbol": symbol, "attributes": attributes});
        map.addGraphic(graphicFeature);
        graphicCount++;
        }
Related Question