topic Re: context menu in ArcGIS JavaScript Maps SDK Questions

context menu

LefterisKoumis — Tue, 21 Jul 2015 03:22:26 GMT

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.

Re: context menu

TimWitt2 — Tue, 21 Jul 2015 12:16:46 GMT

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

Re: context menu

LefterisKoumis — Tue, 21 Jul 2015 14:53:56 GMT

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.

Re: context menu

TimWitt2 — Tue, 21 Jul 2015 15:04:50 GMT

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

});

Re: context menu

RobertScheitlin__GISP — Tue, 21 Jul 2015 15:11:25 GMT

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.

Re: context menu

TimWitt2 — Tue, 21 Jul 2015 15:15:01 GMT

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

Re: context menu

LefterisKoumis — Tue, 21 Jul 2015 15:55:24 GMT

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

Re: context menu

LefterisKoumis — Tue, 21 Jul 2015 15:56:42 GMT

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

Re: context menu

LefterisKoumis — Tue, 21 Jul 2015 17:01:23 GMT

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

}

});

Re: context menu

RobertScheitlin__GISP — Tue, 21 Jul 2015 18:53:39 GMT

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?

Re: context menu

LefterisKoumis — Tue, 21 Jul 2015 23:44:51 GMT

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.

Re: context menu

RobertScheitlin__GISP — Wed, 22 Jul 2015 11:51:38 GMT

Lefteris,

I actually set all my mouse event that deal with graphics on the GraphicsLayer.

on(gLayer, 'mouse-over', lang.hitch(this, this.onMouseOverGraphic));

Re: context menu

LefterisKoumis — Wed, 22 Jul 2015 17:34:30 GMT

Robert,

correct me if I am wrong. Based of what I am reading to have a right click menu, you have to bind the graphic to the menu. I tried doing in different ways (when you mouse over or when you create graphic) but nothing works.

For example, the code I posted in a previous post is quite simple, so I don't know why the bind is not working.

Thank you.

Re: context menu

RobertScheitlin__GISP — Thu, 23 Jul 2015 02:31:58 GMT

Lefteris,

You are correct the context menu has to be attached to the graphics node. So from the code snippet you shared I can not tell if you just made a mistake when where pasting the code to share here or if you actually have the mouse out event inside the mouse over event. Maybe you should post more of your code.

Re: context menu

LefterisKoumis — Thu, 23 Jul 2015 21:17:51 GMT

I am posting a simpler code that has the same components as the original file. The problem is to bind the menu to the polyline when I use a graphics layer. Here is the code and thank you!

<!DOCTYPE HTML>

<html>

<head>

<style>

html, body, #map {

padding:0;

margin:0;

height:100%;

}

</style>

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",

"dijit/form/Button", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",

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

myGraphicMarker2 = new Graphic(point2, pointSymbol);

myGraphicMarker.setAttributes({"name":"Begin"});

myGraphicMarker2.setAttributes({"name":"End"});

gra = new Graphic(line, lineSymbol);

gra.setAttributes({"name":"Project"});

gra.menu = new Menu({});

gra.menu.addChild(new MenuItem({

label: "Test",

onClick: function() {

alert("Testing menu");

}

}));

gL.add(myGraphicMarker);

gL.add(myGraphicMarker2);

gL.add(gra);

myMap.addLayer(gL);

on(gL, 'mouse-over', function(evt) {

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

evt.graphic.menu.bindDomNode(evt.graphic.getDojoShape().getNode());

};

});

on(gL, 'mouse-out', function(evt) {

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

evt.graphic.menu.unBindDomNode(evt.graphic.getDojoShape().getNode());

}

});

}

});

</script>

</head>

<body>

</div>

</body>

</html>

Re: context menu

RobertScheitlin__GISP — Sat, 11 Dec 2021 19:12:09 GMT

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>

Re: context menu

LefterisKoumis — Fri, 24 Jul 2015 16:13:41 GMT

Thank you. I can't believe that I spent so much time only to realize that the stylesheet was missing. This is why I mentioned in my previous post that the map "jerks" when you right click. I didn't notice that the menu was actually showing up using the original version of code, but at the bottom left of the screen right under the map!!

A simple fix but a valuable lesson.