Strange behaviour between FeatureLayer 'click' event and Map.InfoWindow popup

MikeC · ‎01-15-2016

I'd encounter a strange situation.

When I do a mouse click very very near to a feature graphic, the InfoWindow pops up, but the 'click' event is not fired.

I suppose the InfoWindow will not popup since the click is not really inside the graphic.

It happens in ArcGIS JS version 3.15.

Sample Code for testing:

HTML

<html>

<body>

<h3>ArcGIS Map Test</h3>

<div id="coord">[Coordinates]</div>

</body>

</html>

CSS

body {

background-color: #999;

padding: 5px;

}

#coord {

padding-top: 10px;

}

JavaScript

var BASEMAP_URL = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";

var FEATURE_URL = "http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServ...";

require(["esri/map", "dojo/domReady!", "dojo/on", "esri/geometry/webMercatorUtils", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color"],

function(Map, Ready, on, webMercatorUtils) {

var map = new Map("mapDiv", {

// center: [114.11547731560663, 22.342798067078743],

center: [-122.66025506265751, 45.500974827876064],

zoom: 13,

nav: false

});

var baseMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(BASEMAP_URL);

map.addLayer(baseMapServiceLayer);

var featureLayer = new esri.layers.FeatureLayer(FEATURE_URL);

var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10,

new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,

new esri.Color([0, 0, 0, 255]), 1),

new esri.Color([0, 197, 255, 255]));

featureLayer.setRenderer(new esri.renderer.SimpleRenderer(symbol));

featureLayer.on('mouse-over', function() {

map.setMapCursor('pointer');

});

featureLayer.on('mouse-out', function() {

map.setMapCursor('default');

});

featureLayer.on('click', function() {

alert('on-click');

});

var template = new esri.InfoTemplate();

template.setTitle("Feature Info");

featureLayer.setInfoTemplate(template);

map.addLayer(featureLayer);

});

GirishYadav · ‎01-17-2016

Mike,

This is because, by default the infoWindow pops up on Map's onClick event. and it uses some buffer while selecting points.

Now, if you want to disable this default behavior, use following:

map.setInfoWindowOnClick(false);

AND to show the infoWindow on Layer's OnClick event:

 featureLayer.on('click', function(evt) {
      alert('on-click');
      map.infoWindow.setFeatures([evt.graphic]);
      map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
    });

-Girish