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

Resize and Reposition Map

JohnPreston

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

});

Find more posts tagged with

Accepted answers

All comments

TyroneBiggums

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.

JohnPreston

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

TyroneBiggums

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?

JohnPreston

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.

TyroneBiggums

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

JohnPreston

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)?

TyroneBiggums

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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