change arcgis js api popup click event to right click

Question

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
          });
        });

cabesuon · Accepted Answer · 2020-06-26 09:27:43Z

2

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>

answered Jun 26, 2020 at 9:27

cabesuon

5,2782 gold badges19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Lieutenant Dan Over a year ago

dang, you are like the only person who knows arcgis js! lol thanks so much for the help with these

Lieutenant Dan Over a year ago

why did you have to write this extra function here: - function populationChange(feature) { ?

cabesuon Over a year ago

There are two ways of generate the popup content in a "dynamically", with a function (like the example), or with a promise. It is pretty useful when you need to resolve some task or add more "complex" content. Glad you find useful the answers.

cabesuon Over a year ago

If you want to add extra data in the content, I think you will have to define a custom content. There, you shouldn't have any problem using a reachable variable. If you are having trouble with it let me know.

cabesuon Over a year ago

Hi @docholiday, I gave you an answer, let me know if it works for you.

|

Collectives™ on Stack Overflow

change arcgis js api popup click event to right click

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related