nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

context menu

LefterisKoumis

I need to create a right click context menu for one of my graphics. I am using the example found at:

Display context menu | ArcGIS API for JavaScript

as an example.

In the code I am already using the GraphicsLayer.on("mouse-over", function(evt)) to set the infowindow for other graphics (not for the one that I need to set the context menu).

Can the GraphicsLayer listen to multiple triggers? Or do they need to be combined under a single instance of GL.on?

Thanks.

Vind meer berichten getagd met

Accepted answers

rscheitlin

Lefteris,

OK, Here is your sample code corrected:

<!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>My Map</title>
  <link rel="stylesheet" href= "http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
  <style>
    html,
    body,
    html, body, #map {
      height:100%;
      margin: 0;
      padding: 0;
      width:100%;
      overflow:hidden;
    }

  </style>
  <script src="http://js.arcgis.com/3.14/"></script>
  <script>
    var myMap, ctxMenuForGraphics;
    require([
      "esri/map",
      "esri/geometry/Point",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/graphic",
      "esri/layers/GraphicsLayer",
      "esri/geometry/Polyline",
      "esri/SpatialReference",
      "dojo/dom",
      "dojo/on",
      "dijit/Menu",
      "dijit/MenuItem",
      "dojo/domReady!"
  ], function (
      Map,
      Point,
      SimpleMarkerSymbol,
      SimpleLineSymbol,
      Graphic,
      GraphicsLayer,
      Polyline,
      SpatialReference,
      dom,
      on,
      Menu,
      MenuItem
    ) {

      myMap = new Map("map", {
        basemap: "streets",
        center: [-122.16, 37.7238],
        zoom: 15,
        SpatialReference: 102100
      });

      myMap.on("load", init);

      function init() {
        var point1 = new Point(-122.159, 37.724, myMap.SpatialReference);
        var point2 = new Point(-122.169, 37.721, myMap.SpatialReference);
        var line = new Polyline(myMap.SpatialReference);
        var gL = new GraphicsLayer();
        line.addPath([point1, point2]);
        var lineSymbol = new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0, 0.5]), 4);
        var pointSymbol = new SimpleMarkerSymbol().setColor(new dojo.Color([255, 0, 0, 0.5]));
        myGraphicMarker = new Graphic(point1, pointSymbol,{ "name": "Begin"});
        myGraphicMarker2 = new Graphic(point2, pointSymbol, {"name": "End"});
        gra = new Graphic(line, lineSymbol, {"name": "Project"});
        ctxMenuForGraphics = new Menu({});
        ctxMenuForGraphics.addChild(new MenuItem({
          label: "Test",
          onClick: function () {
            alert("Testing menu");
          }
        }));
        ctxMenuForGraphics.addChild(new MenuItem({
          label: "Test 2",
          onClick: function () {
            alert("Testing menu 2");
          }
        }));
        ctxMenuForGraphics.startup();

        gL.add(myGraphicMarker);
        gL.add(myGraphicMarker2);
        gL.add(gra);

        myMap.addLayer(gL);

        on(gL, 'mouse-over', function (evt) {
          if (evt.graphic.attributes.name === "Project") {
            ctxMenuForGraphics.bindDomNode(evt.graphic.getDojoShape().getNode());
          };
        });

        on(gL, 'mouse-out', function (evt) {
          if (evt.graphic.attributes.name === "Project") {
            ctxMenuForGraphics.unBindDomNode(evt.graphic.getDojoShape().getNode());
          }
        });
      }
    });
  </script>
</head>

<body class="claro" style="font-size: 0.75em;">
  <div id="map" class="map"></div>
</body>

</html>

All comments

LefterisKoumis

That was my first thought to follow the same logic as I set the infowindow after the graphic was created. However, I run into problems. I could not bind the context menu to the graphic that is in the GL.

When I read the On binding dijit/Menu to a graphic

I knew that it would not be as simple as it seems. That's why I am using the move out to bind the graphic.

rscheitlin

Lefteris,

Why not create the context menu on the graphic when the graphic is created (just the ones with the "Project" attribute) instead of trying to add it and remove it every time someone hover over and out?

LefterisKoumis

This is a part of the code....

I first call the createGraphicsMenu, as listed on:

Display context menu | ArcGIS API for JavaScript

except the myGraphicsLayer2.on("mouse-over",function (event), to create the context menu.

because I incorporated in the existing call.

So, if the graphics is Begin or End, the infowindow are displayed.

If I right click on the Project graphic, the map "jerks" (pans for half inch) and there is no display of context menu

What am I doing wrong?

Thank you.

..........

createGraphicsMenu();

myGraphicsLayer2.on("mouse-over",function (event) {

map.graphics.clear(); //use the maps graphics layer as the highlight layer

var graphic = event.graphic;

if (graphic.attributes.name === "Begin"){

map.infoWindow.setContent(myGraphicMarker.getContent());

map.infoWindow.setTitle(myGraphicMarker.getTitle());

var highlightGraphic = new Graphic(myGraphicMarker.geometry, pointSymbol);

map.graphics.add(highlightGraphic);

map.infoWindow.show(event.screenPoint,

map.getInfoWindowAnchor(event.screenPoint));

}

if (graphic.attributes.name === "End"){

map.infoWindow.setContent(myGraphicMarker2.getContent());

map.infoWindow.setTitle(myGraphicMarker2.getTitle());

var highlightGraphic = new Graphic(myGraphicMarker2.geometry, pointSymbol);

map.graphics.add(highlightGraphic);

map.infoWindow.show(event.screenPoint,

map.getInfoWindowAnchor(event.screenPoint));

}

if (graphic.attributes.name === "Project"){

ctxMenuForGraphics.bindDomNode(graphic.getDojoShape().getNode());

}

map.infoWindow.resize(120, 70);

map.graphics.on("mouse-out", function () {

map.graphics.clear();

map.infoWindow.hide();

if (graphic.attributes.name === "Project"){

ctxMenuForGraphics.unBindDomNode(graphic.getDojoShape().getNode());

}

});

LefterisKoumis

Thanks Robert. That's what I was thinking as I mentioned on my response to Tim.

LefterisKoumis

Thanks Tim. I am aware of it. But I am using the same graphics layer for my graphics for other reasons.

TimWitt2

Robert,

you are right, the only thing the code does in the example is, identify which graphic you are hovering over and where the geometry is located. Both those things can run independent from the infowindow.

Tim

rscheitlin

Why not just add the new code you want to execute to the same event handler you already have in place?

The problem is that both calls are intended for different graphics

So you just evaluate the graphic to see if it is the one you want to work with or not.

TimWitt2

You could always create two different GraphicsLayers. You are not restricted to just one GraphicsLayer. Create one graphicslayer that has the mouse-over for an infotemplate and then another for your context menu.

GraphicsLayer | API Reference | ArcGIS API for JavaScript

GraphicsLayer1.on("mouse-over", function(evt){

infotemplate code

});

GraphicsLayer2.on("mouse-over", function(evt){

right-click code

});

LefterisKoumis

Thank you Tim.

I think I need to be more specific. What if you have two identical calls, GraphicsLayer.on("mouse-over", function(evt))

As I mentioned, I already have one for the infotemplate and then I need another one for the context menu as described by the ESRI's example as stated in my previous post. The problem is that both calls are intended for different graphics.

Perhaps, I could use only one call, and based on the graphics id the appropriate action is taken.

TimWitt2

Lefteris,

GraphicsLayer can listen to a multitude of events. Just look under Events here: GraphicsLayer | API Reference | ArcGIS API for JavaScript

Just use GraphicsLayer.on("mouse-over", function(evt))

Once that function is over you can have another GraphicsLayer.on("click", function(evt))

In your case, you can still add the code you need for the right-click context on top of the infowindow.

Tim

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.