I've been trying to create a really simple fullscreen map template on which to build my future JavaScript API applications. I think I have created a pretty good one, but I want to get some feedback. There are 4 main things that I have tried to accomplish here:1. Cross-browser compatibility - It looks great in IE & Firefox, Opera is okay, I haven't tried Chrome or Safari.2. Passes the W3C Validator (http://validator.w3.org/) - Passes with no errors or warnings. I had to programatically set up the Dojo dijits to keep the HTML valid, which I think I actually prefer.3. Fewest external file references - I want to keep the basic code very simple, so I only reference the claro.css file and the JS API library.4. Fewest lines of code - Keep it simple.Here is my code, any feedback is appreciated:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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"><!--improves the presentation and behavior on iOS devices-->
<title>Simple Map</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css"><!--reference to Dojo CSS file used to format the page-->
<style type="text/css">html, body{height: 100%; width: 100%; margin: 0; padding: 0;}</style> <!--CSS code that tells the map to expand to the full extent of the browser window-->
</head>
<body class="claro">
<script type="text/javascript">var djConfig = {parseOnLoad: true};</script><!--loads Dojo parser-->
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script><!--Esri JavaScript API file library-->
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");//dojo container module used to contain the map
dojo.require("esri.map");//Esri map module
function Init() {
//progammatically defines the map div as a ContentPane dijit
new dijit.layout.ContentPane({region: "center", style: "height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden;"},"map");
//defines the map variable as an Esri map
var map = new esri.Map("map");
//defines the map service to be added to the map
var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
//adds the map service to the map
map.addLayer(layer);
//resize the map when the browser resizes
var resizeTimer;
dojo.connect(map, 'onLoad', function(theMap) {
dojo.connect(dijit.byId('map'), 'resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout( function() {
map.resize();
map.reposition();
}, 500);
});
});
}
dojo.addOnLoad(Init);//execute Init function OnLoad
</script>
<div id="map">
</div>
</body>
</html>
