1

I'm going through some of the javascript tutorials - build your first application. It works fine when I create an html file that holds the style and script tags but when I separate the files out to html, js and css the map can only be seen over half the screen. I've tried a few things but I can't get the map to full extent like it should be...should I tweak the css?

html, body, #map {
       height: 100%;
       width: 100%;
       margin: 0;
       padding: 0;
     }
     body {
    background-color: #FFF;
    overflow: hidden;
    font-family: "Trebuchet MS";
  }
Improve this question

1 Answer 1

Reset to default
3

Are you sure that the link to the css file is correct?

if no css is available the map does not cover the page.

this works for me:

<!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">
    <link rel="stylesheet" href="map.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
    <script src="http://js.arcgis.com/3.12/"></script>
    <script>
        var map;
        require(["esri/map", "dojo/domReady!"], function(Map) { 
            map = new Map("mapDiv", {
                center: [-56.049, 38.485],
                zoom: 3,
                basemap: "streets"
            });
        });
    </script>


    <title></title>
</head>

<body class="claro">
    <div id="mapDiv"></div>
</body>


</html>

But if I remove the link to map.css I get the same problem.

<link rel="stylesheet" href="map.css">
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.