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>
<meta 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.13/esri/css/esri.css">
<style>
html, body, #map {
padding:0;
margin:0;
height:100%;
}
</style>
<script src="//js.arcgis.com/3.13/"></script>
<script>
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 id="map" class="map">
</div>
</body>
</html>