topic Re: Resize and Reposition Map in ArcGIS JavaScript Maps SDK Questions

Resize and Reposition Map

JohnPreston — Fri, 11 Mar 2016 15:55:58 GMT

I would like to resize and reposition map div and map after user clicks button. When page loads map is positioned to float right with taking up a certain % of page. I would like to reposition map to left and set size to specific #. I can move the map and resize, however the map layers do reposition in center. I'm sure I missing something. Here is my code...

onClick: function () {

$('#left_col').hide();

$('#right_col').css("float", "left");

$('#right_col').css("width", "500px");

$('#right_col').css("height", "500px");

$('#map').css("float", "left");

$('#map').css("width", "500px");

$('#map').css("height", "500px");

map.width = 1000;

map.height = 500;

map.resize();

map.reposition();

});

Re: Resize and Reposition Map

TyroneBiggums — Fri, 11 Mar 2016 16:15:05 GMT

Your map width is 1000 but the containing map div is 500px.

Re: Resize and Reposition Map

JohnPreston — Fri, 11 Mar 2016 16:20:06 GMT

I tried making them both 500, however the map doesn't resize at all. With the code I posted the map actually resized but didn't reposition.

When I do change to both to 500, and I pan just a little the map then repositions in center (does that make sense)?

Re: Resize and Reposition Map

TyroneBiggums — Fri, 11 Mar 2016 16:49:49 GMT

Height and width are read-only for the map. Remove map.width and map.height. Your map is in a containing div, right? #right_col or #map? Just resize the containing div.

Map | API Reference | ArcGIS API for JavaScript

Re: Resize and Reposition Map

JohnPreston — Fri, 11 Mar 2016 17:05:13 GMT

I took out map.width and map.height, now map doesn't resize. The map is contained in #map, the #map div is contained in #right_col.

Re: Resize and Reposition Map

TyroneBiggums — Fri, 11 Mar 2016 17:20:39 GMT

Seeing more code might be helpful. I'm not picturing what's happening. You're moving right_col to the left side of the window?

Are the right_col dimensions changing?

Are you AMD?

Are you checking to see if the dom is ready after stuff is moved around? The sync/async stuff can get screwy at times. Your map may have resized before the dom was ready (before your right_col moved).

What version of the API?

Re: Resize and Reposition Map

JohnPreston — Sat, 12 Mar 2016 02:19:11 GMT

Thanks Tyrone

I got it to behave the way I want. However when I add graphics to map and/or separate graphics layer they are not being redrawn correctly. They graphics are not in the correct position and are distorted. Do I need to update extent? Some other setting?

$('#printPane').hide();

$('#left_col').hide();

$('#right_col').css("float", "left");

$('#right_col').css("width", "700px");

$('#right_col').css("height", "500px");

$('#map').css("float", "left");

$('#map').css("width", "700px");

$('#map').css("height", "500px");

map.width = 700;

map.resize();

map.reposition();

Re: Resize and Reposition Map

TyroneBiggums — Mon, 14 Mar 2016 11:21:44 GMT

I'd probably need to see more code to replicate and see what you mean. And, you have map.width, the read-only property, set to 700. I'm not sure how much that helps you or how much it hinders you.