Select to view content in your preferred language

Can context menu and infotemplate coexist for the same location

3092
2
Jump to solution
11-16-2015 04:59 PM
LefterisKoumis
Regular Contributor II

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

  // }

  },

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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

View solution in original post

0 Kudos
2 Replies
RobertScheitlin__GISP
MVP Emeritus

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());
          }
        }));
0 Kudos
LefterisKoumis
Regular Contributor II

Thank you Robert. I was hoping for the mouse-over. I guess we cannot replicate all flex functions to dojo and vice versa.

0 Kudos