topic Re: Map not fitting itself inside the div in ArcGIS Server with JavaScript API Questions

Map not fitting itself inside the div

BrentHoskisson — Fri, 14 Nov 2014 16:04:00 GMT

I have a div block defined as:

<div id="overviewMap" style="width:290px; height:205px; overflow:hidden;">

The Map is defined as:

new Map("overviewMap", { extent: initExtent, logo: false, slider: false, smartNavigation: false, fitExtent: true });

But when I run the map, only a quarter of the map shows in the div with scrollbars to get to the rest. How can I force the map to draw only inside the div? It seems to be a problem with anything not IE.

The only layer in the map is a DynamicMapService layer.

Also I can set the scale, but it just draws the map smaller and still pushes it down and to the right.

Re: Map not fitting itself inside the div

StevenGraf1 — Fri, 14 Nov 2014 16:23:14 GMT

Without the rest of your div and style elements, it's hard to see what's actually going on.

I would create a div and make it the size that you want and then with the mapoverview inside it as such:

<div style="width:290px; height:205px; overflow:hidden;">
     <div id="overviewMap"></div>
</div>

This will create a div with the pixel size and the map will insert at 100% inside that div. The way you have it above should work the same but browsers are inconsistent some times.

Steven

Re: Map not fitting itself inside the div

BrentHoskisson — Fri, 14 Nov 2014 16:45:55 GMT

More information:

I am trying to start the web page with the div hidden. If I start it with the div visible, it seems to work properly.

I don't really like to start it visible and then shut it down on the page load. It looks odd. And like I said, it seems to be browser specific. The problem is in Chrome and FireFox, but not in IE.

Re: Map not fitting itself inside the div

StevenGraf1 — Fri, 14 Nov 2014 20:25:09 GMT

So when the page loads you want it hidden. Then a user clicks a button and the map appears in the page? Is this the functionality you need? You can hide a div like this. And then you can use a toggle button to show/hide the div like this.

Re: Map not fitting itself inside the div

BrentHoskisson — Mon, 17 Nov 2014 14:33:08 GMT

The problem is not with hiding and showing it. It is that the map can't correctly initialize when it is hidden. Because apparently the JavaScript API get the definition of the map limits from parts of the div that are only available when it is visible.

Re: Map not fitting itself inside the div

BrentHoskisson — Mon, 17 Nov 2014 14:58:45 GMT

I decided to solve this by not loading the Overview map until I needed it the first time. Then I would make the div visibile. THEN I ran the code to initialize the map. It seems to work on all platforms that way.

Re: Map not fitting itself inside the div

NicholasHaney — Wed, 17 Dec 2014 19:10:34 GMT

I believe this sample: Edit fiddle - JSFiddle implements the behavior you desire.

Re: Map not fitting itself inside the div

BrentHoskisson — Wed, 17 Dec 2014 20:58:09 GMT

Yes, it seems the undocumented solution is to make the layer hidden as well and then make it visible when the div becomes visible.