1. Sign up for ArcGIS for Developers (it's free!)

In order to use the ArcGIS API for JavaScript you should sign up for an ArcGIS Developer account. In addition to being able to access all the ArcGIS APIs and SDKs your subscription also gives you:

  • Access to tools on ArcGIS Online and the ArcGIS for Developers website.
  • 50 service credits every month to develop with services such as routing and geocoding.
  • Community support on our forum.

Sign up for ArcGIS for Developers

2. Setup a local development environment

While you can use sites such as JS Bin, CodePen and our own sandbox to experiment with the ArcGIS API for JavaScript we highly recommend that you setup a local development environment with a code editor and a web server. We recommend the following code editors although any editor will work:

The Mozilla Developer Network has an excellent guide on setting up a local development server.

3. Hello World

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS API for JavaScript Hello World App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

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

  <script>
    require([
      "esri/Map",
      "esri/views/MapView"
    ], function(Map, MapView) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.71511,34.09042],
        zoom: 11
      });

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

4. Keep learning

If you're just getting started with the ArcGIS API for JavaScript we recommend working through some of our tutorials for a guided approach to learning the API. Review the core concepts to learn about the basics of the API, or explore the code samples to find specific examples of what the API can do.

Content