Right to Graphic Layer Return Results

[jaykapalczynski]

I am trying to write to a graphic layer with a user map click.  

Using a hit test and allowing the user to click counties in the map and writing them to a graphic layer

these are then seen displayed in the map as the user clicks on them

this seems to work fine

viewright.on("click", function (evt) {
    viewright.hitTest(evt.screenPoint).then(function (response) {
        var result = response.results[0];                  
        var symbol = {
            type: "simple-fill",  // autocasts as new SimpleFillSymbol()
            color: [51, 51, 204, 0.9],
            style: "solid",
            outline: {
               color: "white",
               width: 1
            }
        }; 
        var selectionGraphic = result.graphic;
        selectionGraphic.symbol = symbol;
        resultsLayer4.add(selectionGraphic);
    });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I then have a button that reads the Graphics Layer and tries to return the results.

var selectButton1 = document.getElementById("select-by-polygon");

selectButton1.addEventListener("click", function () {
   viewright.whenLayerView(resultsLayer4).then(function (lyrView) {
       lyrView.watch("updating", function (val) {
          if (!val) { 
             lyrView.queryFeatures().then(function (results) {
                console.log(results); 
             });
          }
       });
   });
});‍‍‍‍‍‍‍‍‍‍‍‍‍

I am unsure if I am tackling this the right way....

I want the user to click the map and select counties and write them to a graphics layer. 

I then need to read this graphics layer and get the unique id of each feature in the graphics layer.

QUESTIONS:

1. Am I correctly writing to the Graphics Layer?  Is there a better way to do this?
2. Is there a better way to query the Graphics Layer to get a list of unique IDs from a Field value?
3. Is there a way to click on a County that is already in the Graphics Layer and then remove it and have the blue graphic removed?

[jaykapalczynski]

I am having difficulties reading the graphics layer that I think I am writing to.

Just want a for loop of some sort to read the Graphics Layer when the button is clicked to read the values in a particular field for starters.

[RobertScheitlin__GISP · Accepted solution]

Jay this is how I would do that:

var selectButton1 = document.getElementById("select-by-polygon");

selectButton1.addEventListener("click", function () {
  var atribArray = [];
  resultsLayer4.graphics.map(function(gra){
    atribArray.push(gra.attributes.yourAttributeName);
  });
  console.log(atribArray);
});‍‍‍‍‍‍‍‍‍

[jaykapalczynski]

OK that helped a bit...I can now simply read the Graphic Layer as I click the map and add to it....

I have one twist....as I am adding graphics to the graphics layer every time I click a feature in the map I want to determine if they exist.  If they exist then remove them from the Graphics Layer.  When this occurs the graphic in the map should disappear.

I think I can do this with an IF Else?????

Does this make sense.....now just have to dig on how to remove a graphics feature from the Graphics layer.  I assume this can be done?

        var atribArray = [];

        viewright.on("click", function (evt) {

            // Search for graphics at the clicked location
            viewright.hitTest(evt.screenPoint).then(function (response) {

                var result = response.results[0];
                var FIPS = result.graphic.attributes.FIPS2;
                       
                var symbol = {
                    type: "simple-fill",  // autocasts as new SimpleFillSymbol()
                    color: [51, 51, 204, 0.9],
                    style: "solid",
                    outline: {  // autocasts as new SimpleLineSymbol()
                        color: "white",
                        width: 1
                    }
                };

                // Set variable to the newly clicked feature
                var selectionGraphic = result.graphic;
                selectionGraphic.symbol = symbol;

                // Populate Array with each map click
                resultsLayer4.graphics.map(function (gra) {
                    atribArray.push(gra.attributes.FIPS2);
                });
                // Test to see if this newly clicked feature exists in the Graphics Layer
                var testForFIPS = atribArray.includes(FIPS);

                if (testForFIPS) {  // IF TRUE
                    // DONT ADD AND REMOVE THIS ONE FROM THE GRAPHICS LAYER
                } else {
                    // ADD THIS ONE BECAUSE IT DOES NOT EXIST
                    resultsLayer4.add(selectionGraphic);
                }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[jaykapalczynski]

testing this

if (testForFIPS) {
    // DONT ADD AND REMOVE THIS ONE FROM THE GRAPHICS LAYER
    resultsLayer4.remove(selectionGraphic);
} else {
    resultsLayer4.add(selectionGraphic);
}‍‍‍‍‍‍

[RobertScheitlin__GISP]

You got it

[Anonymous User]

Hi jay kapalczynski‌,

You can retrieve graphiclayer back by id. 

So make sure you instantiate the graphic layer like this.

const highlighterGraphicLayer = new GraphicsLayer({id:"highlightergl"});

and add it to map with map.add(highlighterGraphicLayer) statement.

and retrieve back by.

map.findLayerById("highlightergl")

However, you shall not need to find that layer again since you already hold that instance in a variable.

Have a sample in codepen. 

https://codepen.io/thanhtetaung/pen/yLYaNjm 

These might help your question 1 and 3.

For question 2.

You probably want to look at my codepen https://codepen.io/thanhtetaung/pen/yLYaMMp , check the console log.