topic Re: Adjusting InfoWindow Position in ArcGIS JavaScript Maps SDK Questions

Adjusting InfoWindow Position

AlexDeVine — Thu, 01 Nov 2012 14:09:25 GMT

Morning,

I am making a web application that features an info window that displays a pdf hosted on my web server. The content of the infoWindow is set by a function that generates a deferred object that is an iframe display in the infoWindow. This is relevant because this structure makes it necessary for me to use the infoWindow rather than the popup dijit.

These pdfs are 4x4 and the infoWindow is sized slightly larger to enable full display of the content. The problem I am running into is that

map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));

sometimes cause the infoWindow to be partially off the map. Does anyone know of any code that I can use to make the info windows aware of the map border and adjust the position so that entire infoWindow is on the map? I remember doing this in Silverlight for a project but can't seem to find an analog for Javascript looking through the API reference and forum posts.

Thanks in advance for any help.

Alex

Re: Adjusting InfoWindow Position

SteveCole — Wed, 14 Nov 2012 18:55:56 GMT

Hi Alex,

Sorry to bump but I'm curious if you ever resolved this for the app you were working on?

Steve

Re: Adjusting InfoWindow Position

AlexDeVine — Sat, 11 Dec 2021 22:39:45 GMT

Hi Steve,

I did resolve it by adjusting the map rather than the infoWindow.

Here is the code I used:

function showResults(idResults, evt) {
            for (var i = 0, il = idResults.length; i < il; i++) {
                var graphic = idResults;
                graphic.feature.setInfoTemplate(sustaintemplate);
            }
            map.infoWindow.setContent(updatePopup(graphic));

            //map.graphics.clear();

            //Set the infoWindow to open at the top right of the point at all times
            map.infoWindow.setFixedAnchor(esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT);

            //Determine the upper right, and center, coordinates of the map
            var maxPoint = new esri.geometry.Point(map.extent.xmax, map.extent.ymax)
            var centerPoint = new esri.geometry.Point(map.extent.getCenter());

            //Convert these to screen coordinates
            var maxPointScreen = map.toScreen(maxPoint);
            var centerPointScreen = map.toScreen(centerPoint);

            //Subtract the size of the infoWindow, including a buffer.
            //This will show whether the infoWindow would spill out of the current view.
            var xDiff = Math.abs(maxPointScreen.x - evt.screenPoint.x) - 470;
            var yDiff = Math.abs(maxPointScreen.y - evt.screenPoint.y) - 490;

            //If required, recalculate a new centerpoint which accounts for the infoWindow
            if (xDiff < 0) { centerPointScreen.x -= xDiff; }
            if (yDiff < 0) { centerPointScreen.y += yDiff; }

            //Pan the map to the new centerpoint (in Map coordinates)
            centerPoint = map.toMap(centerPointScreen);
            map.centerAt(centerPoint);

            //Display the infoWindow at the original point clicked
            map.infoWindow.show(evt.screenPoint, esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT);

        }

Courtesy Of Stephen Lead in this thread

Alex

Re: Adjusting InfoWindow Position

Joao_PauloPaschoal — Sat, 11 Dec 2021 22:39:47 GMT

Thanks Alex, that actually saved me a lot of time. I adapted it to a function which measures how close a DOMElement is to the map extent boundaries:

getElementDistanceFromExtent: function(element) {
    if (!$ic.isNotNullObject(element)) return false;

    var posElementInfo = dojoDomGeometry.position(element);
    var maxPoint = new Point(this.map.extent.xmax, this.map.extent.ymax);
    var minPoint = new Point(this.map.extent.xmin, this.map.extent.ymin);
    var centerPoint = new Point(this.map.extent.getCenter());  

    var maxPointScreen = screenUtils.toScreenGeometry(this.map.extent, this.map.width, this.map.height, maxPoint);
    var minPointScreen = screenUtils.toScreenGeometry(this.map.extent, this.map.width, this.map.height, minPoint);

    var distXmax = maxPointScreen.x - (posElementInfo.x + posElementInfo.w);
    var distXmin = posElementInfo.x - minPointScreen.x;
    var distYmax = minPointScreen.y - (posElementInfo.y + posElementInfo.h);
    var distYmin = posElementInfo.y - maxPointScreen.y;


    return { distXmax: distXmax, distXmin: distXmin, distYmax: distYmax, distYmin: distYmin };
}