AnsweredAssumed Answered

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

Question asked by schlot on Sep 27, 2013
Latest reply on Sep 27, 2013 by kenbuja

Like • Show 0 Likes0
Comment • 5

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");
    }
}

No one else has this question

Outcomes

5 Replies

evtguy Sep 27, 2013 8:22 AM

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);

Actions

kenbuja Sep 27, 2013 8:24 AM

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[i].attributes) === JSON.stringify(attributes)) { return layerResultsGraphic.graphics[i]; }
        }
        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);
        });
    }

Actions

schlot Sep 27, 2013 8:39 AM
Mark Correct
Correct Answer
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.
Attachments
- forum092713.zip4.4 KB
Like • Show 0 Likes0
Actions

gsimpson4 Sep 27, 2013 9:36 AM

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);

             });

Actions

kenbuja Sep 27, 2013 9:50 AM

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) {

Actions

GeoNet

The Esri Community

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

Outcomes

Attachments

Related Content

Recommended Content