Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Explore in the sandbox
Open in CodePen
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 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>