Add layer to map ArcGIS JavaScript shows visual exposure of real-world phenomena and it helps to analyze to overcome them. The layer is the most fundamental component of a Map. It is a collection of spatial data in the form of graphics or images that represent real-world phenomena. Layers may contain discrete features that store vector data or continuous cells/pixels that store raster data.  Each feature contains a symbol and geographic data that allows it to be rendered on the map as a graphic with spatial context. Here’s a step-by-step guide on How to add layer to map ArcGIS JavaScript to display layer data on the map.

The purpose to add layer to the map ArcGIS JavaScript is:

  • Displaying location for geographic context
  • Querying data
  • Displaying categorical and/or numeric data
  • Analytics

For visualization and analytical purposes, a specific type of layer can be used over a map. The ArcGIS API for JavaScript has a number of layer classes that can be used to access and display layer data.

Below is a list of the most common layer classes.

ClassPurpose
FeatureLayerDisplaying, querying, filtering, and editing large amounts of geographic features.
GraphicsLayerDisplaying individual geographic features like graphics, visual aids, or text on the map.
CSVLayer/KMLLayer/GeoJSONLayerDisplaying data stored in an external file format as a layer.
TileLayer/VectorTileLayerDisplaying base maps and other tiled datasets for geographic context.
MapImageLayerDisplaying layers dynamically rendered by an ArcGIS Server service.
ImageryLayerDisplaying satellite or other imagery data.

These are the class of layers that defines the layer types. All these layer types inherit from Layer Class. 

How to add layer to map ArcGIS JavaScript

A layer may be added to a map with map.addLayer();

Consider a layer type Dynamic layer having a layer class ArcGISDynamicMapServiceLayer which is a reference of the esri/layers/ArcGISDynamicMapServiceLayer Module.

let’s see steps how to add layer to map ArcGIS JavaScript

<script> require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer" ], function (Map, ArcGISDynamicMapServiceLayer) {  // code goes here }<script>
  • .Create map with basemap and zoom by adding this code
var map;map = new Map("mapDiv", {basemap: "topo",center: [78.9629,20.5937], // longitude, latitudezoom: 5});
  • Create object (dynamicMapServiceLayer) of this layer by passing URL of the service’s REST endpoint to its constructor (ArcGISDynamicMapServiceLayer)(http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer)
var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", { "opacity" : 0.9});
  • use map.addLayer() method and pass layer object to mathod to add the layer to the map.
map.addLayer(dynamicMapServiceLayer);

Sample code : add Layer to map Arcgis javascript

<!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.37/esri/css/esri.css"/> <style> html, body, #mapDiv{ padding: 0; margin: 0; height: 100%; } </style> <script src="https://js.arcgis.com/3.37/"></script> <script> var map; // Add layer Class with their AMD module require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer" ], function (Map, ArcGISDynamicMapServiceLayer) { // Ceate Map map = new Map("mapDiv", { basemap: "topo", center: [78.9629,20.5937], // longitude, latitude zoom: 5 }); //Creates a new Layer object. var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", { "opacity" : 0.9 }); map.addLayer(dynamicMapServiceLayer); // Add Layer to map }); </script> </head> <body> <div id="mapDiv"></div> </body></html>

Visual Representation to add layer to map ArcGIS JavaScript

Create Map and add a dynamic layer

Arcgis Javascript add Feature Layer to Map

A FeatureLayer is a single layer that can be created from a Map Service or Feature Service. To add Feature Layer ArcGIS javascript to the map, we need to load AMD Module in Script of the head tag of the HTML Body.

  • Add layer class FeatureLayer which is a reference of the esri/layers/FeatureLayer Module in script tag
<script> require([ "esri/map", "esri/layers/FeatureLayer" ], function (Map, FeatureLayer) { // code goes here }<script>

Sample Code to add feature layer arcgis javascript to map

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><title>FeatureLayer</title><link rel="stylesheet" href="https://js.arcgis.com/3.37/esri/css/esri.css"><script src="https://js.arcgis.com/3.37/"></script><style>html, body, #map {  padding: 0;  margin: 0;  height: 100%;  width: 100%;}</style><script>require([    "esri/map",    "esri/layers/FeatureLayer",    "dojo/domReady!"  ],  function(    Map,    FeatureLayer  ) {    var map = new Map("map", {      basemap: "hybrid",      center: [-82.44109, 35.6122],      zoom: 17    });    /****************************************************************     * Add feature layer - A FeatureLayer at minimum should point     * to a URL to a feature service or point to a feature collection      * object.     ***************************************************************/    // Carbon storage of trees in Warren Wilson College.    var featureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0");    map.addLayer(featureLayer);  });</script></head><body> <div id="map"></div></body></html>