context menu

LefterisKoumis · ‎07-20-2015

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.

RobertScheitlin__GISP · ‎07-24-2015

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>

View solution in original post

TimWitt2 · ‎07-21-2015

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

LefterisKoumis · ‎07-21-2015

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 · ‎07-21-2015

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 · ‎07-21-2015

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

RobertScheitlin__GISP · ‎07-21-2015

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 · ‎07-21-2015

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

LefterisKoumis · ‎07-21-2015

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

LefterisKoumis · ‎07-21-2015

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

}

});

RobertScheitlin__GISP · ‎07-21-2015

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?