change arcgis js api popup click event to right click

user_973397 0
Viewed 1208

Invoking the pop up click event is pretty easy with arcgis js api 4.15, for instance you simply define it.

i.e. like below:

    fl = new FeatureLayer({
      source: gras,
      objectIdField: "ObjectID",
      geometryType: "polygon",
      fields: [{
        name: "ObjectID",
        alias: "ObjectID",
        type: "oid"
      }, {
        name: "id",
        alias: "id",
        type: "string"
      }, {
        name: "place",
        alias: "place",
        type: "string"
      }, {
        name: "url",
        alias: "url",
        type: "string"
      }, {
        name: "grid_value",
        alias: "grid_value",
        type: "double"
      }],
      renderer: renderer,
      popupEnabled: true, <------------------------ here
      popupTemplate: popuptemp <---------------------- here
    });

Problem is... I am wondering if anyone has insight within how to handle changing this to a right click event within the API?

(i.e. documentation is lacking https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html)

Out of the box event is it triggers when the layer is clicked on, I would like to change or customize this to take the event on right click instead..

Another attempted logic via their documentation, not sure what to do with the nested open logic - or how to call it from there.

view.popuptemp.autoOpenEnabled = false;
        view.on("click", function(event) {
           if  (event.which==3) {
                alert('Right mouse button pressed');
                break;
            }
          view.popuptemp.open({
            // Set the popup
          });
        });
arcgis-js-api javascript
1 Answers

Like mention, you will have to disable popup auto open and then display the feature info when right click occurs. Something like this should work,

view.popup.autoOpenEnabled = false; // <- disable view popup auto open
view.on("click", function (event) { // <- listen to view click event
  if (event.button === 2) { // <- check that was right button
    view.popup.open({ // <- open popup
      location: event.mapPoint, // <- use map point of the click event
      fetchFeatures: true // <- fetch the selected features (if any)
    });
  }
});

Here you have the above working on one of ArcGIS examples,

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>PopupTemplate - use functions to set content - 4.15</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.15/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <script>
    var populationChange;
    require(["esri/Map", "esri/views/MapView", "esri/layers/Layer"], function (
      Map,
      MapView,
      Layer
    ) {
      var map = new Map({
        basemap: "dark-gray"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 7,
        center: [-87, 34]
      });

      var highlightSelect = null;

      Layer.fromPortalItem({
        portalItem: {
          id: "e8f85b4982a24210b9c8aa20ba4e1bf7"
        }
      }).then(function (layer) {
        map.add(layer);

        var popupTemplate = {
          title: "Population in {NAME}",
          outFields: ["*"],
          content: populationChange,
          fieldInfos: [
            {
              fieldName: "POP2010",
              format: {
                digitSeparator: true,
                places: 0
              }
            },
            {
              fieldName: "POP10_SQMI",
              format: {
                digitSeparator: true,
                places: 2
              }
            },
            {
              fieldName: "POP2013",
              format: {
                digitSeparator: true,
                places: 0
              }
            },
            {
              fieldName: "POP13_SQMI",
              format: {
                digitSeparator: true,
                places: 2
              }
            }
          ]
        };
        layer.popupTemplate = popupTemplate;
        function populationChange(feature) {
          var div = document.createElement("div");
          var upArrow =
            '<svg width="16" height="16" ><polygon points="14.14 7.07 7.07 0 0 7.07 4.07 7.07 4.07 16 10.07 16 10.07 7.07 14.14 7.07" style="fill:green"/></svg>';
          var downArrow =
            '<svg width="16" height="16"><polygon points="0 8.93 7.07 16 14.14 8.93 10.07 8.93 10.07 0 4.07 0 4.07 8.93 0 8.93" style="fill:red"/></svg>';

          var diff =
            feature.graphic.attributes.POP2013 -
            feature.graphic.attributes.POP2010;
          var pctChange = (diff * 100) / feature.graphic.attributes.POP2010;
          var arrow = diff > 0 ? upArrow : downArrow;

          div.innerHTML =
            "As of 2010, the total population in this area was <b>" +
            feature.graphic.attributes.POP2010 +
            "</b> and the density was <b>" +
            feature.graphic.attributes.POP10_SQMI +
            "</b> sq mi. As of 2013, the total population was <b>" +
            feature.graphic.attributes.POP2013 +
            "</b> and the density was <b>" +
            feature.graphic.attributes.POP13_SQMI +
            "</b> sq mi. <br/> <br/>" +
            "Percent change is " +
            arrow +
            "<span style='color: " +
            (pctChange < 0 ? "red" : "green") +
            ";'>" +
            pctChange.toFixed(3) +
            "%</span>";
          return div;
        }

        view.popup.autoOpenEnabled = false; // <- disable view popup auto open
        view.on("click", function (event) { // <- listen to view click event
          if (event.button === 2) { // <- check that was right button
            view.popup.open({ // <- open popup
              location: event.mapPoint, // <- use map point of the click event
              fetchFeatures: true // <- fetch the selected features (if any)
            });
          }
        });
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

user_27011980
Related