I'm trying to put an ArcGIS Server JS API map within a div with a hidden-sm class in Bootstrap 3, so that the map is not shown on small devices.

<div class="row">
  <div class="col-md-4 hidden-sm hidden-xs">
    <div id="map"></div>

The map's parent div is correctly hidden when dragging a large window to become narrower on a desktop browser.

But when re-expanding the window such that the map's parent div displays again, the map is no longer functional.

enter image description here

Note that the div is shown but the map is empty, and the zoom buttons are non-functional.

How can I hide the map on a smaller device, without causing it to fail when the browser is expanded again?


In the map constructor options, set autoResize to false, eg:

var map = new Map("map", {
  basemap: "topo",
  center: [-122.45, 37.75], // longitude, latitude
  zoom: 13,
  autoResize: false



You could use map.resize(); fire it whenever the browser is resized or when the display attribute of the container changes (dojo.on('id', 'resize', function(){})). Works on most occasions. Or you could use something like map.redraw() or map.refresh() (https://developers.arcgis.com/javascript/jsapi/featurelayer.html#redraw). Key is to tap into the window resize event

I haven't tested it with your example. Perhaps you could provide your example in jsfidle or something to make it easier to debug btw? I transferred yours to http://jsfiddle.net/9kgsLx5b/2/.

  • Thanks Dennis, that's a very useful start. Further testing shows that show/hide on the parent div (which I thought is all that Bootstrap's hidden class is doing) doesn't cause the problem. I'll keep testing.... – Stephen Lead Jan 11 '15 at 22:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.