I will share the codes with you on GitHub. My suggestion would be to proceed step by step. I use vscode IDE as a suggestion in my work. You can use the IDE you are used to.
Step 1: Creating a Blank HTML Page
The code below is a simple HTML page. You can add the following codes by creating a file called index.html. As you can see, there is no HTML tag in the Body tag. We will add the necessary attachments step by step.
Step 3: Define the Div Box to Display the Map
Div is a flexible HTML tag and can contain many tags. But it's a box, and we need to define the size and position of this box. For this, we will define the style in the <head> tag and we will define our div tag in the <body> tag
In the created #map CSS selector structure, I defined a design that covers the whole page and does not need scrolling and has a dark grey background. In the body tag, I created an empty tag with the id property as map. If you try to open this page in a browser, you will see a dark grey and blank page. For those using vscode, I recommend the liveserver plugin.
Step 4: Define Map Initial Settings
In order for these codes to work, you must have an ArcGIS API key. If you are not a member, please click the link to become an ArcGIS Member.
After completing your membership process, it will give you an Api Key. If you are a developer, you probably won't be able to break the limits and ArcGIS will not charge you a fee. However, if it is used by a company, you must purchase the ArcGIS product.
We write our codes in the <script> tag below. The Require function is a method of a library that loads the required modules. Modules to be used can be added as needed, but in this example, we will use the modules such as "esri/config","esri/Map", "esri/views/MapView".
We will define the basemap in the Map method. The basemap list is as follows
In this example I wanted to use arcgis-dark-gray
With the MapView method, we define the initial settings of the map and in which div tag it should be displayed
map: Gets the variable in which the map method is defined.
center: [longitude,latitude] defined in sequence order.
zoom: It is the initial zoom value showing the defined center. As it gets smaller, the scale denominator increases, as it increases, the scale denominator decreases.
container: It is for specifying which HTML div tag with Id information will be defined in it. In our example, there is a tag with id as map
Our code is now ready. If you view the index.html page in the browser using localhost, you will get a view similar to the following.
Github : Click to Link for review code base
You can follow me on Github.