- alikilic9
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
arcgis-imagery
arcgis-imagery-standard
arcgis-imagery-labels
arcgis-light-gray
arcgis-dark-gray
arcgis-navigation
arcgis-navigation-night
arcgis-streets
arcgis-streets-night
arcgis-streets-relief
arcgis-topographic
arcgis-oceans
osm-standard
osm-standard-relief
osm-streets
osm-streets-relief
osm-light-gray
osm-dark-gray
arcgis-terrain
arcgis-community
arcgis-charted-territory
arcgis-colored-pencil
arcgis-nova
arcgis-modern-antique
arcgis-midcentury
arcgis-newspaper
arcgis-hillshade-light
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
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.
22 views