JavaScript API Samples
http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/help/jssamples_start.htm[2009-3-10 15:27:16]
Customer Care Support Careers
ArcGIS Server » Web Applications » Javascript APIs » ArcGIS
Resources Gateway Concepts Samples Reference Community
JavaScript API Samples
Samples Overview
Map
Add a map
Add map and show current map extent
Add a map and show x,y coordinates
Add a dynamic map
Add two dynamic maps
Combine tiled and dynamic layers
Combine two ArcGIS Online services
Show an info window
Show loading icon
Set visible scales
Set custom extent and spatial referenc
Show map properties
Set map extent using second service
Show map using layer definitions
Dynamically create layer list
Explicitly create layer list
Switch layer when zoomed in
Display multiple ArcGIS Online services
Map Configuration
Layers
Graphics
Query Task
Identify Task
Find Task
Geocode Task
Geoprocessor Task
Toolbars
Utilities
Add a dynamic map
View live sample
Description
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);
Code
<!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"/>
<title>Create Map</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.3/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.3"></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 = "png24"; //set the image type to PNG24, 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>
Search
Login
