In flex, I was able to create a context menu and a tooltip (infotemplate) for the same point on a gL. It seems that in JS is either one or the other. If I script out the infotemplate, the context menu appears, otherwise I will see the tooltip only.
so can they coexist?
-----------------------------
this.createcontextmenu();
this.setinfotemplate();
on(myGraphicsLayer, 'mouse-over', lang.hitch(this, function (event)
{
this.map.graphics.clear;
var graphic = event.graphic;
if (graphic.attributes.name === "my point")
{
this.map.infoWindow.setFeatures([graphic]);
this.map.infoWindow.setContent(myGraphicMarker.getContent());
this.map.infoWindow.setTitle(myGraphicMarker.getTitle());
this.map.infoWindow.show(event.screenPoint,
this.map.getInfoWindowAnchor(event.screenPoint));
}
this.map.graphics.on("mouse-out", lang.hitch(this, function ()
{
this.map.infoWindow.hide();
}));
}));
},
createcontextmenu: function(){
ctxMenuForGraphics = new Menu({});
ctxMenuForGraphics.addChild(new MenuItem({
label: "info",
onClick: lang.hitch(this, function (event)
{
if (selectedGraphic != null)
{
some code
}
})
}));
ctxMenuForGraphics.addChild(new MenuItem(
{
label: "Delete",
onClick: function ()
{
some code
}
}));
ctxMenuForGraphics.startup();
on(myGraphicsLayer, 'mouse-over', lang.hitch(this, function (evt)
{
if (evt.graphic.attributes.name === "my point")
{
selectedGraphic = evt.graphic;
ctxMenuForGraphics.bindDomNode(evt.graphic.getDojoShape().getNode());
};
}));
on(myGraphicsLayer, 'mouse-out', lang.hitch(this, function (evt)
{
if (evt.graphic.attributes.name === "my point")
{
ctxMenuForGraphics.unBindDomNode(evt.graphic.getDojoShape().getNode());
}
}));
setinfotemplate: function()
{
var infotip = new InfoTemplate();
tip = "<font color='#FF0000'>some text</b></font>";
infotip.setContent(tip);
infotip.setTitle("Location Info");
myGraphicMarker.setInfoTemplate(infotip);
// }
},
Solved! Go to Solution.
Lefteris,
No you can not have a infoWindow and a context menu using on mouse-over. You can have a standard infoWindow (which requires a click of the graphic) and a context menu though.
createGL: function() { var infotip = new InfoTemplate(); var tip = "<font color='#FF0000'>some text</b></font>"; infotip.setContent(tip); infotip.setTitle("Location Info"); this.myGraphicMarker = new Graphic(new Point(-84.3900,33.7550), new SimpleMarkerSymbol(), {"name": "my point"}, infotip); this.myGraphicsLayer = new GraphicsLayer(); this.myGraphicsLayer.add(this.myGraphicMarker); this.map.addLayers([this.myGraphicsLayer]); this.createcontextmenu(); }, createcontextmenu: function(){ var ctxMenuForGraphics = new Menu({}); ctxMenuForGraphics.addChild(new MenuItem({ label: "info", onClick: lang.hitch(this, function (){ if (this.selectedGraphic !== null) { //some code } }) })); ctxMenuForGraphics.addChild(new MenuItem( { label: "Delete", onClick: function (){ //some code } })); ctxMenuForGraphics.startup(); on(this.myGraphicsLayer, 'mouse-over', lang.hitch(this, function (evt){ this.map.graphics.clear(); if (evt.graphic.attributes.name === "my point"){ this.selectedGraphic = evt.graphic; ctxMenuForGraphics.bindDomNode(evt.graphic.getDojoShape().getNode()); } })); on(this.myGraphicsLayer, 'mouse-out', lang.hitch(this, function (evt) { if (evt.graphic.attributes.name === "my point") { ctxMenuForGraphics.unBindDomNode(evt.graphic.getDojoShape().getNode()); } }));
Lefteris,
No you can not have a infoWindow and a context menu using on mouse-over. You can have a standard infoWindow (which requires a click of the graphic) and a context menu though.
createGL: function() { var infotip = new InfoTemplate(); var tip = "<font color='#FF0000'>some text</b></font>"; infotip.setContent(tip); infotip.setTitle("Location Info"); this.myGraphicMarker = new Graphic(new Point(-84.3900,33.7550), new SimpleMarkerSymbol(), {"name": "my point"}, infotip); this.myGraphicsLayer = new GraphicsLayer(); this.myGraphicsLayer.add(this.myGraphicMarker); this.map.addLayers([this.myGraphicsLayer]); this.createcontextmenu(); }, createcontextmenu: function(){ var ctxMenuForGraphics = new Menu({}); ctxMenuForGraphics.addChild(new MenuItem({ label: "info", onClick: lang.hitch(this, function (){ if (this.selectedGraphic !== null) { //some code } }) })); ctxMenuForGraphics.addChild(new MenuItem( { label: "Delete", onClick: function (){ //some code } })); ctxMenuForGraphics.startup(); on(this.myGraphicsLayer, 'mouse-over', lang.hitch(this, function (evt){ this.map.graphics.clear(); if (evt.graphic.attributes.name === "my point"){ this.selectedGraphic = evt.graphic; ctxMenuForGraphics.bindDomNode(evt.graphic.getDojoShape().getNode()); } })); on(this.myGraphicsLayer, 'mouse-out', lang.hitch(this, function (evt) { if (evt.graphic.attributes.name === "my point") { ctxMenuForGraphics.unBindDomNode(evt.graphic.getDojoShape().getNode()); } }));
Thank you Robert. I was hoping for the mouse-over. I guess we cannot replicate all flex functions to dojo and vice versa.