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.
