esri.map in MVC4 (Razor) to full screen

Michaelvan_der_Veeken — Wed, 16 Jan 2013 11:35:06 GMT

I'm very new to ESRI and the Javascript API in general, so please excuse if this is an easy question 🙂

I'm learning the Javascript API, and I'm trying to embed a map in an MVC4 view. The issue I'm experiencing is that the map seems to be a fixed size (specifically, a fixed height). I can change it to a different absolute height, but not to a dynamic height (i.e. 100%). If I create a simple HTML page using (what seems to be) the same code, it works.

MVC View (fixed height)

@{
    ViewBag.Title = "Home";
}
@section scripts
{

   <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
   <script type="text/javascript">
       dojo.require("esri.map");
       var map;
       function init() {
           alert('hello!');
           map = new esri.Map("map", {
               basemap: "streets",
               center: [4.830088, 52.665051], //long, lat
               zoom: 4,
               sliderStyle: "small",
              
           });
       
       }
       dojo.ready(init);
   </script>

}
<h3>Hello World!</h3>
<div id="map" class="claro" style="height:100%">
</div>

and the _Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/themes/base/css", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

Simple HTML page (works, height is 100%)

<html>
<head>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
   <script type="text/javascript">
       dojo.require("esri.map");
       var map;
       function init() {
           alert('hello!');
           map = new esri.Map("map", {
               basemap: "streets",
               center: [4.830088, 52.665051], //long, lat
               zoom: 4,
               sliderStyle: "small",
              
           });
       
       }
       dojo.ready(init);
   </script>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">

</head>
<body>
<h3>Hello World!</h3>
<div id="map" class="claro" style="height:100%">
</div>
</body>

</html>

I've made sure to empty my other CSS files in the MVC4 project, to make sure I don't have other styles attached to #map. I'm lost, but it might be a very obvious solution.

Re: esri.map in MVC4 (Razor) to full screen

Michaelvan_der_Veeken — Sun, 12 Dec 2021 07:00:03 GMT

Found the solution. Apparently you have to set the html and body to 100% height in CSS (doesn't seem to be the case in a 'standalone' HTML page)

Site.css

html,body { height: 100%; margin: 0px; padding: 0px; }

Re: esri.map in MVC4 (Razor) to full screen

JeffJacobson — Sun, 12 Dec 2021 07:00:06 GMT

Found the solution. Apparently you have to set the html and body to 100% height in CSS (doesn't seem to be the case in a 'standalone' HTML page)

Site.css
html,body { height: 100%; margin: 0px; padding: 0px; }

Actually, you do need to do this with a standalone HTML page.

topic esri.map in MVC4 (Razor) to full screen in ArcGIS JavaScript Maps SDK Questions

esri.map in MVC4 (Razor) to full screen

Re: esri.map in MVC4 (Razor) to full screen

Re: esri.map in MVC4 (Razor) to full screen