I cant seem to load a basic webmap into a bootstrap div. No map, any ideas? Is there some conflict with 4.0 and bootstrap?

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

ArcGIS Javascript 4.0 and Bootstrap problem

KyleDunaway

I cant seem to load a basic webmap into a bootstrap div.

</div>

No map, any ideas? Is there some conflict with 4.0 and bootstrap?

Vind meer berichten getagd met

Accepted answers

FC_Basson

Specify a CSS height attribute for the viewDiv container.

All comments

KyleDunaway

Thank you.

KyleDunaway

The 1 row/1 column was just an example. Change it to 2 columns and it performs the same way. Adding a height to the div used for the map container has solved it.

rscheitlin

Kyle,

Not sure why you would want to use bootstrap grid when you only have a one row one column layout but here is your code fixed for that:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Get started with MapView - Create a 2D map</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        
        .nopadding {
            padding: 0 !important;
            margin: 0 !important;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
    <script src="https://js.arcgis.com/4.0/"></script>
    <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "dojo/dom-style",
            "dojo/domReady!"
        ], function(Map, MapView, domStyle) {
            var map = new Map({
                basemap: "streets"
            });
            var view = new MapView({
                container: "viewDiv", // Reference to the scene div created in step 5
                map: map, // Reference to the map object created before the scene
                zoom: 4, // Sets the zoom level based on level of detail (LOD)
                center: [15, 65] // Sets the center point of view in lon/lat
            });

            domStyle.set("viewDiv", "height", getPageHeight() + "px");

            function getPageHeight() {
                var body = document.body,
                    html = document.documentElement;
                var height = Math.max(body.scrollHeight, body.offsetHeight,
                    html.clientHeight, html.scrollHeight, html.offsetHeight);
                return height;
            }
        });
    </script>
</head>

<body>
    <div class="row nopadding">
        <div class="col-md-12 nopadding">
            <div id="viewDiv"></div>
        </div>
    </div>
</body>

</html>

FC_Basson

Specify a CSS height attribute for the viewDiv container.

KyleDunaway

All I did was add bootstrap/jquery and inclose the view container div.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Get started with MapView - Create a 2D map</title>
<style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
<script src="https://js.arcgis.com/4.0/"></script>
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>        
<script>
require([
  "esri/Map",
  "esri/views/MapView",
  "dojo/domReady!"
], function(Map, MapView){
  var map = new Map({
    basemap: "streets"
  });
  var view = new MapView({
    container: "viewDiv",  // Reference to the scene div created in step 5
    map: map,  // Reference to the map object created before the scene
    zoom: 4,  // Sets the zoom level based on level of detail (LOD)
    center: [15, 65]  // Sets the center point of view in lon/lat
  });
});
</script>
</head>
<body>
  <div class="row">
    <div class="col-sm-12">
      <div id="viewDiv"></div>
    </div>
  </div>
</body>
</html>

RickeyFight

Can you post the rest of your code or a sample that is similar?

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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