Add shapes | ArcGIS Maps SDK for JavaScript

In this tutorial, you will learn how to add shapes to the map using the Sketch component.

Prerequisites

Steps

Create a new pen

To get started, either complete the Display a map tutorial or .

Get an access token

You need an access token with the correct privileges to access the location services used in this tutorial.

Go to the Create an API key tutorial and create an API key with the following privilege(s) :
- Privileges
  - Location services > Basemaps

In CodePen, set the apiKey property on the global esriConfig variable to your access token.

<!-- The esriConfig variable must be defined before adding the other esri libraries -->
<script>

  var esriConfig = {
    apiKey: "YOUR_ACCESS_TOKEN",
  };

</script>

To learn about other ways to get an access token, go to Types of authentication.

Add Sketch component

The Sketch component allows you to interactively add and edit shapes. As you draw, the Sketch component adds the shapes to the map as a graphic.

Inside the <arcgis-map> component, add the <arcgis-sketch> component and specify where you want to position it using the slot attribute. Also set the creation-mode attribute to "update" to allow the shapes to be edited once they have been created.

29 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>


<body>

  <arcgis-map basemap="arcgis/community" center="-118.49178, 34.01185" zoom="15">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-sketch slot="top-right" creation-mode="update"></arcgis-sketch>

  </arcgis-map>
32 collapsed lines

  <script type="module">

    // Get a reference to the map component
    const viewElement = document.querySelector("arcgis-map");

    // Wait for when the component is ready
    await viewElement.viewOnReady();
    console.log("The map is ready.");

    // Get a reference to the Sketch component
    const arcgisSketch = document.querySelector("arcgis-sketch");

    // Wait for when the sketch component is ready
    await arcgisSketch.componentOnReady();

    // Change the default polygon drawing symbol to use a red outline
    arcgisSketch.polygonSymbol = {
      type: "simple-fill",
      color: [150, 150, 150, 0.2],
      outline: {
        color: "#FF0000", // Red
        width: 3
      }
    }

  </script>

</body>


</html>

Update the default Sketch symbol for polygons

Add a new <script> tag after the closing element of the </body> section. Set the script’s type to module. Inside the script tag, use document.querySelector() to get a reference to the Map component. Then use the viewOnReady function to determine when the map component is ready.

37 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>


<body>

  <arcgis-map basemap="arcgis/community" center="-118.49178, 34.01185" zoom="15">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-sketch slot="top-right" creation-mode="update"></arcgis-sketch>

  </arcgis-map>

  <script type="module">

    // Get a reference to the map component
    const viewElement = document.querySelector("arcgis-map");

    // Wait for when the component is ready
    await viewElement.viewOnReady();
    console.log("The map is ready.");

  </script>
5 collapsed lines

</body>


</html>

Use document.querySelector() to get a reference to the Sketch component. Then use the componentOnReady function to determine when the Sketch component is ready.

39 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>


<body>

  <arcgis-map basemap="arcgis/community" center="-118.49178, 34.01185" zoom="15">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-sketch slot="top-right" creation-mode="update"></arcgis-sketch>

  </arcgis-map>

  <script type="module">

    // Get a reference to the map component
    const viewElement = document.querySelector("arcgis-map");

    // Wait for when the component is ready
    await viewElement.viewOnReady();
    console.log("The map is ready.");

    // Get a reference to the Sketch component
    const arcgisSketch = document.querySelector("arcgis-sketch");

    // Wait for when the sketch component is ready
    await arcgisSketch.componentOnReady();

6 collapsed lines
  </script>

</body>


</html>

Each graphic that is added to the map by the Sketch component has a symbol . Update the default polygonSymbol to use a red outline, and make the width of the outline thicker by setting it to 3.

39 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>


<body>

  <arcgis-map basemap="arcgis/community" center="-118.49178, 34.01185" zoom="15">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-sketch slot="top-right" creation-mode="update"></arcgis-sketch>

  </arcgis-map>

  <script type="module">

    // Change the default polygon drawing symbol to use a red outline
    arcgisSketch.polygonSymbol = {
      type: "simple-fill",
      color: [150, 150, 150, 0.2],
      outline: {
        color: "#FF0000", // Red
        width: 3
      }
    }
7 collapsed lines

  </script>

</body>


</html>

Run the app

In CodePen, run your code to display the map.

The map should display a Sketch component that allows you to interactively add and edit shapes.

Select the icon on the Sketch tool bar for drawing a rectangle, and then click on the map to start drawing.

What’s next?

Learn how to use additional SDK features and ArcGIS services in these tutorials:

Learn more about adding shapes and using graphics

Tutorials (Location Platform)Display directions Migrate from Google Maps APIConcepts & terminology