Take the 2-minute tour ×

I need to show an infoWindow outside the map (i.e. have it owned by the body of the HTML document, not the map div). If i subclass InfoWindowBase I can do this myself but I really don't want to do that. Is there any way of doing this?

I have tried the following without success:-

     var infoWindow = new esri.dijit.InfoWindow({
      domNode: dojo.create("div", null, dojo.body())
map.InfoWindow = infoWindow;

and map.infoWindow.place("", dojo.body());



share|improve this question

3 Answers 3

I used dojo.place after an info window is opened initally (after the infoWindow node is created in the DOM) to move it to the map's parent container.

//move the info window outside of the map container so it doesn't get cut off
dojo.place(dojo.byId("map_infowindow"), dojo.byId("uxRPMapContent"), "first");

...where uxRPMapContent is a parent container to the map div. This just moves the info window outside of the map - but then all of the infoWindow's anchor point calculations will be off.

*Note, the parent container needs to have a style that includes position:relative so that the absolutely positioned infoWindow will be placed relative to the parent, not relative to the <body>.

So I had to include a function to account for the new offset. In my case:

function getInfoWindowOffset(screenPoint) {
//Given a point, find out the offset screen position and return
var od = dojo.position(dojo.byId("uxRPMapContent"), false); //parent
var om = dojo.position(dojo.byId("map"), false); //map

var dx = om.x - od.x;
var dy = od.y - om.y;

screenPoint.x = screenPoint.x + dx;
screenPoint.y = screenPoint.y + dy + 30;

return screenPoint;

In this case, I'm finding the offset between the map and its parent container, both for x and y, and applying that to an incoming screenPoint.

Then, when it comes time to open the window (I'm doing it when a graphics layer is clicked), I pass the screen point that would usually be used to anchor the info window into my custom function to apply the offsets:

var cpt = esri.geometry.toScreenGeometry(map.extent, map.width, map.height,e.graphic.geometry);
var nscpt = getInfoWindowOffset(cpt);
map.infoWindow.show(nscpt, map.getInfoWindowAnchor(nscpt));

(Regarding screenPoint.y + dy + 30 - that 30 is a fudge factor. Could probably figure out where it's coming from and make it dynamic but...)

The last piece I'm working on is to hide the infoWindow if the user drags the anchor of the infoWindow outside the map bounds (as it is, the infoWindow stays open and floats around the page if the user pans too far.)

share|improve this answer

In case anyone else has this issue,

dojo.ready(function() {
            dojo.style(dojo.byId("map"), {overflow: "visible" });           
            dojo.style(dojo.byId('map_root'), {overflow: 'visible' });          

share|improve this answer
seems like that may cause other issues, unless it's sole purpose was to hide the info window. –  Steve Mar 26 '12 at 3:03

I am not sure if I got your point correctly, but what you can do is putting it on, for example, a Content Pane using dojo.byId("HTML Element").innerHTML, once you have already generated the content for the Info Window.

For example, like this:

    <div dojoType="dijit.layout.BorderContainer" style="width:100%; height:100%;margin:0;">
        <div dojoType="dijit.layout.ContentPane" region="right" style="width:300px; height:200px; overflow:auto;"
            <div id="your_html_element_outside_map"></div>

And then, you generate the inner HTML as a common string and add it like this:

var your_HTML_content = "<b> Just an example </b>";
dojo.byId("your_html_element_outside_map").innerHTML = your_HTML_content;

This should replace your empty HTML div by the example quotation.

share|improve this answer

Your Answer


