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.