This sample demonstrates adding a map that is drawn by the server each time the user zooms or pans. Such a map does not have a cache of tiles and is called a dynamic map service layer. In the ArcGIS JavaScript API dynamic map services are represented by ArcGISDynamicMapServiceLayer.
Dynamic map services perform slower than tiled map services. Only use dynamic map services if you are unable to create a cache of tiles. You might not be able to create a cache if your data changes faster than you can update the cache, or if you require real-time display of your data.
The following line creates the map:
var map = new esri.Map("map");
"Map" appears three times in the above line. The first (var map) is the name of the object, the second (esri.Map) is the name of the class, and the third ("map") is the name of the div which will contain the map.
Notice that the constructor for the dynamic map service layer requires the URL of the service's REST endpoint (http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer). You can use the Services Directory to find out the URLs for your map services.
Notice that the layer is made partially transparent using its setOpacity method. Then the map's addLayer method adds the layer to the map.
dynamicMapServiceLayer.setOpacity(0.5); map.addLayer(dynamicMapServiceLayer);
<!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 http-equiv="X-UA-Compatible" content="IE=7" />
<title>Create Map</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
<script type="text/javascript">
dojo.require("esri.map");
function init() {
var map = new esri.Map("map");
var imageParameters = new esri.layers.ImageParameters();
imageParameters.format = "JPEG"; //set the image type to JPEG, note default is PNG8.
//Takes a URL to a non cached map service.
var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", {"opacity":0.5, "imageParameters":imageParameters});
map.addLayer(dynamicMapServiceLayer);
}
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
<div id="map" style="width:900px; height:600px; border:1px solid #000;"></div>
Creates a map and adds an ArcGISDynamicMapServiceLayer.<br />
Map navigation using mouse:
<ul>
<li>Drag to pan</li>
<li>SHIFT + Click to recenter</li>
<li>SHIFT + Drag to zoom in</li>
<li>SHIFT + CTRL + Drag to zoom out</li>
<li>Mouse Scroll Forward to zoom in</li>
<li>Mouse Scroll Backward to zoom out</li>
<li>Use Arrow keys to pan</li>
<li>+ key to zoom in a level</li>
<li>- key to zoom out a level</li>
<li>Double Click to Center and Zoom in</li>
</ul>
</body>
</html>