mflawton

Simple Fullscreen Map Template

Discussion created by mflawton on Mar 1, 2011
Latest reply on Mar 2, 2011 by curtinproperties
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>

Outcomes