AnsweredAssumed Answered

How to highlight feature A and B whenever one is hovered? Streets and Streetname

Question asked by c.bischofmysynergis-esridist Employee on Jun 24, 2020
Latest reply on Jun 25, 2020 by c.bischofmysynergis-esridist

Hey guys!

I have a problem with a functionality we'd like to achieve. We have a map with two FeatureLayers (Streets of a Country, Streetsnumber). Streets of a country has a SimpleRenderer and displays lines on a 2D Map containing the streets in that country and the Streetsnumber has a UniqueValueRenderer displaying a png image with the street number in it somewhere on the streets.

 

What I'd like to achieve is that the png image gets increased in size whenever the user hovers over the exact image AND if the user hovers somewhere over the street the image represents. For example if the user hovers the Route 66, the png (which is located somewhere on the Route 66) shoult increase in size and decrease if the hover is over.

 

Right now we've made it to the point that the streets gets highlighted and the street png as soon as the user hovers it, but it should increase before it gets hovered - right when the street itself is hovered. See attachments.

 

flnumber -> feature layer with the numbers on the map

flstreets -> freature layer with the street lines on the map

 

using JS API 4.15

 

view
.when()
.then(function () {
  return flstreets.when();
})
.then(function (layer) {

  return view.whenLayerView(layer);
})
.then(function (layerView) {
  view.on("pointer-move", eventHandler);

  function eventHandler(event) {
    // the hitTest() checks to see if any graphics in the view
    // intersect the x, y coordinates of the pointer
    view.hitTest(event).then(getGraphics_Move);
  }

  var highlight, currentName;

  function getGraphics_Move(response) {
    // the topmost graphic from the flstreets
    // and display select attribute values from the
    // graphic to the user
    var graphic_railway, name, targetnum, graphic_number;
    var tooltip = document.getElementById("nametooltip");
    if (response.results.length) {
      //railwaygraphic

      try {
        graphic_railway = response.results.filter(function (result) {
          return result.graphic.layer === flstreets;
        })[0].graphic;
        console.log(graphic_railway)

        name = graphic_railway.attributes.Bezeichnun;
        targetnum = indexrenderer.indexOf(name);

        try {
          graphic_number = response.results.filter(function (result) {
            return result.graphic.layer === flnumber;
          })[0].graphic;

          var rend = graphic_number.layer.renderer.clone(); //rend temporary huge renderer
          for (var r = 0; r < rend.uniqueValueInfos.length; r++) {
            if (rend.uniqueValueInfos[r].label === name) {
              rend.uniqueValueInfos[r].symbol.width = 33;
              rend.uniqueValueInfos[r].symbol.height = 33;
              graphic_number.layer.renderer = rend;
              break;
            }
          }
        } catch {
          console.log("info: no number graphic");
        }

        function controlTooltip(name, e) {
          if (currentName == name) {
            var name = name;
            //prevent tooltip from "wiggling" around by only changing the x and y values whenever a new feature is hovered
            tooltip.style.top = "" + e.y + "px";
            tooltip.style.left = "" + e.x + "px";
            tooltip.style.display = "inline-block";
            tooltip.style.visibility = "visible";
            tooltip.style.position = "absolute";
            tooltip.style.backgroundColor = "#fff";
            tooltip.style.padding = "10px";
            tooltip.style.borderRadius = "5px";
            tooltip.style.fontFamily = "sans-serif";
            tooltip.style.fontWeight = "bold";
            tooltip.style.boxShadow = "2px 2px 1px #88888888";
            tooltip.innerHTML = name;
            currentName = name;
          }
        }

        controlTooltip(name, response.screenPoint);
      } catch {
        console.log("Info: graphic is " + typeof graphic);
      }

      if (highlight && currentName !== name) {
        flnumber.renderer = newrenderer; //set back to original renderer
        tooltip.style.display = "none";
        tooltip.style.visibility = "hidden";
        highlight.remove();
        highlight = null;
        return;
      }

      if (highlight) {
        return;
      }

      // highlight all features belonging to the same railway as the feature
      // returned from the hitTest
      var query = layerView.createQuery();
      query.where = "Bezeichnun = '" + name + "'";
      layerView.queryObjectIds(query).then(function (ids) {
        if (highlight) {
          highlight.remove();
        }
        highlight = layerView.highlight(ids);
        currentName = name;
      });
    } else {
      // remove the highlight if no features are
      // returned from the hitTest
      if (highlight) {
        flnumber.renderer = newrenderer; //set back to original renderer
        tooltip.style.display = "none";
        tooltip.style.visibility = "hidden";
        highlight.remove();
        highlight = null;
      }
    }
  }
});

Attachments

Outcomes