Mouse click on map not accurately selecting feature for InfoTemplate popup

JustinBridwell2 · ‎06-02-2020

I have a web application that incorporate an infoTemplate (esriPopup) when the user clicks on a road feature in the map. This works fine in the main map, but I have additional maps that compare 2 preloaded scenario maps. When the user zooms in to one of the scenario compare maps, they should be able to click one of the road features and the infoTemplate is displayed. What I am noticing is there is a slight offset of where the user has to click in order to get the infoTemplate to display properly. In other words, the user has to click slightly above the feature layer in order to select it and trigger the infoTemplate to display correctly. If the user click directly on the road feature, it displays "No information available".

It's a .NET application with most of the client side functionality in an AMD-style main.js file. There is an esri.css and Style.css that controls most of the styling. I am refactoring the application and am having trouble even determining where the issue originates from (is it the cursor, the infoTemplate, or the roadsLayer settings?)

The infoTemplate for the scenario compare maps looks like this:

it = new InfoTemplate("Feature Info");
it.setContent(lang.hitch(map,generateInfoContent));
its = {};its[idx] = { infoTemplate: it, layerUrl: null }
map.getLayersVisibleAtScale()[1].setInfoTemplates(its);

The method .getLayersVisibleAtScale() seems to be an esri method of class map but I have no clue why this would produce a slick offset in selecting the layer. Any ideas as to how to resolve this?

KenBuja · ‎06-02-2020

There was an issue with JS 3.x where if you have a map in a div that doesn't take up the entire frame, you might have to use map.reposition() after the map has loaded. This code was recommended:

map.on("load", function () {  
    registry.byId("divMap").on("resize", function () {  
        clearTimeout(resizeTimer);  
        resizeTimer = setTimeout(function () {  
            map.resize();  
            map.reposition();  
        }, 500);  
    });  
})‍‍‍‍‍‍‍‍‍

JustinBridwell2 · ‎06-02-2020

I tried applying this in a few different places, but it didn't seem to work. My latest attempt I added it in the Default.aspx file that has the front end .html. The scenario compare maps (there can be up to 3) are here:

So, then I added the following in the <script> tag:

map.on("load", function () {
registry.byId("map1").on("resize", function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
map.resize();
map.reposition();
}, 500);
});
registry.byId("map2").on("resize", function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
map.resize();
map.reposition();
}, 500);
});
registry.byId("map3").on("resize", function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
map.resize();
map.reposition();
}, 500);
});
});

I tried clearing the cache but the issue persists.

KenBuja · ‎06-02-2020

You should do this for each individual map, since they are loading separately.

map2.on("load", function () {  
    registry.byId("map2").on("resize", function () {  
        clearTimeout(resizeTimer);  
        resizeTimer = setTimeout(function () {  
            map2.resize();  
            map2.reposition();  
        }, 500);  
    });  
})‍‍‍‍‍‍‍‍‍

JustinBridwell2 · ‎06-02-2020

OK, I am having some issues using on("load") as these maps are only rendered after a button is clicked and there is no id = "map1" on load.

ChristianBischof · ‎06-05-2020

Have you tried executing the "on load stuff code" as well only when the button is clicked?

document.getElementById("yourbutton").addEventListener("click",function(){
    //the onload stuff code
});‍‍‍‍‍‍