JS API 4.x view.hitTest issue

RobertScheitlin__GISP · ‎11-01-2016

I am seeing behavior that does not seem to be what is documented. When using points or lines in a featurelayer and using the view.hitTest, I never get any more that one graphic in the hitTest promise results even know I am sure I am click on more than one.

Here is a JS API sample that demos this (notice the console reports only one graphic even if you click where one or more hurricane tracks intersect):

ubatsukh-esristaff‌

odoe‌

<!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.1</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.1/esri/css/main.css">
  <script src="https://js.arcgis.com/4.1/"></script>

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

      var layer = new FeatureLayer({
        url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Hurricanes/MapServer/1",
        outFields: ["*"]
      });

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

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-61.125537, 35.863534],
        zoom: 4
      });

      view.ui.add("info", "top-right");

      // Set up a click event handler and retrieve the screen point
      view.on("click", function(evt) {
        var screenPoint = evt.screenPoint;

        // the hitTest() checks to see if any graphics in the view
        // intersect the given screen point
        view.hitTest(screenPoint)
          .then(getGraphics);
      });

      function getGraphics(response) {
        // the topmost graphic from the click location
        // and display select attribute values from the
        // graphic to the user
        console.info(response.results)
//the hit test never returns any more than one graphic even if you definitely click on two or more lines.        
        var graphic = response.results[0].graphic;
        var attributes = graphic.attributes;
        var category = attributes.CAT;
        var wind = attributes.WIND_KTS;
        var name = attributes.NAME;

        dom.byId("info").style.visibility = "visible";
        dom.byId("name").innerHTML = name;
        dom.byId("category").innerHTML = "Category " + category;
        dom.byId("wind").innerHTML = wind + " kts";

        // symbolize all line segments with the given
        // storm name with the same symbol
        var renderer = new UniqueValueRenderer({
          field: "NAME",
          defaultSymbol: layer.renderer.symbol || layer.renderer.defaultSymbol,
          uniqueValueInfos: [{
            value: name,
            symbol: new SimpleLineSymbol({
              color: "orange",
              width: 5
            })
          }]
        });
        layer.renderer = renderer;
      }

      view.then(function() {
        layer.then(function() {
          // update the default renderer's
          // symbol when the layer loads
          var renderer = layer.renderer.clone();
          renderer.symbol.width = 4;
          renderer.symbol.color = [255, 255, 255, 0.4]
          layer.renderer = renderer;
        });
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="info">
    <span id="name"></span><br>
    <span id="category"></span><br>
    <span id="wind"></span>
  </div>
</body>

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

RobertScheitlin__GISP · ‎01-17-2017

Michael,

None at all as WAB 2D apps use 3.x API and not the 4.x api.

yangwen · ‎02-02-2018

Wow so this seems like a fundamental feature that is absent when the Feature Layer is a collection of client side graphics.

This could be a deal breaker for us as we have a lot of overlapping points in our dataset.

Is there no way to get pagination in the popup showing overlapped features when using client-side graphics as Feature Layer?