Hide Table of Contents
View Dynamic map service sample in sandbox
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 acacheof 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 (https://sampleserver6.arcgisonline.com/arcgis/rest/services/SampleWorldCities/MapServer).

Code

<!DOCTYPE html>
<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">
    <title>Create Map and add a dynamic layer</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css"/>
    <style>
      html, body, #mapDiv{
        padding: 0;
        margin: 0;
        height: 100%;
      }
    </style>
    <script src="https://js.arcgis.com/3.46/"></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"; // default is PNG8.

        //Takes a URL to a non cached map service.
        var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/SampleWorldCities/MapServer", {
          "imageParameters" : imageParameters
        });

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