topic Re: 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? in ArcGIS JavaScript Maps SDK Questions

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 — Wed, 03 Sep 2014 01:13:22 GMT

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.

Re: 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?

RiyasDeen — Wed, 03 Sep 2014 01:51:12 GMT

Hi David,

Try setting autoresize property when initializing the map. map | API Reference | ArcGIS API for JavaScript

Re: 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 — Wed, 03 Sep 2014 17:07:25 GMT

Riyas Deen,

Thanks for your response. According to the API Reference documentation you mention, autoResize is set to true by default. I tried explicitly setting it as you suggested, but unfortunately, it doesn't change the behavior.

I did notice that even when I set the style width and height explicitly, it was replaced upon map creation by the default 400px when the map's container was not visible when the map was created. This is a serious problem, since calling resize() after the fact never actually resizes again, since the width and height of the container have been explicitly set (on the element itself, not using classes, ids or stylesheets) without checking if the size was already set, in fact, overwriting any explicitly set values. Do you know what check for size or visibility the map makes in order to determine whether to set default width and height?

Re: 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?

KenBuja — Wed, 03 Sep 2014 17:45:03 GMT

Take a look at this post which resizes the map whenever its div emits a resize event.

Here's how I have it written for AMD

map.on("load", function () {
    registry.byId("divMap").on("resize", function () {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            map.resize();
            map.reposition();
        }, 500);
    });
})

Re: 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?

JohnGrayson — Wed, 03 Sep 2014 18:18:08 GMT

If the map node is being created in a dijit/layout/* node then you can listen once to the 'resize' event so you can call map.reposition() and map.resize(). This might not help depending on the css rules so you might have to reset the node size back to 100% and then call reposition and resize. Alternatively you could use dom-geometry.position(...) to get the current node size. However, listening to the 'resize' event won't help if you're creating the map in just a div node as it won't have a resize event. To find the parent dijit you can use registry.getEnclosingWidget(...) and pass in the map.root node. This will traverse up the parent dom nodes until it finds a dijit. Then hopefully it will be a dijit with a 'resize' event you can listen to once.

Re: 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 — Wed, 03 Sep 2014 19:13:15 GMT

Thanks for your input Ken Buja and John Grayson,

You're right John, I don't have a resize event to listen to. I'm not controlling the container the other team is using at all. From what they tell me, it is not a resize, but a (Bootstrap custom) show event. I tried exposing the map.resize() event to them, so they could handle when they want the map to be resized, but once the map is sized (correctly or incorrectly), only an actual change in size of the containing div will allow the map.resize() to do anything, since the resize event actually checks for a change.

Maybe I'm looking at this wrong. The way I see it, I either need to control when the map loads (so i need to know without relying on the library used to display the map, when it is safe to load), or have a function that the other team can call which will "reload" the map when, (they should know), it is safe to do so. Please let me know if I'm not seeing something or looking at this completely the wrong way.

Re: 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?

JohnGrayson — Wed, 03 Sep 2014 20:05:56 GMT

You are correct, it seems to me that the simplest solution would be to provide the other team with the function that creates the map, and they can call it when the parent container is ready in the show event. Basically don't create the map until it can be created correctly, especially since the other team won't give you an event to listen to.

Re: 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?

KevinMacLeod1 — Wed, 03 Sep 2014 20:20:49 GMT

This might be a solution. We are also making a site with Bootstrap 3 in a MS MVC 5 template with the JS API 3.10. We have jQuery loaded. We also have a modal (our "disclaimer") slide down so the users have to click "Agree" to use the site. We are liking Bootstrap! If I am understanding right, does this sound like your use case?

We found this solution gave us a full screen map div. It grabs viewport width and height and sets the map div CSS to this. Plain vanilla JS could do it but jQuery makes it concise.

<script>

        $(document).ready(function () {

            $('#disclaimer').modal('show');

            resizeDiv();

        });

        window.onresize = function (e) {

            resizeDiv();

        }

        function resizeDiv() {

            var vpw = $(window).width();

            var vph = $(window).height();

            $('#mapDiv').css({

                'height': vph + 'px',

                'width': vpw + 'px'

            });

        }

    </script>

Re: 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?

KevinMacLeod1 — Wed, 03 Sep 2014 20:21:39 GMT

We found this solution gave us a full screen map div. It grabs viewport width and height and sets the map div CSS to this. Plain vanilla JS could do it but jQuery makes it concise.

<script>

        $(document).ready(function () {

            $('#disclaimer').modal('show');

            resizeDiv();

        });

        window.onresize = function (e) {

            resizeDiv();

        }

        function resizeDiv() {

            var vpw = $(window).width();

            var vph = $(window).height();

            $('#mapDiv').css({

                'height': vph + 'px',

                'width': vpw + 'px'

            });

        }

    </script>

Re: 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 — Wed, 03 Sep 2014 20:24:17 GMT

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

Re: 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 — Wed, 03 Sep 2014 22:54:44 GMT

Thanks for the response K M‌,

It is similar to what I wanted to do, but the map itself is in the modal. The modal isn't shown by the time the map is created, so the map can't confirm that it has an actual screen position to draw to, this causes it to have trouble drawing itself, and it automatically resizes itself to 400px x 400px. I'm trying to figure out from the map's point of view when it does have the ability to draw itself, or how the map can be reset (repositioned, resized, redrawn, etc) on demand, when an external library or somesuch requests it.

Re: 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?

RiyasDeen — Thu, 04 Sep 2014 01:08:34 GMT

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.

Re: 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 — Thu, 04 Sep 2014 16:31:06 GMT

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!

Re: 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?

JonathanUihlein — Thu, 18 Sep 2014 19:42:01 GMT

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.

Re: 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 — Thu, 18 Sep 2014 20:46:14 GMT

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.