How to make a menu on right click of feature on feature layer

RitikaManderwal · ‎09-02-2019

I want a context menu that triggers on right click of a feature in feature layer.

I m getting solution of it for version 3.29 arcgis js api.

But i want it for 4.10 arcgis js api

RobertScheitlin__GISP · ‎10-31-2019

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

View solution in original post

RobertScheitlin__GISP · ‎09-02-2019

Ritika,

Here is a sample that shows how in 4.12.

<!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 pointer events - 4.12</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.12/esri/themes/light/main.css" />
  <link rel="stylesheet" href="https://js.arcgis.com/4.12/dijit/themes/claro/claro.css">
  <script src="https://js.arcgis.com/4.12/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "dijit/Menu", "dijit/MenuItem",
      "dijit/popup"
    ], function (Map, MapView, FeatureLayer,
      Menu, MenuItem, popup) {
      let ctxMenuForGraphics, attributes, category, tname, wind, tyear;
      const hurricanesLayer = new FeatureLayer({
        url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Hurricanes/MapServer/1",
        outFields: ["*"]
      });

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

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

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

      view
        .when()
        .then(function () {
          return hurricanesLayer.when();
        })
        .then(function (layer) {
          createFeatureMenu();
          const renderer = layer.renderer.clone();
          renderer.symbol.width = 4;
          renderer.symbol.color = [128, 128, 128, 0.8];
          layer.renderer = renderer;
          return view.whenLayerView(layer);
        })
        .then(function (layerView) {
          view.on("click", eventHandler);

          function eventHandler(event) {
            if (event.button === 2) {
              view.hitTest(event).then(function (evt) {
                getGraphics(evt, event);
              });
            } else {
              document.getElementById("info").style.visibility = "hidden";
              popup.close(ctxMenuForGraphics);
              if (highlight) {
                highlight.remove();
                highlight = null;
              }
            }
          }

          let highlight, currentYear, currentName;

          function getGraphics(response, mevent) {
            // the topmost graphic from the hurricanesLayer
            // and display select attribute values from the
            // graphic to the user
            if (response.results.length) {
              const graphic = response.results.filter(function (result) {
                return result.graphic.layer === hurricanesLayer;
              })[0].graphic;

              attributes = graphic.attributes;
              category = attributes.CAT;
              wind = attributes.WIND_KTS;
              tname = attributes.NAME;
              tyear = attributes.YEAR;
              id = attributes.OBJECTID;

              if (highlight && (currentName !== tname || currentYear !== tyear)) {
                highlight.remove();
                highlight = null;
              }

              // highlight all features belonging to the same hurricane as the feature
              // returned from the hitTest
              const query = layerView.layer.createQuery();
              query.where = "YEAR = " + tyear + " AND NAME = '" + tname + "'";
              layerView.queryObjectIds(query).then(function (ids) {
                highlight = layerView.highlight(ids);
                currentYear = tyear;
                currentName = tname;
              });
              popup.open({
                popup: ctxMenuForGraphics,
                x: mevent.x,
                y: mevent.y
              });
              document.getElementById("info").style.visibility = "hidden";
            } else {
              document.getElementById("info").style.visibility = "hidden";
              popup.close(ctxMenuForGraphics);
              // remove the highlight if no features are
              // returned from the hitTest
              highlight.remove();
              highlight = null;
            }
          }
        });

      function createFeatureMenu() {
        // Creates right-click context menu for Features
        ctxMenuForGraphics = new Menu({});
        ctxMenuForGraphics.addChild(new MenuItem({
          label: "Track info...",
          onClick: function () {
            document.getElementById("info").style.visibility = "visible";
            document.getElementById("name").innerHTML = tname;
            document.getElementById("category").innerHTML =
              "Category " + category;
            document.getElementById("wind").innerHTML = wind + " kts";
            popup.close(ctxMenuForGraphics);
          }
        }));
        ctxMenuForGraphics.startup();
      }
    });
  </script>
</head>

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

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

RitikaManderwal · ‎10-31-2019

thank you

RobertScheitlin__GISP · ‎10-31-2019

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

MichaelLev · ‎10-01-2020

I presented a related question

I thought that this example could help, but I can't make the example work in esri javascript 4.16