programmatically resize bootstrap-map

[TracySchloss]

I am using a bootstrap map and bootstrap styling in my project.  It seems to handle a browser resize much better than a typical esri/Map .  I have several tools in my sidebar, most that contain grids.  Once the grids are populated, the divs expand to accommodate my data.  Since they are now longer, the user must scroll to see all content.

Once the user has scrolled down the sidebar, they are noticing that the map looks cut off.  The act of expanding the side panel divs isn't something that triggers the map to resize. I added map.resize() in the function that populates the grids, but that doesn't do it. 

If you resize the browser at any point, it does fill it, but I would like to do this programatically, at the point my grids are populated. 

This project is getting too complex to post in the thread or jsFiddle, but here's a link:

Medicaid Provider Search

[ChrisSmith7]

Tracy,

It looks like you're trying to fire the resize in queryHandler_populateProviders(), right?

[TracySchloss]

Yes.  I don't much care where it sits, but once the users makes a few choices and the provider list gets populated, that's when they're likely to start scrolling.

I could shorten all the div tags up, but there's a lot of information, and it would mean they were scrolling that much more!

[ChrisSmith7]

I am not familiar with the Bootstrap map project, but am looking more into it for my own purposes. This is probably a shot in the dark, but looking at the bootstrapmap.js, I see there is an events option in the constructor:

            _smartResizer: declare(null, {
                constructor: function (mapDivId, options) {
                    this._map = null;
                    this._autoRecenterDelay =  50;
                    this._popupRecenterDelayer = 150;
                    this._popupPosition = "top";
                    this._popupBlocked = false;
                    this._visible = true;
                    this._visibilityTimer = null;
                    this._mapDeferred = null;
                    // Default bootstrap map options
                    this._autoRecenter = options.autoRecenter || true;
                    this._responsiveResize = options.responsiveResize || true;
                    // Map properties
                    this._mapDivId = mapDivId;
                    this._mapDiv = dom.byId(mapDivId);
                    this._mapStyle = style.get(this._mapDiv);
                    // Map options
                    this._options = lang.mixin(options, {});
                    // Events
                    this._handles = [];
                },

I wonder if you could enhance bootstrapmap.js to accept some options from your bootstrap map initialization in your main module. In the bootstrap module, I see it's pushing events to initiate the resize, it looks like it:

this._handles.push(on(window, "resize", lang.hitch(this, resizeWin)));

You could probably send an event from your main module to call this when the Provider Locations div resizes. I'm not sure... I could be way off base!

[TracySchloss]

I don't think you're way off base. I was thinking as well that since the boot-strap map was already set up to resize on window resize that I could take advantage of that somehow.  It's one of the reasons I started looking at it in the first place.

I'm not a programmer, more I know enough to be dangerous, but I'll try this and see if it helps. 

[ChrisSmith7]

Tracy,

Did this ever work out for you?

[TracySchloss · Accepted solution]

Well, yes and no.  I found a workaround, but I decided I really didn't like the behavior I was getting.  When the sidebar resized triggered a map resize, it almost looked like the map was jumping around, especially if the amount it needed to resize wasn't much.  I called this when I populated the grids that were making the sidebar expand.

  function resizeMap() {

    var mapCon = dom.byId('map-row');

     if (app.sidebar.offsetHeight && app.map) {

       domStyle.set(dom.byId('map'), 'height', app.sidebar.offsetHeight + 'px');

       app.map.resize();

     }

  }

The other thing I didn't like was the map center was also repositioned, because the overall map div was larger.  Sometimes it adjusted enough the area you were looking at 1/2 disappeared, forcing you to scroll on your map back to the area you'd been looking at.