Hide Table of Contents
Latest Samples
Image Layers
Dynamic map service

Description

This sample demonstrates adding a map that is drawn by the server each time the user zooms or pans. Such a service 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.

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.

Code

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Create Map and add a dynamic layer</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css"/>
    <style>
      html, body, #mapDiv{
        padding: 0;
        margin: 0;
        height: 100%;
      }
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      var map;

      require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters"
      ], function (
        Map, ArcGISDynamicMapServiceLayer, ImageParameters) {

        map = new Map("mapDiv", {
          sliderOrientation : "horizontal"
        });

        var imageParameters = new ImageParameters();
        imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8.

        //Takes a URL to a non cached map service.
        var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", {
          "opacity" : 0.5,
          "imageParameters" : imageParameters
        });

        map.addLayer(dynamicMapServiceLayer);
      });
    </script>
  </head>
  <body>
    <div id="mapDiv"></div>
  </body>
</html>