WMTSLayer | Sample | ArcGIS Maps SDK for JavaScript

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>WMTSLayer | Sample | ArcGIS Maps SDK for JavaScript</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.1/"></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
    </style>
  </head>

  <body>
    <arcgis-map scale="4622333" center="-3.7038, 40.4168">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-basemap-toggle slot="bottom-left"></arcgis-basemap-toggle>
    </arcgis-map>
    <script type="module">
      const [Basemap, WMTSLayer, Map] = await $arcgis.import([
        "@arcgis/core/Basemap.js",
        "@arcgis/core/layers/WMTSLayer.js",
        "@arcgis/core/Map.js",
      ]);

      // Get references to the component
      const viewElement = document.querySelector("arcgis-map");
      const basemapToggle = document.querySelector("arcgis-basemap-toggle");

      // create basemaps from WMTS layer
      const plainIGNBasemap = new Basemap({
        baseLayers: [
          new WMTSLayer({
            url: "https://www.ign.es/wmts/ign-base",
            activeLayer: { id: "IGNBase-gris", tileMatrixSetId: "GoogleMapsCompatible" },
            serviceMode: "KVP",
            copyright: `<a href="https://www.ign.es/" target="_blank">Instituto Geográfico Nacional</a>`,
          }),
        ],
        thumbnailUrl:
          "https://www.ign.es/wmts/ign-base?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=IGNBase-gris&STYLE=default&FORMAT=image%2Fjpeg&TILEMATRIXSET=GoogleMapsCompatible&TILEMATRIX=6&TILEROW=24&TILECOL=31",
      });

      const orthoIGNBasemap = new Basemap({
        baseLayers: [
          new WMTSLayer({
            url: "https://www.ign.es/wmts/mapa-raster",
            activeLayer: { id: "MTN", tileMatrixSetId: "GoogleMapsCompatible" },
            serviceMode: "KVP",
            copyright: `<a href="https://www.ign.es/" target="_blank">Instituto Geográfico Nacional</a>`,
          }),
        ],
        thumbnailUrl:
          "https://www.ign.es/wmts/mapa-raster?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=MTN&STYLE=default&FORMAT=image%2Fjpeg&TILEMATRIXSET=GoogleMapsCompatible&TILEMATRIX=6&TILEROW=24&TILECOL=31",
      });

      // create the map and set the basemap
      viewElement.map = new Map({
        basemap: plainIGNBasemap,
      });
      // set the next basemap in the Basemap Toggle
      basemapToggle.nextBasemap = orthoIGNBasemap;
    </script>
  </body>
</html>