How to Add XYZ Tile Layers to an ArcGIS Maps SDK for JavaScript Map

This article teaches you how to create a simple ArcGIS Maps SDK for JavaScript application with XYZ tile layers. You can use any of the layers on our categorized layer list to add to the application.

Here is a CodePen of the resulting application:

First, let's create an index.html file:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>ArcGIS Maps SDK for JavaScript - XYZ Tiles Demo</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://js.arcgis.com/4.22/"></script>
  </head>
  <body>
    <div id="map"></div>
    <script src="main.js"></script>
  </body>
</html>

What's happening here:

We include ArcGIS Maps JS SDK CSS file on line 7.
We include a CSS file on line 8 that we will create later.
We include ArcGIS Maps JS SDK JavaScript file on line 9.
We create a container for the map on line 12, defining 'map' as the id (you can use any id you want).
We include a JavaScript file on line 13 that we will create later.

Now, let's create a style.css file to style the map:

style.css

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
}

These rules will make our map appear full screen.

Finally, we'll create a main.js file that will handle creating layers and adding them to the map:

main.js

require([
  'esri/Map',
  'esri/views/MapView',
  'esri/layers/WebTileLayer',
  'dojo/domReady!'
], (Map, MapView, WebTileLayer) => {
  const cartoDBDarkMatter = new WebTileLayer({
    urlTemplate: 'https://{subDomain}.basemaps.cartocdn.com/dark_all/{level}/{col}/{row}.png',
    subDomains: ['a', 'b', 'c', 'd'],
    copyright: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
  });

  const map = new Map({
    layers: [cartoDBDarkMatter]
  });

  const view = new MapView({
    container: 'map',
    map: map,
    zoom: 8,
    center: [-1.5, 52.2]
  });
});

Let's break it down:

As the ArcGIS Maps JS SDK contains AMD modules, we have to reference the Map, MapView and WebTileLayer modules in the require statement at the beginning of the file. We also use dojo/domReady! to ensure the DOM is available before executing any code.
We define the tile layer on lines 7-11 (the highlighted part) and save it to a variable.
We initialize the map on lines 13-15 and add the created layer.
On lines 17-22, we set the map's view to our chosen geographical coordinates and zoom level (here we use coordinates for some place in England). We use 'map' to refer to the map container that we added to the HTML file.

You can pick any of the layers from our categorized layer list to add to your application. Just copy the code to create the layer in the preview application, paste it into your JavaScript file in place of the highlighted part and add it to the map's collection of layers.

Tags