Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

Has anyone had success using an ArcGIS Javascript API map within a jQuery UI accordion? I have a simple example here:

http://chadwilcomb.com/maps/test/AGS_jQueryUI.htm

There is an offset between the mousedown location and the map. For instance, if you SHIFT + Drag to zoom, you will see the zoom box is severely offset from the mouse location. Also, if you double-click to zoom, the map centers on a different location than where you double-clicked. I have checked all the CSS settings in Firebug and nothing seems to really help. Anyone have any other ideas?

Additional info:

I originally experienced this problem within an ASP.NET MVC3 View, but as you can see it still occurs in a simple HTML file.

The original map had a mouseover tooltip dialogue on a feature layer and that worked as expected.

The same behavior exists when using the Dojo Accordion as well...

http://chadwilcomb.com/maps/test/AGS_DojoAccordion.htm

share|improve this question
    
Strange, the mousedown location is the same distance (height) away from the top of the map div as the height of the stacked accordion headers. –  Michael Markieta Jan 24 '12 at 16:28
    
Notice that when you resize the browser window, your map div container resizes to the proper extent. When this happens, your mousedown location is actually corrected! –  Michael Markieta Jan 24 '12 at 16:38
    
Looks like Derek answered your specific question, but related issue, I have been including dijit.popup._beginZIndex = 5000; when I place a dojo esri dijit within a jquery container. For example, when putting the measure dijit in a jquery dialog, the dijit dropdown boxes display behind the jquery dialog. Starting the z index for the dijit solves this problem. –  awesomo Jun 13 '13 at 16:40
add comment

1 Answer

up vote 2 down vote accepted

Call map.reposition() after your map div is repositioned (e.g., when your pane with the map in it is shown).

share|improve this answer
    
Thanks Derek! I added the following to my jQuery: $("#accordion").accordion({ change: function () { map.reposition(); } }); –  chadwilcomb Jan 24 '12 at 17:50
    
:) Glad to help! –  Derek Swingley Jan 24 '12 at 18:00
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.