topic Re: highlight point from dGrid selection - graphics not displaying, API reference iss in ArcGIS JavaScript Maps SDK Questions

highlight point from dGrid selection - graphics not displaying, API reference issue?

TracySchloss — Fri, 27 Sep 2013 15:04:53 GMT

I have a query that executes to populate a dGrid. I'd like to be able to click on a row in the grid and highlight the feature on the screen. Since the row doesn't have any knowledge of the geometry, I have a 2nd query. This query is executing just fine, but I'm having troubles creating the graphic and adding it to either the map graphics or a graphicsLayer. I don't much care which, I think my problem is in the definition of the graphic I haven't been using AMD very long, so maybe I'm getting a little lost there. I'm confused by the fact that some examples and API references show dojo.require of "esri/graphic" and others are "esri/Graphic". Is that just an error? Only esri/graphic seems to work.

Plus the API reference for Graphic lists geometry, symbol, attributes and infoTemplate all as required elements in the constructor. But lots of examples only have geometry and symbol or even just geometry. Why all the inconsistency?

function highlightGridSelection(event, dGrid) {
    selGraphicsLayer.clear();
    var row = dGrid.row(event);
    var query = new esri.tasks.Query();
    var schName = [row.data.facility];
    var cityName = [row.data.city];
    query.where = "Facility = '" + schName + "' and " + "City = '" + cityName + "'";
    query.returnGeometry = true;
    query.outFields = ["*"];
    query.outSpatialReference = spatialReference;
    var queryTask = new esri.tasks.QueryTask(educationLayer.url+"/0");
    queryTask.execute(query, highlightResults);
}  

function highlightResults(results) {
    if (results) {//Note:  I am consistently getting results from the query task, it's not like it's blank
      var feature = results.features[0];//already esri.Graphic?
      var graphic = new Graphic(feature.geometry, highlightMarkerSymbol);  //this seems to be the problem line 
      selGraphicsLayer.add(graphic);//
   //  app.map.graphics.add(graphic);
    } else {
        console.log("No records found");
    }
}

Re: highlight point from dGrid selection - graphics not displaying, API reference iss

SteveCole — Sat, 11 Dec 2021 18:32:57 GMT

You don't elaborate on the error that gets thrown. Is it a type mismatch? I ask because maybe the symbol you're passing for the graphic creation isn't compatible (point vs line, line vs polygon, etc). Perhaps in your highlightResults function, you can do something like this:

 markerSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 28,
  new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
  new dojo.Color([255,255,255]), 2),
  new dojo.Color([255,0,0,0.85]));
 lineSymbol = new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID,
  new dojo.Color([255,0,0]), 10, esri.symbol.CartographicLineSymbol.CAP_ROUND,
  esri.symbol.CartographicLineSymbol.JOIN_MITER, 5);
 fillSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
  new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
  new dojo.Color([255,0,0]), 2),new dojo.Color([255,255,0,0.85]));

 // figure out which symbol to use
 var symbol, g;
 if ( feature.geometry.type === "point" || feature.geometry.type === "multipoint") {
  symbol = markerSymbol;
 } else if ( feature.geometry.type === "line" || feature.geometry.type === "polyline") {
  symbol = lineSymbol;
 }
 else {
  symbol = fillSymbol;
 }
 
 g = new esri.Graphic(evt, symbol, null, null);
        selGraphicsLayer.add(g);

Re: highlight point from dGrid selection - graphics not displaying, API reference iss

KenBuja — Sat, 11 Dec 2021 18:32:59 GMT

In my application, when I get the results from my IdentifyTask, I put the returned graphics onto a graphics layer (layerResultsGraphic). I have two functions to highlight a row. When the user mouses over the dGrid row, the feature gets highlighted. When the user clicks on the row, the feature gets flashed.

    function findGraphicByAttribute(attributes) {

        for (i = 0; i < layerResultsGraphic.graphics.length; i++) {
            if (JSON.stringify(layerResultsGraphic.graphics.attributes) === JSON.stringify(attributes)) { return layerResultsGraphic.graphics; }
        }
        return null;
    }

//this function will highlight the selected feature
    function gridEnter(e) {
        map.graphics.clear();

        var gridId = e.currentTarget.id;
        var selectedGrid = dijit.byId(gridId);

        var row = selectedGrid.row(e);

        graphicHighlight = findGraphicByAttribute(row.data);
        if (graphicHighlight !== null) {
            switch (graphicHighlight.geometry.type) {
                case "point": case "multipoint":
                    map.graphics.add(new esri.Graphic(graphicHighlight.geometry, symbolHighlightPoint));
                    break;
                case "polyline":
                    map.graphics.add(new esri.Graphic(graphicHighlight.geometry, symbolHighlightPolyline));
                    break;
                case "polygon": case "extent":
                    map.graphics.add(new esri.Graphic(graphicHighlight.geometry, symbolHighlightPolygon));
                    break;
            }
        }
    }

//this function will "flash" the selected feature
    function gridSelect(e) {
        var graphicFlash;
        var gridId = e.currentTarget.id;
        var selectedGrid = dijit.byId(gridId);
        var row = selectedGrid.row(e);

        graphicHighlight = findGraphicByAttribute(row.data);

        if (graphicHighlight !== null) {
            switch (graphicHighlight.geometry.type) {
                case "point": case "multipoint":
                    graphicFlash = new esri.Graphic(graphicHighlight.geometry, symbolFlashPoint)
                    break;
                case "polyline":
                    graphicFlash = new esri.Graphic(graphicHighlight.geometry, symbolFlashPolyline);
                    break;
                case "polygon": case "extent":
                    graphicFlash = new esri.Graphic(graphicHighlight.geometry, symbolFlashPolygon);
                    break;
            }
            map.graphics.add(graphicFlash);
        }

        var shape = graphicFlash.getDojoShape();
        var animStroke = fx.animateStroke({
            shape: shape,
            duration: 500,
            color: { end: new dojo.Color([0, 0, 0, 0]) }
        });
        var animFill = fx.animateFill({
            shape: shape,
            duration: 500,
            color: { end: new dojo.Color([0, 0, 0, 0]) }
        });
        var anim = dojo.fx.combine([animStroke, animFill]).play();
        var animConnect = dojo.connect(anim, "onEnd", function () {
            map.graphics.remove(graphicFlash);
        });
    }

Re: highlight point from dGrid selection - graphics not displaying, API reference iss

TracySchloss — Fri, 27 Sep 2013 15:39:55 GMT

I'm not really getting an error. That would be too easy! I've set a breakpoint at the top of the if (results) statement and just start stepping through. I get a value for feature, it says it's class of esri.Graphic, but when I step to the definition of graphic, it takes me into what looks like the ESRI TimeReference.js . This has been happening to me lately every time I try to define something improperly! Same location, no matter what my error is.

I have the same code in a non-AMD project and it works just fine there. I can't help but think I'm not requiring the right components, or just not the right way. This is my first attempt using AMD and I'm keep getting lost in the weeds of syntax.

Re: highlight point from dGrid selection - graphics not displaying, API reference iss

GeorgeSimpson — Sat, 11 Dec 2021 18:33:02 GMT

I had a similar problem that I've found a workaround for. Still not sure of the root cause. In my case, I had to construct the graphic using the feature, not feature.geometry. Before I did that, I had to set the spatialReference on the feature.geometry. I also had to set the symbol after I constructed the Graphic. Anyway, here's how I'm doing it for now:

arrayUtil.forEach(features, function (f) {
                 //_highlightLayer.add(f);
                 var symbol;


                 if (f.geometry.type === "point" || f.geometry.type === "multipoint") {
                     symbol = config.highlightSymbols.markerSymbol;
                 } else if (f.geometry.type === "line" || f.geometry.type === "polyline") {
                     symbol = config.highlightSymbols.lineSymbol;
                 }
                 else {
                     symbol = config.highlightSymbols.fillSymbol;
                 }

                 f.geometry.spatialReference = map.spatialReference;

                 var g = new Graphic(f, symbol);
                 g.setSymbol(symbol);


                 _highlightLayer.add(g);

             });

Re: highlight point from dGrid selection - graphics not displaying, API reference iss

KenBuja — Sat, 11 Dec 2021 18:33:05 GMT

Your require modules and function arguments aren't agreeing

require([
        "dojo/parser","esri/config", "esri/map", "esri/dijit/InfoWindow", "esri/dijit/Popup","esri/SpatialReference", "esri/geometry/Extent", 
        "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/GraphicsLayer",
        "esri/dijit/BasemapGallery","agsjs/dijit/TOC","esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters", "esri/InfoTemplate", "esri/tasks/QueryTask",
        "esri/tasks/query", "esri/tasks/GeometryService","dojo/_base/array", "dojo/_base/connect", "dojo/on", "dojo/dom","dijit/registry", "dojo/promise/all","esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/_base/Color", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
        "dijit/TitlePane", "dijit/form/Select", "dgrid/Grid", "esri/graphic", "dojo/domReady!"
      ], function(
        parser, esriConfig, Map, InfoWindow, Popup, SpatialReference, Extent, ArcGISDynamicMapServiceLayer, GraphicsLayer, BasemapGallery, TOC, IdentifyTask, IdentifyParameters,
       InfoTemplate, QueryTask, Query, GeometryService, arrayUtils, connect, on, dom, registry, all, SimpleMarkerSymbol, 
        SimpleFillSymbol, SimpleLineSymbol, Color, BorderContainer, ContentPane, TitlePane, Select, Grid, Graphic) {