onMouseOver & onMouseOut

[danbecker]

feature layer is added to map. I would like to hover and get basic info, then click and execute onClick identify task.
the hover works great, the popup is displayed and the graphic is cleared onMouseOut, but as soon as the onClick is fired, it immmediately gets replaced by the basic onMouseOver popup.

Im assuming this is becasue my hand isn't steady, onMouseOver -- basic popup, onClick --detailed popup, slight movement onMouseOver --basic popup.

any help?

function init() {

    featlayer = new esri.layers.FeatureLayer("url",{
            mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
      //infoTemplate:template,
      id: 'facs',      
            outFields:["*"]
          });
    dojo.connect(featlayer, "onMouseOver", showHoverPopup);
    dojo.connect(featlayer, "onMouseOut", hideHoverPopup);
    dojo.connect(map,"onClick",executeIdentifyTask);
}

    function showHoverPopup(evt){
   map.graphics.enableMouseEvents();
   var infoTemplate = new esri.InfoTemplate();
   infoTemplate.setTitle(evt.graphic.attributes.facil_name);
   infoTemplate.setContent("<b>${facil_name}</b>");
   map.infoWindow.resize(245,125);
   
   var highlightSym = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10,
    new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
    new dojo.Color([255,0,0]), 1),
    new dojo.Color([0,255,0,0.25]));
   
   evt.graphic.setInfoTemplate(infoTemplate);
   
   var content = evt.graphic.getContent();
   map.infoWindow.setContent(content);
   var title = evt.graphic.getTitle();
   map.infoWindow.setTitle(title);
   highlightGraphic = new esri.Graphic(evt.graphic.geometry,highlightSym);
   map.graphics.add(highlightGraphic);
   map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
   
   }
  
function hideHoverPopup(evt){
 map.graphics.remove(highlightGraphic);
}

[StephenLead]

feature layer is added to map. I would like to hover and get basic info, then click and execute onClick identify task.
the hover works great, the popup is displayed and the graphic is cleared onMouseOut, but as soon as the onClick is fired, it immmediately gets replaced by the basic onMouseOver popup.

I think this is because the onMouseOver and onMouseOut functions fire again when you move the mouse in order to click. At least, that's how it appears when I stitch up onMouseOver, onMouseOut and onClick functions on a polygon feature and add breakpoints to each function.

You may need to rethink how this will work - I'm not sure how users will realise that they can see some information by hovering, but other information by clicking the same feature?

Perhaps you could show the summary information on hover, and also have an Identify tool which retrieved the additional information. Selecting the Identify tool would disable the on-hover behaviour.

Incidentally I don't understand why you need to run an identifyTask on the feature layer - isn't all the information that you need returned as attributes of the feature itself?

Cheers,
Steve

[danbecker]

i guess the short answer to why do i need identifyTask is because I saw this method in the samples. Now that I look back, the identifyTask seems to only be necessary if it's a dynamicLayer?

There are multiple points atop each other at full scale, and when zoomed in, multiple layers can be selected, so I stuck with the deferred = identifyTask.execute() deferred.addCallback() then switch for each featureLayer name and set infoWindow accordingly. There are also several queryRelatedFeatures tasks for some of the layers.

Do you have a sample of an identify tool, I've never seen one? Do you just use a dijit.form.button?

thanks!

[StephenLead]

i guess the short answer to why do i need identifyTask is because I saw this method in the samples. Now that I look back, the identifyTask seems to only be necessary if it's a dynamicLayer?

There are multiple points atop each other at full scale, and when zoomed in, multiple layers can be selected, so I stuck with the deferred = identifyTask.execute() deferred.addCallback() then switch for each featureLayer name and set infoWindow accordingly. There are also several queryRelatedFeatures tasks for some of the layers.

Do you have a sample of an identify tool, I've never seen one? Do you just use a dijit.form.button?

thanks!

Hi Dan,

An alternative way to handle the multiple points might be to cluster them. You could decide not to show the infoWindow unless the user zooms in closer to the point's location.

I don't have a sample of an Identify tool, but you could hook your current identifyTask functionality up to a tool using one of the existing samples. When the button is active, the onClick and onHover behaviour of the other layers should be disabled. You can do this using:

//assign the listener to a variable
var listener1 = dojo.connect(........);

//disable the listener by its variable name
dojo.disconnect(listener1);

Cheers,
Steve

[danbecker]

i'm almost there... when the map loads, the onMouseOver listener is active. Simple popups are displayed, highlightgraphic added. OnMouseOut also works removing the highlightgraphic.

When the identify toggle button is clicked, onMouseOver is no longer active and executeIdentifyTask fires... so far so good.

However, if you try and click a point that was previously hovered on, executeIdentifyTask is not fired, but rather, only the simple popup is displayed??

any advice? TIA!

//globals
var featlayer;
var identifyListener;
var facilsHoverHandle;
var facilsHoverHandleOut;

function init() {

    featlayer = new esri.layers.FeatureLayer("url",{
        mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
 id: 'facs',      
        outFields:["*"]
    });
    facilsHoverHandle = dojo.connect(featlayer, "onMouseOver", showHoverPopup);
    facilsHoverHandleOut = dojo.connect(featlayer, "onMouseOut", hideHoverPopup);

}

function showHoverPopup(evt){
        map.graphics.enableMouseEvents();
        var infoTemplate = new esri.InfoTemplate();
 infoTemplate.setTitle(evt.graphic.attributes.facil_name);
 infoTemplate.setContent("<b>${facil_name}</b>");
 map.infoWindow.resize(245,125);
   
 var highlightSym = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10,
    new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
    new dojo.Color([255,0,0]), 1),
    new dojo.Color([0,255,0,0.25]));
   
 evt.graphic.setInfoTemplate(infoTemplate);
   
 var content = evt.graphic.getContent();
 map.infoWindow.setContent(content);
 var title = evt.graphic.getTitle();
 map.infoWindow.setTitle(title);
 highlightGraphic = new esri.Graphic(evt.graphic.geometry,highlightSym);
 map.graphics.add(highlightGraphic);
 map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
}
  
function hideHoverPopup(evt){
        map.graphics.remove(highlightGraphic);
}

//toggles identify onClick and featlayer onMouseOver listeners on/off
function activateIdentify(){   
   if (dijit.byId("tool_identify").checked) {
  map.infoWindow.hide();
  dojo.disconnect(featlayerHoverHandle);
  dojo.disconnect(featlayerHoverHandleOut);
             identifyListener = dojo.connect(map, "onClick", executeIdentifyTask);
   } else {
      dojo.disconnect(identifyListener);
  facilsHoverHandle = dojo.connect(featlayer , "onMouseOver", showHoverPopup);
  facilsHoverHandleOut = dojo.connect(featlayer , "onMouseOut", hideHoverPopup);
   }
}

<button dojotype="dijit.form.ToggleButton" id="tool_identify" title="Identify"
                        onclick="activateIdentify();" style="cursor:crosshair;">
                        <img src="images/infoIcon.png" width="34px" height="34px" alt="" />
</button>

[danbecker]

found the problem. I ended up setting up a query task onLoad that fills a graphicsLayer will transparent points. I know this is duplicate data since the feature layer is already loaded/displayed on the map. However, the onMouseOver is hooked to the graphicsLayer and the onClick is hooked to the feat. layer; for me, this allows for easy switching b/t the two.

Identify button enabled
remove graphicsLayer
disconnect graphicsLayer onMouseOver
connect map onClick

Identify button disabled
loop over TOC and check if the layer is visible
add graphicsLayer
connect graphicsLayer onMouseOver
disconnect map onClick