Code snippet: OneMap Basemap for ArcGIS API for JavaScript 4.x

I am happy to contribute a basemap code snippet for ArcGIS API for JavaScript 4.x.

How to use/test the code snippet: Create a html file with the below code and view it in the browser.

#web-help #onemap-under-the-sun #others #arcgis #javascript #4.x #webtilelayer

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Default (ArcGIS API for JavaScript 4.x)</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link href="https://js.arcgis.com/4.21/esri/themes/light/main.css" rel="stylesheet" type="text/css" />
    <script src="https://js.arcgis.com/4.21/"></script>

    <script>
      require([
        "esri/layers/WebTileLayer",
        "esri/Map",
        "esri/Basemap",
        "esri/views/MapView"
      ], (WebTileLayer, Map, Basemap, MapView) => {
        const mapBaseLayer = new WebTileLayer({
          urlTemplate: "https://maps-{subDomain}.onemap.sg/v3/Default/{level}/{col}/{row}.png",
          subDomains: ["a", "b", "c"],
          copyright:
            `<img src="https://www.onemap.gov.sg/docs/maps/images/oneMap64-01.png" style="height:20px;width:20px;"/> OneMap | Map data &copy; contributors, <a href="https://www.sla.gov.sg/">Singapore Land Authority</a>`
        });

        const map = new Map({
          basemap: new Basemap({
            baseLayers: [mapBaseLayer]
          })
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
		  center: [103.82, 1.35],
		  zoom: 12
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>