topic Re: jsapi 4.0 popup: set highlight graphic on feature layer click? in ArcGIS JavaScript Maps SDK Questions

jsapi 4.0 popup: set highlight graphic on feature layer click?

DavidColey — Wed, 21 Sep 2016 18:44:30 GMT

Hi - in 3.x defining a highlight grapic for the Popup widget when clicking a feature layer was as simple as setting up a fill symbol with a style, a color and an outline or line symbol as a simple line symbol. In looking through the api, I just can't seem to locate where or how I define a highlight graphic as part of the 4.x Popup widget. Is a highlight graphic now set on the mapView? Can anyone point me to an example somewhere?

Thanks-

David

Re: jsapi 4.0 popup: set highlight graphic on feature layer click?

DavidColey — Sat, 11 Dec 2021 07:04:10 GMT

We solved this, sort of, using hitTest property:

app.mapView.on("click", function(event) { //hitTest used to create a selection graphic for the popup
    app.mapView.hitTest(event.screenPoint).then(function(response) { //screenPoint
    var result = response.results[0];
    var symbol = new SimpleFillSymbol({
       color: [255,255,0,0.0],
       style: "solid",
       outline: {
          color: [102,0,204],
          width: 5
       }
    });
 app.mapView.graphics.removeAll();
 if (result) {
       var selectionGraphic = result.graphic;
       selectionGraphic.symbol = symbol;
       app.mapView.graphics.add(selectionGraphic);
       } 
    });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

For the view, set up a result to return and a return symbol from the screenPoint location, then for each new result clear the last and add the selectionGraphic.

We also added a watch on the popup's visbile property to handle clearing the grahpic when the popup is closed:

app.mapView.popup.watch("visible", function(visible) { //watch for the vis on the popup, if false remove graphics
    if (visible == false) {
       app.mapView.graphics.removeAll();
    }
    //console.log("popup visible: ", visible);
 });  ‍‍‍‍‍‍

I suppose you could add an action against the esri-icon-close class that could perfrom the same thing . . .

The hitTest works fine in 4.1 EXCEPT when a mouse click selects your feature by that new selection tolerance, producing 'No Features Found' bubble. In this case hitTest won't work because the feature is selected but of course no graphic is generated since there is no feature at the screenPoint mouse click.

So if anybody knows how to get at that tolerance property for the poup, that would be great so we can figure out how to set maybe a hitTest screen tolerance-

Thanks,

David

Re: jsapi 4.0 popup: set highlight graphic on feature layer click?

ChrisSmith7 — Sat, 11 Dec 2021 07:04:13 GMT

This was helpful for me - I had to make a minor adjustment, though. I needed to clone the results graphic, otherwise, it was resymbolizing the base feature, and then removing it on the next click:

Here's my code:

            app.mapView.on("click", function (event) { //hitTest used to create a selection graphic for the popup
                app.mapView.hitTest(event.screenPoint).then(function (response) { //screenPoint
                    var resultGraphic = response.results[0].graphic;
                    var symbol = new SimpleFillSymbol({
                        color: [255, 255, 0, 0.0],
                        style: "solid",
                        outline: {
                            color: [0, 0, 0],
                            width: 5
                        }
                    });
                    app.mapView.graphics.removeAll();
                    if (resultGraphic) {
                        var selectionGraphic = resultGraphic.clone();
                        selectionGraphic.symbol = symbol;
                        app.mapView.graphics.add(selectionGraphic);
                    }
                });
            });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: jsapi 4.0 popup: set highlight graphic on feature layer click?

DavidColey — Sat, 11 Dec 2021 07:04:16 GMT

Hi Chris - that's interesing, I wasn't aware of the clone method per say. I also ran into that exact behavior and solved it this way:


//let's get a popup graphic on click:'
app.mapView.on("click", function(evt) {
     var screenPoint = {
        x: evt.x,
        y: evt.y
      };

     app.mapView.hitTest(screenPoint)
      .then(getGraphics);
      });
  function getGraphics(response) {
      app.mapView.graphics.removeAll();
      var graphic = new Graphic({
        //gotta set a defined geometry for the symbol to draw
        geometry: response.results[0].graphic.geometry,
        symbol: new SimpleFillSymbol({
           color: [255,255,0,0.0],
           style: "solid",
           outline: {
                color: [102,0,204],
                width: 5
           }
      })
   });
   app.mapView.graphics.add(graphic);
   console.log(graphic);
 }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

We've also set up a watch on the popup visiblity to clear graphics and selected results from from the search return:

app.mapView.popup.watch("visible", function(visible) { //watch for the vis on the popup to handle the close action, 
       //if popup not visible AND we have a selected resutlt, clear the search, the popup content and remove the graphics.
       if (visible == false) {
          if (app.search.selectedResult){
       console.log("selectedResult");
       app.search.clear();
          }
       app.activeView.popup.clear(); 
       app.mapView.graphics.removeAll();
    }
 });‍‍‍‍‍‍‍‍‍‍‍

I'm going to try the clone method though that looks cool.

Re: jsapi 4.0 popup: set highlight graphic on feature layer click?

jamesa — Sat, 11 Dec 2021 07:04:19 GMT

I can't highlight the selected feature. Can someone see the sample code? What am I missing?

Thank you.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Access features with click events - 4.2</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    
    #info {
      background-color: black;
      opacity: 0.75;
      color: orange;
      font-size: 18pt;
      padding: 8px;
      visibility: hidden;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">
  <script src="https://js.arcgis.com/4.2/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/renderers/UniqueValueRenderer",
      "esri/symbols/SimpleFillSymbol",
      "dojo/dom",
      "dojo/domReady!"
    ], function(
      Map,
      MapView,
      FeatureLayer,
      UniqueValueRenderer,
      SimpleFillSymbol,
      dom
    ) {

      var layer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0",
        outFields: ["*"]
      });

      var map = new Map({
        basemap: "dark-gray",
        layers: [layer]
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-73.950, 40.702],
        zoom: 11
      });



       
       //let's get a popup graphic on click:'
     view.on("click", function(evt) {
     var screenPoint = {
        x: evt.x,
        y: evt.y
      };

     view.hitTest(screenPoint)
      .then(getGraphics);
      });
  function getGraphics(response) {
      view.graphics.removeAll();
      var graphic = new Graphic({
        //gotta set a defined geometry for the symbol to draw
        geometry: response.results[0].graphic.geometry,
        symbol: new SimpleFillSymbol({
           color: [255,255,0,0.0],
           style: "solid",
           outline: {
                color: [102,0,204],
                width: 5
           }
      })
   });
   view.graphics.add(graphic);
   console.log(graphic);
 }
       

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: jsapi 4.0 popup: set highlight graphic on feature layer click?

DavidColey — Thu, 23 Feb 2017 14:16:18 GMT

you don't have Graphic in your require

Re: jsapi 4.0 popup: set highlight graphic on feature layer click?

jamesa — Thu, 23 Feb 2017 18:44:22 GMT

Thanks. It works.

Re: jsapi 4.0 popup: set highlight graphic on feature layer click?

DavidColey — Fri, 24 Feb 2017 19:14:21 GMT

Sure. Hopefully this will become unnecessary when esri fully updates popup and popupTemplate funcitonality to what we see in 3.x - i.e. reading coded value domain descriptions and setting selection graphics . . . .

Re: jsapi 4.0 popup: set highlight graphic on feature layer click?

KristianEkenes — Mon, 22 Oct 2018 16:41:49 GMT

In versions 4.5 and later of the API, highlight is enabled by default on features clicked by the user. You can alter the color of the highlight using MapView.highlightOptions - MapView | API Reference | ArcGIS API for JavaScript 4.9

Also not the highlightEnabled property on the popup - Popup | API Reference | ArcGIS API for JavaScript 4.9

This sample demonstrates the default popup highlight - Reference Arcade expressions in PopupTemplate | ArcGIS API for JavaScript 4.9

If you search "highlight" in the JavaScript samples, you'll also find several others that show how you can directly call the highlightFeatures() method on the layerview to implement your own highlight behavior outside the popup - Reference Arcade expressions in PopupTemplate | ArcGIS API for JavaScript 4.9

Re: jsapi 4.0 popup: set highlight graphic on feature layer click?

HoriaTudosie — Thu, 31 Jan 2019 15:12:48 GMT

Is it any indication that esri will ever fully updates popup and popupTemplate funcitonality to what we see in 3.x?

Re: jsapi 4.0 popup: set highlight graphic on feature layer click?

HoriaTudosie — Thu, 31 Jan 2019 16:24:24 GMT

looks like Kristian Ekenes' replay bellow gives the answer.

Re: jsapi 4.0 popup: set highlight graphic on feature layer click?

ZorbaConlen1 — Sat, 11 Dec 2021 07:04:22 GMT

Hi. Seems like highlighting features got a lot easier. For some reason, the automatic highlighting is not working in my app. Here is the snippet. Adding a webmap. The map contains a feature layer (uses picture icons). I'm disabling the popup because I need to create a custom popup programatically. Any ideas why highlighting would not be working?

Thx

//set app var = config.json file with app configurations
app = JSON.parse(config);

app.mapView = new MapView({ 
    container: app.containerMap,
    highlightOptions: {
        color: [255, 255, 0, 1],
        haloOpacity: 0.9,
        fillOpacity: 0.2
      }
});

props = {
    portalItem: {
    id: app.webMapItem
    }
}

let webMap = new WebMap(props);

//need to load webmap using loadable pattern, so we can specify that all fields should be available.
//otherwise, hittest results only include objectid.
webMap.load().then(function () {
    webMap.layers.filter(function (layer) {
      return layer.type === 'feature';
    }).map(function (layer) {
      layer.outFields = ['*'];
      console.log(layer);
      return layer;
    });
});

app.mapView.map = webMap;
//app.mapView.popup = null;
app.mapView.padding = app.viewPadding;
app.mapView.ui = {components: app.uiComponents};‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍