MouseOver and Click Not working together

prashantpal — Thu, 06 Sep 2012 13:51:19 GMT

Hi All,

I am trying to provide Info-tips at HoverOver and OnClick for a layer. Separately running these two works
totally fine. Its just when I try to combine these two, only the HoverOver works. Please let me know what
can I change in the code.

Below is the Code for working OnClick InfoWindow

function hoverfunction(map) {
 //build query task
 var queryTask = new esri.tasks.QueryTask("http://usf-960-1-win7/arcgis/rest/services/layer_use/MapServer/0");
 //build query filter
 var query = new esri.tasks.Query();
 query.returnGeometry = true;
 query.where="OBJECTID > 1";
 query.outFields = ["Building_Name","Building_No"];
 query.outSpatialReference = {"wkid":102100};

 var infoTemplate = new esri.InfoTemplate();
 infoTemplate.setTitle("${Building_Name}");
 infoTemplate.setContent( "Building Number ${Building_No} ");

 map.infoWindow.resize(245,125);

 dojo.connect(queryTask, "onComplete", function(featureSet) {
 map.graphics.clear();

 var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol (esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,255,255,0.8]), 1),new dojo.Color([125,125,125,0.65]));

 //QueryTask returns a featureSet. Loop through features in the featureSet and add them to the map.
 dojo.forEach(featureSet.features,function(feature){
 var graphic = feature;
 graphic.setSymbol(symbol);
 graphic.setInfoTemplate(infoTemplate);

 map.graphics.add(graphic);

 });


 });
 queryTask.execute(query);

 }

Now Here the code where I try to Combine Hover and Onclick.

function hoverfunction(map) {
 //build query task
 var queryTask = new esri.tasks.QueryTask("http://usf-960-1-win7/arcgis/rest/services/layer_use/MapServer/0");
 //build query filter
 var i;
 var query = new esri.tasks.Query();
 query.returnGeometry = true;
 query.where="OBJECTID > 1";
 query.outFields = ["Building_Name","Building_No"];
 query.outSpatialReference = {"wkid":102100};

 var infoTemplate = new esri.InfoTemplate();
 infoTemplate.setTitle("${Building_Name}");
 infoTemplate.setContent( "Building Number ${Building_No} ");

 map.infoWindow.resize(245,125);

 dojo.connect(queryTask, "onComplete", function(featureSet) {

 map.graphics.clear();

 var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,255,255,0.8]), 1),new dojo.Color([125,125,125,0.65]));
 var highlightSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 3), new dojo.Color([125,125,125,0.35]));

 var buildingHatchesGraphicsLayer = new esri.layers.GraphicsLayer();

 //QueryTask returns a featureSet. Loop through features in the featureSet and add them to the map.
 dojo.forEach(featureSet.features,function(feature){
 var graphic = feature;
 graphic.setSymbol(symbol);
 graphic.setInfoTemplate(infoTemplate);

 map.graphics.add(graphic);
 buildingHatchesGraphicsLayer.add(graphic);
 });
 //------------ Add the hoverover -------------
 /*
 var buildingHatchesGraphicsLayer = new esri.layers.GraphicsLayer();
 //QueryTask returns a featureSet. Loop through features in the featureSet and add them to the map.
 for (i=0, il=featureSet.features.length; i<il; i++) {
 //Get the current feature from the featureSet.
 //Feature is a graphic
 var graphic = featureSet.features;
 graphic.setSymbol(symbol);
 graphic.setInfoTemplate(infoTemplate);

 //Add graphic to the counties graphics layer.
 buildingHatchesGraphicsLayer.add(graphic);
 }*/

 map.addLayer(buildingHatchesGraphicsLayer);
 map.graphics.enableMouseEvents();
 map.infoWindow.resize(145,75);
 //listen for when the onMouseOver event fires on the countiesGraphicsLayer
 //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer

 dojo.connect(buildingHatchesGraphicsLayer, "onMouseOver", function(evt) {
 //map.graphics.clear(); //use the maps graphics layer as the highlight layer
 var content = evt.graphic.getContent();
 map.infoWindow.setContent(content);
 var title = evt.graphic.getTitle();
 map.infoWindow.setTitle(title);
 var highlightGraphic = new esri.Graphic(evt.graphic.geometry,highlightSymbol);
 map.graphics.add(highlightGraphic);
 map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
 });

 //listen for when map.graphics onMouseOut event is fired and then clear the highlight graphic
 //and hide the info window
 dojo.connect(map.graphics, "onMouseOut", function(evt) {
 map.graphics.clear();
 map.infoWindow.hide();
 });

 //-----------------Add Hover Over Ends here ------------------


 });
 queryTask.execute(query);

 }

Please help me out with this problem. I have been stuck here for last two days.

Thanks in Advance
Pal

Re: MouseOver and Click Not working together

prashantpal — Thu, 06 Sep 2012 18:44:46 GMT

Thanks a lot!!!. Second link work for me. 🙂

Re: MouseOver and Click Not working together

__Rich_ — Fri, 07 Sep 2012 09:15:14 GMT

Thanks a lot!!!. Second link work for me. 🙂

You're welcome...mark as answer perhaps?

topic MouseOver and Click Not working together in ArcGIS JavaScript Maps SDK Questions

MouseOver and Click Not working together

Re: MouseOver and Click Not working together

Re: MouseOver and Click Not working together

Re: MouseOver and Click Not working together