GISRSStudy » ArcGIS » ArcGIS Javascript API

ArcGIS API for Javascript

What is ArcGIS API for Javascript?

ArcGIS API for JavaScript is a developer product for building mapping and spatial analysis applications for the web. The SDK contains a JavaScript API, API reference, documentation, samples, and other resources to assist with building web mapping applications. The SDK is designed to work optimally with the ArcGIS system and provide comprehensive GIS capabilities.

ArcGIS Maps SDK for JavaScript

ArcGIS Maps SDK for JavaScript to build compelling web apps that unlock your dataset potential with interactive user experiences and stunning 2D and 3D visualizations.

If you are new to ArcGIS start with the mapping APIs and location services guide.

Start Building your App

  1. Install and set up the API
  2. Get an API key
  3. Start the Display a map tutorial

Display a Map

This tutorial shows how to create and display a map of the Santa Monica Mountains in California using the topographic basemap layer.

Create a new pen

Go to CodePen to create a new pen for your mapping application.


Define an HTML page to create a map that is the full width and height of the web browser window.

In CodePen > HTML, add HTML and CSS to create a page with a viewDiv element.

The viewDiv is the element displays the map and its CSS resets any browser settings so it can consume the full width and height of the browser.

ArcGIS API for Javascript Display a Map
Add modules

The ArcGIS Maps SDK for JavaScript is available as AMD modules and ES modules,

You can specify "esri/Map" for loading the Map module.

After the modules are loaded, they are passed as parameters to the callback function where they can be used in your application.

It is important to keep the module references and callback parameters in the same order.

For more information on the different types of modules, visit the Introduction to Tooling guide topic.

In the <head> tag, add a <script> tag and a require statement to load the Map and MapView modules.

Get an API key

Go to your developer dashboard to get an API key.

Copy the key as it will be used in the next step.

Create a map

Use a Map to set the basemap layer and apply your API key.

In the CodePen, create a new Map and set the basemap property to arcgis-topographic. To enable access to the Basemap layer service, set the apiKey property of the Map.

Create a map view

Use a MapView class to set the location of the map to display.

Create a MapView and set the map property. To center the map view, set the center property, and the zoom property. Set the container property to viewDiv to display the contents of the map.

Run the app

In CodePen, run your code to display the map.

Leave a Comment

Your email address will not be published. Required fields are marked *

Tutorial Contents
Scroll to Top