ArcGIS JS API: Basic map not loading inside dojo BorderContainer

Question

I am facing this issue while loading the simple basic arcgis map inside dojo BorderContainer. Following is the code that I am trying,

this.mapContainer = new BorderContainer({ region: 'center', design: 'sidebar', style: 'height:calc(100%-150px);border:0px solid #b7b7b7;width:100%;overflow: hidden;' });
this.mapContainer.startup(); this.mapContainer.layout(); this.mapContainer.placeAt(this);

dcMap = new Map(this.mapContainer.domNode,{ basemap: "topo", center: [-122.45, 37.75], // longitude, latitude zoom: 13 });

But, when i load the app i get following outcome

enter image description here

So not only some tiles are missing from the map, the zoom control as well not working properly.

At first i tought the issue was with dom i.e. the container might not be ready when the map tries itself to load in it. But it seems like thats not the case, cause if I put the timeout and load map after some delay I get the same results.

Answer 1

It looks like you may be missing the esri.css file.

Make sure you have included the following in your HTML file. <link rel="stylesheet" href="//js.arcgis.com/3.17/esri/css/esri.css">

• Suraj: Perfect! This is what i missed in the first place!