Map resize event not firing

ChristianDebono

I am using jQWidgets splitter for my map component https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/index.htm#demos/jqxsplitter/vertical-splitter.htm. I have on panel with the map component and the other with other data.

[ATTACH=CONFIG]32669[/ATTACH]

I want that my map resizing accordingly as the user moves the panel. My problem is that the 'resize' for the map div is not firing.

This is the html code I am using:

 <div id="mainSplitter">
            <div class="splitter-panel">        
                <div id="mapDiv">              
                </div>           
            </div>
            <div class="splitter-panel">
                <p>Data</p>
            </div>
        </div>

JavaScript Code:

var resizeTimer;
            map.on("load", function (theMap) {

                dojo.connect(dom.byId("mapDiv"), 'resize', function () {
                    //resize the map if the div is resized
                    alert("Hello");
                    clearTimeout(resizeTimer);
                    resizeTimer = setTimeout(function () {
                        map.resize();
                        map.reposition();
                    });
                });
            });

I have tried to do it with the click event of the "mapDiv" and it worked, and I can't figure out why its not working on the resizing. Any ideas on how this could be implemented please? Thanks

85956map.jpg

map.jpg

Anonymous User

Original User: xupla

Hi Christian,

I think it might be because the map isn't aware that its container is being resized.

You may have to write a custom event listener using the splitter.
When the splitter is moved, your event listener would resize the map div (and the map).

If you didn't want to use a jQuery module, I know DOJO has splitter functionality built in using ContentPanes and BorderContainers. The map would automatically resize when its ContentPane is resized.

Thanks for your reply Jon. Yes in fact I have used JQuery to solve this.

var resizeTimer;
            $('#mainSplitter').resize(function () {
                clearTimeout(resizeTimer);
                resizeTimer = setTimeout(function () {
                    map.resize();
                    map.reposition();
                });
            });