Failure to load a map

I am new to Arcgis and have been asked to display a map on a web site created from Arcgis online using the JavaScript SDK.

I tried it on a test html file, but when I open it, the page goes blank.

After registering with Arcgis developers and creating a map in Arcgis Online, like this:

Screenshot of my custom map

I have configured an API key, I have linked the map in the "Maps, layers, and data" section and I have also tried to add referers.

Screenshot of my api key configuration

After this, I am testing the following code, following the Arcgis documentation to the letter.

<html>


<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
 <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>


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


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


 <script>
        require([
         "esri/config",
         "esri/Map",
         "esri/WebMap",
         "esri/views/MapView",
         "esri/widgets/ScaleBar",
         "esri/widgets/Legend"
       ], function (esriConfig, WebMap, MapView, ScaleBar, Legend) {
         esriConfig.apiKey = "MY_API_KEY";
  
         const webmap = new WebMap({
           portalItem: {
             id: "2b5883fc1cec472ab4532622517198a1"
           }
         });
  
         const view = new MapView({
           container: "viewDiv",
  
           map: webmap
  
         });
  
  
       });
 </script>


</head>


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


</html>

And the screen remains blank, when I open the file from the browser. Without showing any error in the console.

On the other hand, the following code does work for me. It consists of loading a simple map specifying some coordinates:

<html>


<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
 <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>


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


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


 <script>


    require(["esri/config", "esri/Map", "esri/views/MapView"], function (esriConfig, Map, MapView) {


     esriConfig.apiKey = "MY_API_KEY";


     const map = new Map({
       basemap: "arcgis-topographic" // Basemap layer service
     });


     const view = new MapView({
       map: map,
       center: [-3.70, 40.41], // Longitude, latitude
       zoom: 13, // Zoom level
       container: "viewDiv" // Div element
     });


   });




 </script>


</head>


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


</html>

Solution

You have an extra import which you're supposed to delete in the first step in the tutorial at https://developers.arcgis.com/javascript/latest/display-a-web-map/. Once you do that, the required modules correctly lines up with with their aliases, and your code should work.

In the require statement, delete the Map module.

See this screenshot.