nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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.

Najděte více příspěvků označených jako

Accepted answers

All comments

RiyasDeen

Hi David,

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

DavidElies

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?

kenbuja

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);
    });
})

JohnGrayson

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.

DavidElies

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.

JohnGrayson

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.

KevinMacLeod1

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>

KevinMacLeod1

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>

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

DavidElies

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.

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.

delete.html.zip

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!

Připojte se ke konverzaci

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.