Search
  • alikilic9
    • Jun 7, 2021
    • 3 min read

Creating a Simple Map Using the ArcGIS JavaScript API



In this blog post I will show you how to create a simple map page using the ArcGIS JavaScript API. Although I am willing to use open source map libraries, ESRI has a large user network and I thought it might be an instructive article for beginners.


These blog posts will also be a series of ArcGIS JavaScript API tutorials.


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 2: Define ArcGIS JavaScript API in Head tag

We will add ArcGIS JavaScript libraries under the <title></title> tag in the <head>...</head> tag using the URL from the external source we created. We add the CSS file of ArcGIS in the <link> tag. In the <script> tag, we add the ArcGIS JavaScript file.


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

With this step, you will now have created your map. We start defining the JavaScript codes outside the <html> tag and at the bottom. The reason we do this is for all html tags and external source files to work after loading. You can also use the window onload event if you wish.


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

  1. arcgis-imagery

  2. arcgis-imagery-standard

  3. arcgis-imagery-labels

  4. arcgis-light-gray

  5. arcgis-dark-gray

  6. arcgis-navigation

  7. arcgis-navigation-night

  8. arcgis-streets

  9. arcgis-streets-night

  10. arcgis-streets-relief

  11. arcgis-topographic

  12. arcgis-oceans

  13. osm-standard

  14. osm-standard-relief

  15. osm-streets

  16. osm-streets-relief

  17. osm-light-gray

  18. osm-dark-gray

  19. arcgis-terrain

  20. arcgis-community

  21. arcgis-charted-territory

  22. arcgis-colored-pencil

  23. arcgis-nova

  24. arcgis-modern-antique

  25. arcgis-midcentury

  26. arcgis-newspaper

  27. arcgis-hillshade-light

  28. arcgis-hillshade-dark

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


  1. map: Gets the variable in which the map method is defined.

  2. center: [longitude,latitude] defined in sequence order.

  3. 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.

  4. 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.

71 views