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

2561
4
Jump to solution
09-02-2019 04:08 AM
RitikaManderwal
New Contributor III

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos
4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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
New Contributor III

thank you

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos
MichaelLev
Occasional Contributor III

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

0 Kudos