Mouse click on map not accurately selecting feature for InfoTemplate popup

82
5
06-02-2020 06:16 AM
Highlighted
Occasional Contributor II

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". enter image description here

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?

Reply
0 Kudos
5 Replies
Highlighted
MVP Honored Contributor

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);
});
})
Highlighted
Occasional Contributor II

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:

<div id="compareMaps" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
  <div style="height: 100%">
    <div id = "mapDiv1">
        <div id="map1" data-dojo-type="dijit.layout.ContentPane" title="map1"></div>
        <div id="mapGridLabel1"></div>
        <div id= "mapGrid1" data-dojo-type="dijit.layout.ContentPane" title="Top Road SEG_ID"></div>
    </div>
    <div id = "mapDiv2">
        <div id= "map2" data-dojo-type="dijit.layout.ContentPane" title="map2"></div>
        <div id="mapGridLabel2"></div>
        <div id= "mapGrid2" data-dojo-type="dijit.layout.ContentPane" title="Top Road SEG_ID"></div>
    </div>
    <div id = "mapDiv3">
        <div id= "map3" data-dojo-type="dijit.layout.ContentPane" title="map3"></div>
        <div id="mapGridLabel3"></div>
        <div id= "mapGrid3" data-dojo-type="dijit.layout.ContentPane" title="Top Road SEG_ID"></div>
    </div>
  </div>
  <div id= "legendCompareMap" data-dojo-type="dijit.layout.ContentPane" title=""></div>
</div>

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. 

Reply
0 Kudos
Highlighted
MVP Honored Contributor

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

Highlighted
Occasional Contributor II

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.

Reply
0 Kudos
Highlighted
Esri Contributor

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
});‍‍‍
Reply
0 Kudos