Community

Basic map not loading inside dojo BorderContainer

1332
2
08-02-2016 09:10 AM
SurajPatil
by
New Contributor
‎08-02-2016 09:10 AM


Hi all,

I am trying to load simple web map inside dojo BorderContainer. It seems like map is coming but it lacks in tiles and simple zoom controls on it. Here is the attachment of it,

Selection_001.png

and here is the code snippet which 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",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
  center: [-122.45, 37.75], // longitude, latitude
  zoom: 13
});

At first, I thought the issue is with the container i.e. container is not ready while my map object ask for it. But it seems like that is not the case cause i did debug and put timeout as well to load map later, and i am no matter what getting the same results.

Any idea as why this is happening?

Any help will be much appreciated. Thanks.

0 Kudos
2 Replies
KenBuja
by MVP Esteemed Contributor
MVP Esteemed Contributor
‎08-02-2016 09:24 AM

Have you added the required css file in the html? Required CSS | Guide | ArcGIS API for JavaScript 3.17

0 Kudos
AlexanderBrown5
by
Occasional Contributor II
‎08-02-2016 11:38 AM

Suraj,

You can always just include a border container in the <body> tag of your app code.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>Simple Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
    <style>
        html,
        body,
        #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="https://js.arcgis.com/3.17/"></script>
    <script>
        var map;
        require(["esri/map", "dojo/domReady!"], function(Map) {
            map = new Map("map", {
                basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
                center: [-122.45, 37.75], // longitude, latitude
                zoom: 13
            });
        });
    </script>
</head>
<body>
    <div dojotype="dijit.layout.BorderContainer" design="sidebar" gutters="false" style="width: 96%; height: 100%-150px;
    margin: 2%; border:solid 3px #b7b7b7;">
        <div id="map"></div>
    </div>
</body>
</html>

~Alex

0 Kudos