This example provides details on how the ArcGIS Server JavaScript API is used in an HTML page. It adds a layer to a map and then displays the map. [Show me]
The following is the HTML page in its entirety:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Create a Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
<script type="text/javascript">
dojo.require("esri.map");
var myMap, myTiledMapServiceLayer;
function init() {
myMap = new esri.Map("mapDiv");
myTiledMapServiceLayer = new
esri.layers.ArcGISTiledMapServiceLayer
("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
myMap.addLayer(myTiledMapServiceLayer);
}
dojo.addOnLoad(init);
</script>
</head>
<body>
<div id="mapDiv" class="tundra" style="width:900px; height:600px; border:1px solid #000;"></div>
<h4>Work flow:</h4>
<ul>
<li>Create a map.</li>
<li>Add an ArcGISTiledMapServiceLayer.</li>
</ul>
</body>
</html>
When using the ArcGIS JavaScript API, you will normally see at least one style sheet and two scripts referenced inside the HTML HEAD.
The referenced style sheet is a Dojo theme and is used primarily for the graphic elements in the map DIV, but it can be used anywhere throughout the HTML page. In addition to the "tundra" style, you can also use the "soria" style. In this case, you substitue "tundra" with "soria".
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css">
The first script references the location of the ArcGIS Server JavaScript API files. Note that the version number needs to be updated to the current version of the JavaScript API.
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
The second script is where you put your JavaScript code for working with maps and tasks. In this example, the map is initialized, and a layer is added. Regardless of how much code you write, this script should always contain the same three sections in sequence. In the first section, you reference packages. In the second section, you include an initialization function and any supporting functions. In the third section, you specify what happens during the addOnLoad event.
<script type="text/javascript">
dojo.require("esri.map");
var myMap, myTiledMapServiceLayer;
function init() {
myMap = new esri.Map("mapDiv");
myTiledMapServiceLayer = new
esri.layers.ArcGISTiledMapServiceLayer
("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
myMap.addLayer(myTiledMapServiceLayer);
}
dojo.addOnLoad(init);
</script>
Section 1: Reference the packages.
In this example, the "map" package is referenced using dojo.require(). Dojo is an open source DHTML toolkit written in JavaScript. The JavaScript API is built on top of Dojo and relies on Dojo for handling core functionality and browser differences. For more information on the relationship between Dojo and the JavaScript API, see About Dojo.
"Dojo.require()" is equivalent to "<script> include" and imports resources into your JavaScript page. The package you need when displaying a map is "esri.map". Package names are always lower case. For more information on packages and a list of packages commonly used with the JavaScript API, see About Dojo.
dojo.require("esri.map");
Section 2: Create the initialization function.
In this example, the initialization function, named init(), is where a layer is added to a map. When using the JavaScript API, a "layer" in this context is a service, and the service used is the Street Map service from ArcGIS Online.
In this example, the variables "myMap" and "myTiledMapServiceLayer" are initialized. This is followed by opening the init() function.
var myMap, myTiledMapServiceLayer;
function init() {
Next, a new map is created using the Map class and its constructor.
myMap = new esri.Map("mapDiv");
Next, the Street Map service, a tiled MapService layer, is initialized using the ArcGISTiledMapServiceLayer constructor. The URL you see is the endpoint for this service. This endpoint is a unique reference to a service that you can generate using Services Directory.
myTiledMapServiceLayer = new
esri.layers.ArcGISTiledMapServiceLayer
("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
After the layer is initialized, it is added to the map using the addlayer method.
myMap.addLayer(myTiledMapServiceLayer);
}
While this example includes only one function named init(), other HTML pages may have several functions in addition to the init() function.
Section 3: Specify the addOnLoad event.
In this section, you specify the addOnLoad event. The parameter it takes is the name of the initialization function. In this case the function is named "init". Note that another Dojo function has been used, which is similar to "<body onload="">".
This function defers the script execution until the HTML is loaded. This is an important concept because the map must be retrieved before any actions such as retrieving map properties or firing an event can be successfully completed.
dojo.addOnLoad(init); </script>
The next section is the BODY section of the HTML page. In this example, only the map is displayed. The DIV id "mapDiv" references the same variable set in the Map constructor. Note also that a reference to class="tundra" is included in the DIV. This references the tundra style sheet from the HEAD section. If you use the soria style, you need to replace "tundra" with "soria".
<body>
<div id="mapDiv" class="tundra" style="width:900px; height:600px; border:1px solid #000;"></div>
<h4>Work flow:</h4>
<ul>
<li>Create a map.</li>
<li>Add an ArcGISTiledMapServiceLayer.</li>
</ul>
</body>
</html>