Map Extent Changed + Info Window Hide() leaves Info Window Visible

AaronConnolly · ‎10-24-2011

I've adapted the "Non graphic info window" sample found here (link) to test an issue I found with the "onExtentChange" event and the Info Window

To reproduce the issue:

1. Browse to the attached .htm filer.
2. Zoom into a level greater than 10.
3. Click the map and wait for the info window to display.
4. Drag zoom out to level 9.

Notice the following:

- You can pan the map but the info window does not follow the map anymore if you pan the map.
- The info window should disappear after that last zoom out extent change (going from 10 to 9), but it doesn't. It will disappear when you move the extent once more, though.

Why is this happening? Why is the .hide() call seemingly not respected in the onExtentChange event even though the infoWindow is clearly visible? You can also see that the isShowing property of the infoWindow is still "true" even though we've hidden it.

Am I doing something wrong here?

Thanks,
- Aaron

AaronConnolly · ‎10-24-2011

Whoops. I couldn't upload an .htm file. Here's the source instead:

[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Non graphic info window</title>

    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <style type="text/css">
      /* set title font properties */
      .infowindow .window .top .right .user .titlebar .title { font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:14pt; }
      /* set content font properties */
      .infowindow .window .top .right .user .content { font-style:italic;font-weight:bold; font-size:10pt; }
    </style>

    <script type="text/javascript">
        dojo.require("esri.map");

        var map;
        function init() {

            var initExtent = new esri.geometry.Extent({ "xmin": -13646149, "ymin": 3606604, "xmax": -12393805, "ymax": 4232776, "spatialReference": { "wkid": 102100} });

            map = new esri.Map("map", { extent: initExtent });
            dojo.connect(map, "onLoad", function (map) { map.infoWindow.resize(250, 100); });

            map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"));
            dojo.connect(map, "onClick", addPoint);

            dojo.connect(map, "onExtentChange", function () {

                $("#mapLevel").text("Map level: " + map.getLevel());
                $("#infoWindowStatus").text("Info window visible: " + map.infoWindow.isShowing);

                if (map.getLevel() < 10) { map.infoWindow.hide(); }
            });
        }

        function addPoint(evt) {

            map.infoWindow.setTitle("Coordinates");

            //Need to convert the coordinates from the map's spatial reference (web mercator) to geographic to display lat/lon values
            var geoPt = esri.geometry.webMercatorToGeographic(evt.mapPoint);
            map.infoWindow.setContent("lat/lon : " + geoPt.y.toFixed(2) + ", " + geoPt.x.toFixed(2) + "<br />screen x/y : " + evt.screenPoint.x + ", " + evt.screenPoint.y);
            map.infoWindow.show(evt.mapPoint, map.getInfoWindowAnchor(evt.screenPoint));
        }

        dojo.addOnLoad(init);
    </script>
</head>
<body class="claro">
    <div id="map" style="width:1024px; height:512px; border:1px solid #000;"></div>
    <p id="mapLevel"></p>
    <p id="infoWindowStatus"></p>
</body>
</html>
[/HTML]

derekswingley1 · ‎10-25-2011

Why not use onZoomEnd instead? I think that will get you what you want. Also, I know this is just a simple repro page but you could remove your jquery dependency by using dojo.byId('someId').innerHTML instead of $('#someId').text().

AaronConnolly · ‎10-25-2011

Thanks for the reply!

We use onExtentChange to for other things (like panning the map around) in addition to performing certain logic on certain zoom levels. Is there a technical reason why this does not work with onExtentChange? No error is thrown and the behavior appears to be a bug-like.

For the record I tried using onZoomEnd and it does correct the issue that we're seeing, however in order to switch to this event we'll have to re-work some things.

Thoughts?