AnsweredAssumed Answered

JS API 4.x view.hitTest issue

Question asked by rscheitlin Champion on Nov 1, 2016
Latest reply on Feb 2, 2018 by ywen123

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

Undral Batsukh

Rene Rubalcava

<!DOCTYPE html>
  <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>

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

  <link rel="stylesheet" href="">
  <script src=""></script>

    ], function(
    ) {

      var layer = new FeatureLayer({
        url: "",
        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

      function getGraphics(response) {
        // the topmost graphic from the click location
        // and display select attribute values from the
        // graphic to the user
//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;

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