What specifically do I have to wait for before initializing an esri/map so that it won't assign 400 for the width and height?

[DavidElies]

I have a map that displays in a Bootstrap modal.  The map is set to 100% of its container.  Since it loads before the modal is made visible, the map assigns its containing div a css width and height of 400px. Since I am creating the map (but NOT the modal), I need to know what event or set of circumstances I need to wait for in order to properly initialize the map.  If it is possible to re-initialize or have the map reset its values after an improper initialization I would like to know how to do that, too.  To be clear, I cannot use the Bootstrap shown.bs.modal event, since the map cannot know about how it is shown (but it can, of course, inspect the DOM, so it might know something about where it is displayed).  Any insights at all would be helpful.

[DavidElies]

Thanks John,

It's not that they won't give me an event to listen to, it's that this must work 1-way.  The map component must handle its own events and expose what is necessary for the app team to handle everything else.  I've had preliminary luck with using reposition instead of resize.  If I come up with something that works, I'll post it.

Thanks again

[RiyasDeen]

Hi David,

You need to have dimension of your container div, before initializing the map. If the container div is set to display none by default, you can't get that dimensions. In that case your map will be loaded to default 400X400 px. Try setting your container div display to block before initializing the map and setting it to none again after initializing.

Refer attached sample.

I'm setting a timeout of 3 second before displaying the map, to simulate your show event after the map has been initialized.

If you comment out line 26, domStyle.set(dojo.byId("map"), "display", "block"); map will be @ 400 X 400 px else it'll be on whole screen.

[DavidElies]

Thanks again for your response, Riyas Deen

Thanks for clarifying when the problem occurs.  I know the problem happens when the div is not displayed at the time that the map is initialized.  I am looking for where or how this determination is made by the API so I can figure out how to either delay the map creation or resize/reposition the map once it does have displayable dimensions.

It would be nice if this check (for displayable dimensions) was described explicitly in the API documentation.  Also more event triggers during the map creation would make it easier to respond to certain situations.

For now, I will explicitly allow the map consumer to access the resize() and reposition() functions so that the app takes care of these functions, rather than the map.  If anyone has any idea how a map that doesn't control its container can still make sure it can be displayed, I would love to hear it.  Thanks for all your replies!

[JonathanUihlein]

Is there any reason you can't embed your map inside a DOJO ContentPane (inside a DOJO BorderContainer) and pass the BorderContainer object reference to the other team?

That way, the map always has control over its container.

Set the BorderContainer to width/height 100%.

Set the region to center for your Content Pane.

Hook up the BorderContainer resize event to your bootstrap.show() event.

Map should resize based on its container.

You really need to use events though.

[DavidElies]

Jonathan Uihlein Thanks for your input,

I can place the map in any container I wish, but the parent container will always be a part that I don't control.  If the parent container is not visible, then any size I provide is ignored, since the map creation process inspects the actual displayed dimensions of the container, and if it is not displayed, the dimensions are 0 or undefined or NaN or something else equally unusable.

I was hoping that the automatic sizing of 400 x 400 could be circumvented or interrupted either by just stopping it from happening or by delaying creation/initialization of the map until it is "safe" to use the provided dimensions.  It seems that the only way to do this is with a interval that checks periodically for displayable dimensions or to use the callback that is unavailable to me from the containing application.

What we are doing now is allowing the application to access the resize() and reposition() functions, so that when it knows that the map is displayable, it can call these explicitly.  This exposes more of the underlying map API than we would like, but more importantly, at least it works.