The ArcGIS Platform is a Platform as a Service (PaaS) that contains location services and tools for developers. Developers use these tools and services from ArcGIS Online, to connect people, locations, and data using interactive maps. To start building fully-featured mapping applications with location services, you need an ArcGIS JavaScript API. The ArcGIS API for JavaScript is a lightweight way to embed maps and tasks in web applications. This article will help you to start building ArcGIS applications in a simple way.

Simple Map

Create a Simple HTML Document

First, set up a basic HTML document. Here’s an example:

<!DOCTYPE html>
<html>
 
<head>
   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
   
<title></title>
<style>
html
, body, #map {
  height
: 100%;
  padding
: 0;
  margin
: 0;
}
</style>
  </head>
</html>

Reference the ArcGIS API for JavaScript

To begin working with the ArcGIS API for JavaScript, add the following script and link tags inside the <head> tag:

<link rel="stylesheet" href="https://js.arcgis.com/3.35/esri/css/esri.css">
<script src="https://js.arcgis.com/3.35/"></script>

The script tag loads the Esri API for JavaScript. When new versions of the JavaScript API are released, update the version number to match the newly released version of the API.

The esri.css style sheet contains styles specific to Esri widgets and components. For more information about this stylesheet, refer to the help topic on required CSS.

Load Modules

The Esri JS API contains AMD modules which load smaller JavaScript files, and then only when they are needed. To load AMD modules from the API use a second <script> inside head <head> tag. 

<script>
  require
(["esri/map"], function(Map) { ... });
</script>

Create the Map

A new map is created using Map, which is a reference to the Map class that was loaded from the esri/map module. The string passed to Map, “map”, is the id of the div element that will contain the map. An object to specify other map properties, such as basemap and starting center point and zoom level, is also passed to the Map constructor.

var map;
require(["esri/map"], function(Map) {
  map
= new Map("map", {
    basemap
: "topo",
    center
: [-122.45, 37.75],
    zoom
: 13
 
});
});

Additional basemap options are: "satellite", "hybrid", "topo", "gray", "oceans", "osm", "national-geographic". Use alternate basemaps by modifying the basemap option in your HTML document.

Sample code

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.35/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.35/"></script>
<script>
var map;

require(["esri/map", "dojo/domReady!"], function(Map) {
map = new Map("map", {
basemap: "topo",
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});
});
</script>
</head>

<body>
<div id="map"></div>
</body>
</html>