How to refresh map coordinates if browser window adds scrollbars?

ChrisDunlop · ‎02-12-2015

Hello. I'm working on a simple app that lets the user click on the map to select a polygon and then the attribute information is presented in a results area. My map is on the right hand side of the screen (position = fixed). The results panel is on the left hand side.

When the attribute results get populated, they sometimes extend beyond the screen bottom. When this happens, the browser window creates a vertical scrollbar, and I can scroll down and see all the attributes (the map stays fixed on the right hand side of the screen).

The problem is, the map isn't aware of the addition of the scrollbar, or if I've scrolled down. If I then click another point on the map, the coordinates are offset by the scrollbar width, and by the amount I've scrolled down. So the wrong polygon gets selected.

I'm sure others have run into this. Is there are easy way to fix this?

Thanks,

Chris

TimWitt2 · ‎02-12-2015

Chris,

this might to the trick? Map | API Reference | ArcGIS API for JavaScript

map.reposition();

Tim

View solution in original post

TimWitt2 · ‎02-12-2015

Hey Chris,

Can you post your code or a fiddle? That might help!

Tim

ChrisDunlop · ‎02-12-2015

Sorry, here's a stripped down example. Look at the screenPoint coordinates - the upper left of the map is 0,0.

Then, click the Add Attributes button. The screenPoint coordinates get shifted about -11 pixels.

Try scrolling down. You'll see the screenPoint Y coordinates get messed up.

If you resize the browser window the coordinates gets reset.

Thanks,

Chris

<!DOCTYPE html>

<head>

border: 2px solid #BBBBBB;
border-style: solid;

}

#attributeContainer
{
position: absolute;
left: 5px;
top:10px;
display: block;
padding:10px;
width:calc(49% - 20px);

border: 1px solid #BBBBBB;
border-style: solid;
background:#dbebf7;

z-index: 60;
}

</style>

function addAttributes() {

theTxt=""
for (i=0; i<1000; i++) {
theTxt=theTxt+"yada yada yada "
}
document.getElementById("attributes").innerHTML=theTxt
}

require([
    "dojo/parser",
"dojo/dom",
"dojo/on",
    "esri/config",
"esri/map",
"esri/geometry/Extent",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ArcGISTiledMapServiceLayer",
    "dojo/domReady!"
], function(
parser,
dom,
on,
esriConfig,
Map,
Extent,
ArcGISDynamicMapServiceLayer,
ArcGISTiledMapServiceLayer
    )
{
// create layout dijits
        parser.parse();

        // specify proxy for request with URL lengths > 2k characters
        //esriConfig.defaults.io.proxyUrl = "../proxy/EsriProxyFile";

esriConfig.defaults.map.basemaps.OCBasemap = {
baseMapLayers: [
{ url: "https://webmaps.orcity.org/arcgis/rest/services/Basemap/MapServer" }
],
   title: "OCBasemap"
};

var imageParameters=new esri.layers.ImageParameters()
imageParameters.format="png32"

        map = new Map("map",{
   zoom: 1,
   scaleSlider: "small",
   basemap: "OCBasemap",
});

var cityLimits = new ArcGISDynamicMapServiceLayer("https://webmaps.orcity.org/arcgis/rest/services/CityLimits/MapServer",{"imageParameters":imageParame...});
map.addLayer(cityLimits);

map.on("load", mapSetup);

function mapSetup() {
   map.showZoomSlider();
   map.enableScrollWheelZoom();
   map.enableRubberBandZoom()
   map.on("mouse-move", showCoordinates);
   map.on("mouse-drag", showCoordinates);
}

map.setMapCursor("pointer")

function showCoordinates(e)
{
   sp=e.screenPoint
   mp=e.mapPoint
   dom.byId("info").innerHTML = "mapPoint="+mp.x.toFixed(3) + ", " + mp.y.toFixed(3) + "   screenPoint=" + sp.x.toFixed(3) + ", " + sp.y.toFixed(3);
}

}
);

</script>
</head>

<div id="attributeContainer">
<div id="attributes">
<button onclick="addAttributes()">Add Attributes</button>
</div>
</div>

</body>

</html>

TimWitt2 · ‎02-12-2015

Chris,

this might to the trick? Map | API Reference | ArcGIS API for JavaScript

map.reposition();

Tim

ChrisDunlop · ‎02-12-2015

Thanks Tim! I added map.resposition() after my code that generates the attribute list, and also in a JQuery (window).scroll function. That seems to catch everything.

Chris

OwenEarley · ‎02-12-2015

You could use CSS rules to prevent the window scrollbar from appearing at all. Set a height value to the attributeContainer div and then only scroll it.

#attributeContainer
{
    /* other styles... */
    overflow-y: scroll;
    height: calc(100% - 38px);
}

See this working example.