<html>
  
  <head>

    <!-- Load the ArcGIS Maps SDK for JavaScript -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/dark/main.css" />
    <script src="https://js.arcgis.com/4.28/"></script>
    
    <script>
      require(["esri/views/MapView", 
               "esri/WebMap",
               "esri/widgets/Home",
               "esri/widgets/Search",
               "esri/widgets/BasemapToggle"], (
        MapView,
        WebMap,
        Home,
        Search,
        BasemapToggle
      ) => {
        
        // Create Map
        const webmap = new WebMap({
          portalItem: {
            id: "45b3b2fb35e94ab09381d0caa0da5946"
          }
        });

        const view = new MapView({
          container: "viewDiv",
          map: webmap,
          popupEnabled: false
        });
        
        // Home Button
        let homeWidget = new Home({
          view: view
        });
        view.ui.add(homeWidget, "top-left");
        
        // Search
        const searchWidget = new Search({
          view: view
        });
        view.ui.add(searchWidget, {
          position: "top-right"
        });
        
        // Basemap Toggle
        let basemapToggle = new BasemapToggle({
          view: view,
          nextBasemap: "hybrid"
        });
        view.ui.add(basemapToggle, {
          position: "bottom-right"
        });

      });
    </script>
    
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
  
</html>
body, #viewDiv {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.