This sample shows how to display a context menu when a user right-clicks the map or a graphic. Menu's are created using Dojo'sdijit/Menu. This code snippet shows how to create a new menu and calculates the location on the map where the user right-clicked.
ctxMenuForMap = new Menu({ onOpen: function(box) { currentLocation = getMapPointFromMenuPosition(box); editToolbar.deactivate(); } });
The right-click location is used to create a new graphic and add it to the map.
ctxMenuForMap.addChild(new MenuItem({ label: "Add Point", onClick: function(evt) { var graphic = new Graphic(geometryJsonUtils.fromJson(currentLocation.toJson()), symbol); map.graphics.add(graphic); } }));
<!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>Context Menu for Map and Graphics</title> <link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css"> <style> html, body { height:100%; margin: 0; padding: 0; width:100%; overflow:hidden; } #header { overflow:hidden; height: 1.6em; } div.insetType { color: #97F900; font-size: 24px; font-family: Rockwell, Georgia, "Times New Roman", Times, serif; padding-left: 25px; } </style> <script src="https://js.arcgis.com/3.46/"></script> <script> var map, editToolbar, ctxMenuForGraphics, ctxMenuForMap; var selected, currentLocation; require([ "esri/map", "esri/geometry/Point", "esri/geometry/Polygon", "esri/toolbars/draw", "esri/toolbars/edit", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/graphic", "esri/geometry/jsonUtils", "esri/Color", "dojo/parser", "dijit/Menu", "dijit/MenuItem", "dijit/MenuSeparator", "dijit/form/Button", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function( Map, Point, Polygon, Draw, Edit, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Graphic, geometryJsonUtils, Color, parser, Menu, MenuItem, MenuSeparator ) { parser.parse(); map = new Map("map", { basemap: "satellite", center: [20.039, 62.739], zoom: 3 }); map.on("load", createToolbarAndContextMenu); function createToolbarAndContextMenu() { // Add some graphics to the map addGraphics(); // Create and setup editing tools editToolbar = new Edit(map); map.on("click", function(evt) { editToolbar.deactivate(); }); createMapMenu(); createGraphicsMenu(); } function createMapMenu() { // Creates right-click context menu for map ctxMenuForMap = new Menu({ onOpen: function(box) { // Lets calculate the map coordinates where user right clicked. // We'll use this to create the graphic when the user clicks // on the menu item to "Add Point" currentLocation = getMapPointFromMenuPosition(box); editToolbar.deactivate(); } }); ctxMenuForMap.addChild(new MenuItem({ label: "Add Point", onClick: function(evt) { var symbol = new SimpleMarkerSymbol( SimpleMarkerSymbol.STYLE_SQUARE, 30, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([200,235, 254, 0.9]), 2 ), new Color([200, 235, 254, 0.5])); var graphic = new Graphic(geometryJsonUtils.fromJson(currentLocation.toJson()), symbol); map.graphics.add(graphic); } })); ctxMenuForMap.startup(); ctxMenuForMap.bindDomNode(map.container); } function createGraphicsMenu() { // Creates right-click context menu for GRAPHICS ctxMenuForGraphics = new Menu({}); ctxMenuForGraphics.addChild(new MenuItem({ label: "Edit", onClick: function() { if ( selected.geometry.type !== "point" ) { editToolbar.activate(Edit.EDIT_VERTICES, selected); } else { alert("Not implemented"); } } })); ctxMenuForGraphics.addChild(new MenuItem({ label: "Move", onClick: function() { editToolbar.activate(Edit.MOVE, selected); } })); ctxMenuForGraphics.addChild(new MenuItem({ label: "Rotate/Scale", onClick: function() { if ( selected.geometry.type !== "point" ) { editToolbar.activate(Edit.ROTATE | Edit.SCALE, selected); } else { alert("Not implemented"); } } })); ctxMenuForGraphics.addChild(new MenuItem({ label: "Style", onClick: function() { alert("Not implemented"); } })); ctxMenuForGraphics.addChild(new MenuSeparator()); ctxMenuForGraphics.addChild(new MenuItem({ label: "Delete", onClick: function() { map.graphics.remove(selected); } })); ctxMenuForGraphics.startup(); map.graphics.on("mouse-over", function(evt) { // We'll use this "selected" graphic to enable editing tools // on this graphic when the user click on one of the tools // listed in the menu. selected = evt.graphic; // Let's bind to the graphic underneath the mouse cursor ctxMenuForGraphics.bindDomNode(evt.graphic.getDojoShape().getNode()); }); map.graphics.on("mouse-out", function(evt) { ctxMenuForGraphics.unBindDomNode(evt.graphic.getDojoShape().getNode()); }); } // Helper Methods function getMapPointFromMenuPosition(box) { var x = box.x, y = box.y; switch( box.corner ) { case "TR": x += box.w; break; case "BL": y += box.h; break; case "BR": x += box.w; y += box.h; break; } var screenPoint = new Point(x - map.position.x, y - map.position.y); return map.toMap(screenPoint); } function addGraphics() { // Adds pre-defined geometries to map var polygonSymbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol( SimpleLineSymbol.STYLE_DOT, new Color([151, 249, 0, 0.8]), 3 ), new Color([151, 249, 0, 0.45]) ); var polygon = new Polygon({ "rings": [ [ [-4226661.916056009, 8496372.808143634], [-3835304.3312360067, 8731187.359035634], [-2269873.991956003, 9005137.668409634], [-1213208.5129420012, 8613780.083589634], [-1017529.7205320001, 8065879.464841632], [-1213208.5129420012, 7478843.087611631], [-2230738.233474003, 6891806.710381631], [-2935181.8861500043, 6735263.6764536295], [-3522218.263380006, 6891806.710381631], [-3952711.606682008, 7165757.01975563], [-4265797.674538009, 7283164.295201631], [-4304933.433020009, 7635386.121539632], [-4304933.433020009, 7674521.880021632], [-4226661.916056009, 8496372.808143634] ] ], "spatialReference": { "wkid": 102100 } }); var arrow = new Polygon({ "rings": [ [ [9862211.137464028, 6617856.40100763], [8922952.933896024, 5522055.163511626], [8922952.933896024, 5991684.265295628], [6105178.323192019, 5991684.265295628], [6105178.323192019, 7087485.50279163], [8922952.933896024, 7087485.50279163], [8922952.933896024, 7557114.604575632], [9862211.137464028, 6617856.40100763] ] ], "spatialReference": { "wkid": 102100 } }); var triangle = new Polygon({ "rings": [ [ [2426417.02588401, 8535508.566625634], [4304933.433020014, 12292541.380897645], [6183449.840156019, 8535508.566625634], [2426417.02588401, 8535508.566625634] ] ], "spatialReference": { "wkid": 102100 } }); map.graphics.add(new Graphic(polygon, polygonSymbol)); map.graphics.add(new Graphic(arrow, polygonSymbol)); map.graphics.add(new Graphic(triangle, polygonSymbol)); } }); </script> </head> <body class="claro" style="font-size: 0.75em;"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;"> <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"> <div class="insetType">Right-click on map or graphic to view context menu</div> </div> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" ></div> </div> </body> </html>