topic Re: Auto-panning map so that infowindow is fully visible in ArcGIS JavaScript Maps SDK Questions

Auto-panning map so that infowindow is fully visible

LisaEidson — Fri, 15 Jul 2011 19:17:12 GMT

I'm looking for some guidance on how to make my map pan when an infowindow is launched (result of an identify) if the infowindow is not completely within view.

Take this example:

Here's my map prototype: satellite Bing layer with wilderness boundaries ArcGIS dynamic service that my colleague maintains overlayed.

When you click within the Absaroka-Beartooth Wilderness boundary you get the infowindow with the results of an identify (grabs and ID number then outputs data from an array). Although I've used tabs to ensure that the infowindow can contain a fair amount of information but isn't too large, depending on where you click it will often be partially obscured (with the rest being outside the current map view).

If the infowindow isn't fully shown, I want the map to pan so that it is. So in this example, I want the map to pan to the below view.

This seems like a pretty useful operation (Google Maps api, for example, automatically takes care of this) but I haven't been able to find any examples or anything about how to do it. So any assistance would be much appreciated. Thanks in advance.

The code for the prototype map from which I took the above screen snaps is available on my website at: http://www.wilderness.net/mapTest_esri3_strip.htm

Re: Auto-panning map so that infowindow is fully visible

StephenLead — Sat, 11 Dec 2021 18:01:57 GMT

Your code contains:

map.infoWindow.resize(415,230);
map.infoWindow.show(evt.screenPoint, esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT);

so it looks like you always want to show the infoWindow to the upper-right of the evt.screenPoint (the location the user clicks) and have it appear at this fixed size.

You can use this logic to calculate whether the infoWindow will fit at a given point:

function executeIdentifyTask(evt) {
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) - 435;
var yDiff = Math.abs(maxPointScreen.y - evt.screenPoint.y) - 285;

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

Steve

Re: Auto-panning map so that infowindow is fully visible

LisaEidson — Mon, 18 Jul 2011 20:45:43 GMT

A few adjustments to the buffer amounts and this works flawlessly! Just what I wanted. Thanks much!

Re: Auto-panning map so that infowindow is fully visible

derekswingley1 — Tue, 19 Jul 2011 01:10:16 GMT

Steve's approach works, but why not use map.getInfoWindowAnchor? It's demonstrated one of the queryTask samples.

Re: Auto-panning map so that infowindow is fully visible

StephenLead — Tue, 19 Jul 2011 01:16:06 GMT

why not use map.getInfoWindowAnchor?

Wouldn't that give the same coordinate as evt.screenPoint, though? And I'm not sure how it helps to determine whether the map needs to pan.

Cheers,
Steve

Re: Auto-panning map so that infowindow is fully visible

derekswingley1 — Tue, 19 Jul 2011 01:21:23 GMT

Instead of panning the map, the map opens the info window so that it is completely within the map. This isn't exactly what OP asked for but figured I'd put it out there anyway...

Re: Auto-panning map so that infowindow is fully visible

StephenLead — Tue, 19 Jul 2011 01:30:06 GMT

Yeah I personally don't like the way that Google Maps can sometimes pan unpredictably to accommodate the infoWindow, but sometimes it makes sense.

Given that the infoWindow (apparently?) has four possible angles from the anchor point to the actual window, sometimes it isn't possible to show it completely within the current view without panning.

I guess another option could be to do away with the anchor point and arrow, and just position it somewhere constant (eg a sidebar)

Re: Auto-panning map so that infowindow is fully visible

derekswingley1 — Tue, 19 Jul 2011 01:40:36 GMT

Personally, I'd rather see the info window accomodate the map rather than the map moving around. But maybe that's just because I've worked with this API so much and I'm just used to that behavior. I also like the sidebar approach.

The info window has four possible orientations: upper left, upper right, lower left and lower right. To figure out where to show it, the map is divided into four quadrants. If the anchor point for the info window is in the upper left, display the info window pointing to the lower right. If the anchor point is in the lower left, display the info window pointing to the upper right. Basically just show it so that it displays opposite the quadrant that was clicked so that the entire info window is visible.

Re: Auto-panning map so that infowindow is fully visible

JeffSmith4 — Sat, 11 Dec 2021 18:01:59 GMT

Your code contains:

map.infoWindow.resize(415,230);
map.infoWindow.show(evt.screenPoint, esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT);

function executeIdentifyTask(evt) {
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) - 435;
var yDiff = Math.abs(maxPointScreen.y - evt.screenPoint.y) - 285;

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

Steve

Just wanted to say thanks to Steve for this code, which works perfectly and saved me a ton of time. +100 Internets for you!

I'm migrating my application from the Google Maps extension for the JSAPI to v2.7 of the ESRI Javascript API (no google maps). My infowindows contain a large amount of information and were previously designed with the assumption that the anchor would be fixed and the map would automatically pan so that the whole infowindow would be visible. This is the default behavior of an infowindow in the google API. When I migrated the app, I was finding that in certain situations, the infowindow would display partially outside the map bounds and the user would have to manually pan to see the whole thing.

I was getting hung up on trying to programatically figure out the top corner of the infowindow and then do some math to figure out if it falls outside the map bounds, but Steve's solution avoids that whole issue by using the constants. Very nice! Just tweak the constants for your particular situation.

Re: Auto-panning map so that infowindow is fully visible

JayFowler — Thu, 14 Jun 2012 13:02:08 GMT

Thanks Steve! That worked great and was easy to implement.

Re: Auto-panning map so that infowindow is fully visible

StevenHaslemore — Sat, 11 Dec 2021 18:02:02 GMT

I'm having an issue with the infoWindow location updating after the map.infoWindow.show(..) line.

The code in this thread is working perfectly and places the infoWindow where it should be, but the event is then propagating into the esri api code, producing exceptions in onAnimate, and subsequently updating the infoWindow location to incorrect locations.

I've tried to stop this behavior with

dojo.connect(disruptionsPolyline, "onClick", function(a){
    dojo.stopEvent(a);
    addInfoWindowCode(a);
});

Another curiosity is, if the infoWindow has multiple features in it, switching between them will update the infoWindow to the correct location.

Any thoughts appreciated.

Thanks,
Steven

Re: Auto-panning map so that infowindow is fully visible

DianaBenedict — Sat, 11 Dec 2021 18:02:05 GMT

Personally, I got so frustrated with the InfoWindow (not displaying fully in the area of interest, jumping around when you go to the next feature, etc...) that I ended up using a dojo FloatingPane instead. I had to do a lot more coding and still have some "kinks" to work out but the experience is much nicer. Unfortunately I can not show you all a working sample because our test website is behind a firewall but I can submit some sample code to get you started with at least setting up the floating pane correctly, It will then be up to you to set up the content within the floating pane.


function createFloatingPane(floatingPaneId, paneTitle, tabContainerID) {
//  /*** floating panes ************************************************/
  //add a dock
  //I don't use the dock for user interaction. You could however make it a region in the container or position it somewhere in the app
  //If you display the dock, much like the floating panes, you'll need to do some css and dojo work to make it look and function right
  //So why create a dock? If you don't, dojo will do it for you and you won't like the result (see the example at http://dojotoolkit.org/reference-guide/1.7/dojox/layout/FloatingPane.html#dojox-layout-floatingpane)
  var dock = new dojox.layout.Dock({
    id: "dock",
    style: 'position:absolute; bottom:0; right:0; height:0px; width:0px; display:none; z-index:0;'
    //class: "dockClass"
  }, dojo.create('div', null, dojo.body()));

  //add a floating pane
  var floatingPaneAttributes = new dojox.layout.FloatingPane({
    id: floatingPaneId,
    title: paneTitle,
    resizable: true, //allow resizing
    closable: true, //we never want to close a floating pane - this method destroys the dijit
    dockable: true, // yes we want to dock it
    dockTo: dock, //if you create the floating pane outside of the same function as the dock, you'll need to set as dijit.byId('dock')
    style: 'position:absolute;top:130px;left:402px;width:420;height:450px;visibility:hidden;z-index:999 !important'
    //class: "foatingPaneClass"
    //style: 'position:absolute;top:130px;left:402px;width:240px;height:320px;visibility:hidden;z-index:999 !important'
    //you must set position:absolute; and provide a top and left value (right and bottom DO NOT WORK and will cause the floating pane to appear in strange places depending on browser, for example 125684 pixels right)
    //Why top and left? The position of a floating pane is a relationship between the top-left corner of dojo.window and the top-left corner of the dijit
    //you must also set a height and width
    //z-index is mainly irrelavant as the dijit will control its own z-index, but I always set it to 999 !important to avoid the occasional and mysterious problem of the title and content panes of the floating pane appearing at different z-indexes
  }, dojo.create('div', null, dojo.body()));

  floatingPaneAttributes.resize({ w: 420, h: 450 });

  //add the TabContainer to the Floating Pane
  var tc = new dijit.layout.TabContainer({
    id: tabContainerID,
    tabPosition:'bottom',
    style: "height: 100%; width: 100%;",
    class: "claro"
  });
         
  // place the tabcontainer into content pane.
  // IMPORTANT: SINCE FLOATING PANE IS NOT A "Container", WE MUST ATTACH THE TABCONTAINER TO ITS DOM NODE.
  tc.placeAt(floatingPaneAttributes.containerNode);
  // call startup to layout everyone.
  floatingPaneAttributes.startup();

  //Override the close function so the control does not get destroyed
  floatingPaneAttributes.close = function () {
    floatingPaneAttributes.minimize();
    _isFloatingPaneVisible = false;
    clearSelectedFeatureLayers();
    map.graphics.clear();
    toolbarOption = "None";
  };

  //connect the events
  dojo.connect(floatingPaneAttributes, 'onFocus', function () {
    dijit.byId(floatingPaneId).bringToTop()
  });

  dojo.connect(floatingPaneAttributes, 'onShow', function () {
    dijit.byId(floatingPaneId).bringToTop();
    drawToolbar.deactivate();
    map.enableMapNavigation();
    toolbarOption = "ModifyAttributes"
    map.disableScrollWheelZoom();
    navToolbar.activate(esri.toolbars.Navigation.PAN);
  });
}

Note that I had to override the floatingPane.close method ... this is a bit of a hack. I know that there is a better way to do this but for now it seems to work. I think the way to do this is to declare a custom floating pane and override my own close functionality but I am not that verse with Dojo to create a custom widget. If someone wants to play with that and show me a better way that would be great!

Also, note that I connected some events to handle and I also created a TabContainter within the floating pane ...obviously you can add whatever content pane you wish. But the trick to get it load correctly was the use of the .containerNode (tc.placeAt(floatingPaneAttributes.containerNode); )

After I got this to work I was able to hook up a highlight selected fetaure so that the user can see which feature we are currently viewing. I just added a simple graphic to the map with highlight color or interest.

Like I said lots more work to do but it seems to work mostly OK.

Re: Auto-panning map so that infowindow is fully visible

SteveCole — Thu, 07 Feb 2013 17:45:43 GMT

@Diana-

Do you have a screenshot of what that looks like that you could share?

I'm in the same boat and the code provided earlier in this thread didn't work well for me and my own kludgy code to "sense" where my feature is on the map and adjust accordingly is almost more trouble than it's worth.

I did submit an enhancement idea for ESRI to add an option to map creation so that the API takes care of all this. It's ESRI's code and they know it better than any one of us. Vote if you're so inclined.

Re: Auto-panning map so that infowindow is fully visible

DianaBenedict — Sat, 11 Dec 2021 18:02:08 GMT

@Diana-

Do you have a screenshot of what that looks like that you could share?

I'm in the same boat and the code provided earlier in this thread didn't work well for me and my own kludgy code to "sense" where my feature is on the map and adjust accordingly is almost more trouble than it's worth.

I did submit an enhancement idea for ESRI to add an option to map creation so that the API takes care of all this. It's ESRI's code and they know it better than any one of us. Vote if you're so inclined.

Attached is a screen shot of the AttributeInspector that I have hooked up to a div in the 1st tab container.

So esentially what I did is the following:
1) create the floating panel as described in previous thread
2) used the AttributeInspector Dijit and set up the layerInfos and FieldInfos as needed
3) add the tab page(s) as needed and attached the AttributeInspector to the tab page (see example code below)
4) statup the attribute inspector dijit
NOTE: I would think that you could use the InfoTemplate object or something else to set up your content as needed in lieu of the attribute inspector (I think) and just attach the content to the tab container (tab page)
5) set up a map.onClick event to select my features of interest --> since I am using an AttributeInspector, I do not need to setFeatures to the attribute Inspector ..but here is where you would need to attach the content to the selected features (somehow)
6) onSelection complete --> show the floating pane

//tabObjectArray is an array of  custom object with the following properties
// { TabOrder: tabConfig.GroupOrder, TabTitle: tabConfig.Title, TabContent: "<div id='" + tabConfig.DivHolderId + "' ></div><br /><br />" }

function addTabPagesToTabControl(tabControl, tabObjectArray) {
  require(["dojo/_base/array", "dijit/layout/ContentPane"], function (array, contentPane) {
    if (tabControl.hasChildren()) {
      var tabControlChildren = tabControl.getChildren();
       //work still in progress, need to remove all child nodes (I think)
      alert("tabcontrol has children count = " + tabControlChildren.length);
    };
    array.forEach(tabObjectArray, function (tabObject) {
      var tabPage = new contentPane({
        title: tabObject.TabTitle,
        content: tabObject.TabContent
      });
      tabControl.addChild(tabPage);
    });
  });
}

function showAttributePane() {
  var attributePane = dijit.byId(_floatingPaneId);
  if (attributePane) {
    disableToolbars();
    attributePane.show()
  }
}

Like I said, I still need to work through some more stuff here. I don't even have a real framework set up yet. Currently I am just testing different options and figuring out the best way to do things based on our requirements. Then I will worry about getting it all set up correctly within a real framework ... so the code might seem a bit scattered at the moment.

Re: Auto-panning map so that infowindow is fully visible

Hernando_CountyProperty_Apprai — Tue, 17 May 2016 21:37:05 GMT

Thank you so much. This is just what I was looking for.