Event to notify when map has moved positioned within browser... does one exist??

PeterLen · ‎07-02-2013

I am using the ArgGIS Javascript API v3.5. I have a map displayed in my browser, but it does not take up the full page. One of the things I have is to place a map marker where the user clicks on the map. All is good there. But, if the user does something that moves the map's position within the browser window, say by scrolling or by moving a splitter, the map marker is displayed in a different place than where the mouse click took place. I believe this is because the screen to coordinate mapping got out of sync when the map was repositioned. I saw that there is a map event called onReposition but that is not getting triggered during the cases I mentioned. I need to find an event that will get triggered so that I can call something like resize() (or something else) to get the screen to coordinate mapping back into sync.

Does anyone know if a map event exists that will help me or do I need to deal with events outside of the map to track when to call a map.resize()??

Thanks - Peter

JeffJacobson · ‎07-08-2013

You really need to wrap HTML code samples in [HTML] tags so they are readable.

[HTML]<html>

    <head>
        <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
        <style>
            html, body, #map {
                height:500px;
                width:100%;
                margin:0;
                padding:0;
            }
        </style>
        <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
        <script>
            var MAP_OBJ;

            dojo.require("esri.map");

            function init() {
                MAP_OBJ = new esri.Map("map", {
                    basemap: "topo",
                    center: [-122.45, 37.75],
                    zoom: 10,
                    sliderStyle: "small"
                });
                dojo.connect(MAP_OBJ, "onLoad", function() {
                    dojo.connect(MAP_OBJ, "onClick", addMapMarker);
                    dojo.connect(MAP_OBJ, "onResize", onMapResize);
                    dojo.connect(MAP_OBJ, "onReposition", onMapReposition);
                });
            }

            //
            function addMapMarker(evt) {
                var mp = evt.mapPoint;
                var symbol = new esri.symbol.SimpleMarkerSymbol(
                esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE,
                10,
                new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                new dojo.Color("red"), 1),
                new dojo.Color("blue"));

                var graphic = new esri.Graphic(mp, symbol);

                MAP_OBJ.graphics.add(graphic);

            }
            dojo.ready(init);
            //
            function collapseDiv() {
                var div = document.getElementById("divTop");
                div.style.display = "none";
            }
            //
            function displayDiv() {
                var div = document.getElementById("divTop");
                div.style.display = "block";
            }

            function onMapResize(evt) {
                alert("RESIZE");
            }

            function onMapReposition(evt) {
                alert("REPOSITION");
            }
        </script>
    </head>

    <body>
        <form>
            <div id="divTop" style="padding:10px;border:2px solid black; height:100px">
                <input type="button" value="Collapse" onClick="javascript:collapseDiv()">
                <br/>Step 1: Click on the map and see marker placed where click occurred.
                <br/>Step 2: Click the Collapse button and click on the map again. Marker is not displayed at click location.</div>
            <div id="map"></div>
            <div id="divBottom" style="padding:10px;border:2px solid black; height:100px">
                <input type="button" value="Display" onClick="javascript:displayDiv()">
                <br/>Step 3: Click the Display button and click on the map again.</div>
        </form>
    </body>

</html>
[/HTML]

JeffJacobson · ‎07-11-2013

Have you tried putting your content in BorderContainers? You could use the dojox/layout/ExpandoPane to toggle the pane on and off.