Simple Fullscreen Map Template

MatthewLawton · ‎03-01-2011

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>

MatthewLawton · ‎03-01-2011

Here is an even simpler version without the comments. I also followed the Yahoo optimization suggestions of moving the style tags to the top of the header and the script tags to the bottom of the body:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Simple Map</title>
 <style type="text/css">html, body{height: 100%; width: 100%; margin: 0; padding: 0;}</style>
 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta name="Viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
</head>
<body class="claro">
 <div id="map">
 </div>
 <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>
 <script type="text/javascript">
  dojo.require("dijit.layout.ContentPane");
  dojo.require("esri.map");
  function Init() {
   new dijit.layout.ContentPane({region: "center", style: "height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden;"},"map");
   var map = new esri.Map("map");
   var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
   map.addLayer(layer);
   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);
 </script>
</body>
</html>

propweb · ‎03-01-2011

hi all,

What about setting the centre of the map onLoad, is this set with the "extent" property? I've also checked into "centreat()" and "centreandzoom()" to no avail.

I'm looking at creating a campus map application so the first point of call is to initiate the map (easy peasy) then centre that map to a given location. For some reason its not happening for me 🙂

can you help me out on this one mate?

cheers

MatthewLawton · ‎03-02-2011

I just set an initial extent variable with the desired coordinates and then add that to my map declaration, as follows:

var initExtent = new esri.geometry.Extent(-13373700,4775288,-13310356,4828576, new esri.SpatialReference({wkid:102100}));
var map = new esri.Map("map",{extent:initExtent});

propweb · ‎03-02-2011

Excellent, thanks man.