Tutorial: Display a complex static map | Documentation

Learn how to use the ArcGIS Static Maps serviceThe ArcGIS Static Maps service, also known as Static Maps service, is a location service hosted by Esri that generates non-interactive map images called static maps. The service supports displaying a variety of basemap styles and optional geometries such as points, polylines, and polygons. No client-side mapping API is required.Learn more to generate a complex static mapA static map is a non-interactive map image generated by the ArcGIS Static Maps service that includes a basemap style and optional geometries such as points, polylines, and polygons.Learn more with a POST request.

Examples of static maps with multiple geometries.

In this tutorial, you use the /with-overlay endpoint from the ArcGIS Static Maps service to generate a complex static map with multiple geometries. You also learn how to customize geometries with SVG markers, labels, and colors. The resulting static map is a visitor guide for a local community center, showing parking areas, restrooms, and an amphitheatre. Trails are represented by polylines, and the community center boundary is represented by a polygon.

Prerequisites

You need an ArcGIS Location Platform account to get an access tokenAn access token is an authorization string that provides access to secure ArcGIS content, data, and services. Its capabilities are determined by the privileges it supports. It is obtained by implementing API key authentication, User authentication, or App authentication.Learn more to access the Static Maps service.

Steps

Get an access token

Create a new API key credentialAPI key credentials are an item that contains the parameters used to create and manage long-lived access tokens for API key authentication. They are a type of developer credential.Learn more with privilegesPrivileges are a set of permissions assigned to ArcGIS accounts, developer credentials, and applications that grant access to secure resources and functionality in ArcGIS.Learn more to access the resources used in this tutorial.

If you are familiar with API keys, create an API key credential with the following configurations:
- Type of application: Public application
- Required privileges: Location services > Static maps
If you are new to API keys, go to the Create an API key tutorial for full step-by-step instructions.
When prompted, copy and paste the API key to a safe location. It will be used in the next step.

Create the request body

Define the /with-overlay endpoint and set the basemap style to arcgis/imagery. The URL should look like this:
Use dark colors for code blocksCopy
```
1
https://static-maps-api.arcgis.com/arcgis/rest/services/static-maps-service/v1/static-maps/arcgis/imagery/with-overlay
```
Configure the POST request by setting the Authorization header to Bearer <YOUR_ACCESS_TOKEN>, replacing <YOUR_ACCESS_TOKEN> with your access token, and defining the following request body:
- Define the image object:
  - Set width to 700.
  - Set height to 300.
  - Set format to png.
- Define the map object:
  - Set zoom to 15.
  - Set center.x to -104.944.
  - Set center.y to 39.895.

The request should look like this:

Use dark colors for code blocksCopy
POST https://static-maps-api.arcgis.com/arcgis/rest/services/static-maps-service/v1/static-maps/arcgis/imagery/with-overlay HTTP/1.1
Host: static-maps-api.arcgis.com
Content-Type: application/json
Authorization: Bearer YOUR_ACCESS_TOKEN
Accept: image/png

{
  "image": {
    "width": 700,
    "height": 300,
    "format": "png"
  },
  "map": {
    "zoom": 15,
    "center": {
      "x": -104.944,
      "y": 39.895
    }
  }
}

Create an HTML file containing a <div> element with an <img> element that will display the static map.

HTML/JavaScript
Use dark colors for code blocks

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Recreation Center Map</title>
  </head>
  <body>
    <div>
      <img id="mapImage" />
    </div>

  </body>
</html>

Add a <script> tag to your HTML file. Define variables for your access token, the map image element, the arcgis/imagery basemap style, and the /with-overlay endpoint.

HTML/JavaScript
Expand
Use dark colors for code blocks
    <script>

      const accessToken = "YOUR_ACCESS_TOKEN";
      const mapImage = document.getElementById("mapImage");
      const basemapStyle = "arcgis/imagery";
      const url =
        "https://static-maps-api.arcgis.com/arcgis/rest/services/static-maps-service/v1/static-maps/arcgis/imagery/with-overlay";

    </script>
Expand

Create a POST request to the /with-overlay endpoint. Set the Authorization header to Bearer YOUR_ACCESS_TOKEN, replacing YOUR_ACCESS_TOKEN with your access token. Set the Content-Type header to application/json and the Accept header to image/png. Then convert the response to a blob and set the <img> element's src attribute to display the returned image.

HTML/JavaScript
Expand
Use dark colors for code blocks
    <script>

      const accessToken = "YOUR_ACCESS_TOKEN";
      const mapImage = document.getElementById("mapImage");
      const basemapStyle = "arcgis/imagery";
      const url =
        "https://static-maps-api.arcgis.com/arcgis/rest/services/static-maps-service/v1/static-maps/arcgis/imagery/with-overlay";

      fetch(url, {
        method: "POST",
        headers: {
          Authorization: `Bearer ${accessToken}`,
          "Content-Type": "application/json",
          accept: "image/png",
        },
        body: JSON.stringify(requestBody),
      })
        .then((response) => response.blob())
        .then((blob) => {
          const imgUrl = URL.createObjectURL(blob);
          mapImage.src = imgUrl;
        });

    </script>
Expand

In the request body, define the image object.

Set width to 700.
Set height to 300.
Set format to png.

HTML/JavaScript
Expand
Use dark colors for code blocks
    <script>

      const accessToken = "YOUR_ACCESS_TOKEN";
      const mapImage = document.getElementById("mapImage");
      const basemapStyle = "arcgis/imagery";
      const url =
        "https://static-maps-api.arcgis.com/arcgis/rest/services/static-maps-service/v1/static-maps/arcgis/imagery/with-overlay";

      const requestBody = {

        image: { width: 700, height: 300, format: "png" },

      };

      fetch(url, {
        method: "POST",
        headers: {
          Authorization: `Bearer ${accessToken}`,
          "Content-Type": "application/json",
          accept: "image/png",
        },
        body: JSON.stringify(requestBody),
      })
        .then((response) => response.blob())
        .then((blob) => {
          const imgUrl = URL.createObjectURL(blob);
          mapImage.src = imgUrl;
        });

    </script>
Expand

In the request body, define the map object.

Set zoom to 15.
Set center.x to -104.944.
Set center.y to 39.895.

HTML/JavaScript
Expand
Use dark colors for code blocks
    <script>

      const accessToken = "YOUR_ACCESS_TOKEN";
      const mapImage = document.getElementById("mapImage");
      const basemapStyle = "arcgis/imagery";
      const url =
        "https://static-maps-api.arcgis.com/arcgis/rest/services/static-maps-service/v1/static-maps/arcgis/imagery/with-overlay";

      const requestBody = {

        image: { width: 700, height: 300, format: "png" },

        map: { zoom: 15, center: { x: -104.944, y: 39.895 } },

      };

      fetch(url, {
        method: "POST",
        headers: {
          Authorization: `Bearer ${accessToken}`,
          "Content-Type": "application/json",
          accept: "image/png",
        },
        body: JSON.stringify(requestBody),
      })
        .then((response) => response.blob())
        .then((blob) => {
          const imgUrl = URL.createObjectURL(blob);
          mapImage.src = imgUrl;
        });

    </script>
Expand

Import the following libraries at the top of your Python code.

Python
Use dark colors for code blocks

import requests
from PIL import Image
from io import BytesIO

Define the /with-overlay endpoint and set the basemap style to arcgis/imagery.

Python
Use dark colors for code blocks

import requests
from PIL import Image
from io import BytesIO

url = "https://static-maps-api.arcgis.com/arcgis/rest/services/static-maps-service/v1/static-maps/arcgis/imagery/with-overlay"

Set the headers for the request, including the Content-Type and Authorization headers. Replace <YOUR_ACCESS_TOKEN> with your access token.

Python
Use dark colors for code blocks

import requests
from PIL import Image
from io import BytesIO

url = "https://static-maps-api.arcgis.com/arcgis/rest/services/static-maps-service/v1/static-maps/arcgis/imagery/with-overlay"

headers = {
  "Authorization": "Bearer YOUR_ACCESS_TOKEN",
  "Content-Type": "application/json",
  "Accept": "image/png"
}

In the request body, define the image object.

Set width to 700.
Set height to 300.
Set format to png.

Python
Expand
Use dark colors for code blocks
json_body = {

  "image": { "width": 700,"height": 300,"format": "png" },

}
Expand

In the request body, define the map object.

Set zoom to 15.
Set center.x to -104.944.
Set center.y to 39.895.

Python
Expand
Use dark colors for code blocks
json_body = {

  "image": { "width": 700,"height": 300,"format": "png" },

  "map": {
    "zoom": 15,
    "center": {
      "x": -104.944,
      "y": 39.895
    }
  },

}
Expand

Create a polygon

The overlay array in the request body is used to define geometries on the static map. Create a polygon to represent the community center boundary.

In the request body, define the overlay array and add a polygon for the community center boundary.

Set the type to polygon.
Set the geometry.rings to [[[-104.9402957, 39.8993397], [-104.9496416, 39.8992878], [-104.9496416, 39.895869], [-104.9508878, 39.895869], [-104.9517411, 39.8956819], [-104.9526892, 39.8951416], [-104.9522693, 39.8946116], [-104.9522693, 39.8943206], [-104.9523235, 39.8938737], [-104.9518494, 39.8939049], [-104.9516598, 39.894092], [-104.9514973, 39.8943414], [-104.9509284, 39.8946324], [-104.9507388, 39.8948922], [-104.9502918, 39.8951727], [-104.950048, 39.8952247], [-104.9497635, 39.8949233], [-104.9497094, 39.8931983], [-104.9495739, 39.8928449], [-104.9495468, 39.8921902], [-104.9403462, 39.8921958], [-104.9402957, 39.8993397]]].
Set the geometry.spatialReference.wkid to 4326.
Set the symbol.style to solid.
Set the symbol.color to fcef033b.
Set the symbol.outline.style to solid.
Set the symbol.outline.color to fcef03.
Set the symbol.outline.width to 1.

Use dark colors for code blocksCopy
"overlay": [
  {
    "type": "polygon",
    "geometry": {
      "rings": [[[-104.9402957, 39.8993397], [-104.9496416, 39.8992878], [-104.9496416, 39.895869], [-104.9508878, 39.895869], [-104.9517411, 39.8956819], [-104.9526892, 39.8951416], [-104.9522693, 39.8946116], [-104.9522693, 39.8943206], [-104.9523235, 39.8938737], [-104.9518494, 39.8939049], [-104.9516598, 39.894092], [-104.9514973, 39.8943414], [-104.9509284, 39.8946324], [-104.9507388, 39.8948922], [-104.9502918, 39.8951727], [-104.950048, 39.8952247], [-104.9497635, 39.8949233], [-104.9497094, 39.8931983], [-104.9495739, 39.8928449], [-104.9495468, 39.8921902], [-104.9403462, 39.8921958], [-104.9402957, 39.8993397]]],
      "spatialReference": { "wkid": 4326 }
    },
    "symbol": {
      "style": "solid",
      "color": "fcef033b",
      "outline": {
        "style": "solid",
        "color": "fcef03",
        "width": 1
      }
    }
  }
]

In the request body, define the overlay array and add a polygon for the community center boundary.

Set the type to polygon.
Set the geometry.rings to [[[-104.9402957, 39.8993397], [-104.9496416, 39.8992878], [-104.9496416, 39.895869], [-104.9508878, 39.895869], [-104.9517411, 39.8956819], [-104.9526892, 39.8951416], [-104.9522693, 39.8946116], [-104.9522693, 39.8943206], [-104.9523235, 39.8938737], [-104.9518494, 39.8939049], [-104.9516598, 39.894092], [-104.9514973, 39.8943414], [-104.9509284, 39.8946324], [-104.9507388, 39.8948922], [-104.9502918, 39.8951727], [-104.950048, 39.8952247], [-104.9497635, 39.8949233], [-104.9497094, 39.8931983], [-104.9495739, 39.8928449], [-104.9495468, 39.8921902], [-104.9403462, 39.8921958], [-104.9402957, 39.8993397]]].
Set the geometry.spatialReference.wkid to 4326.
Set the symbol.style to solid.
Set the symbol.color to fcef033b.
Set the symbol.outline.style to solid.
Set the symbol.outline.color to fcef03.
Set the symbol.outline.width to 1.

HTML/JavaScript
Expand
Use dark colors for code blocks
        overlay: [

          {
            type: "polygon",
            geometry: {
              rings: [
                [
                  [-104.9402957, 39.8993397],
                  [-104.9496416, 39.8992878],
                  [-104.9496416, 39.895869],
                  [-104.9508878, 39.895869],
                  [-104.9517411, 39.8956819],
                  [-104.9526892, 39.8951416],
                  [-104.9522693, 39.8946116],
                  [-104.9522693, 39.8943206],
                  [-104.9523235, 39.8938737],
                  [-104.9518494, 39.8939049],
                  [-104.9516598, 39.894092],
                  [-104.9514973, 39.8943414],
                  [-104.9509284, 39.8946324],
                  [-104.9507388, 39.8948922],
                  [-104.9502918, 39.8951727],
                  [-104.950048, 39.8952247],
                  [-104.9497635, 39.8949233],
                  [-104.9497094, 39.8931983],
                  [-104.9495739, 39.8928449],
                  [-104.9495468, 39.8921902],
                  [-104.9403462, 39.8921958],
                  [-104.9402957, 39.8993397],
                ],
              ],
              spatialReference: { wkid: 4326 },
            },
            symbol: {
              style: "solid",
              color: "fcef033b",
              outline: { style: "solid", color: "fcef03", width: 1 },
            },
          },

        ],
Expand

In the request body, define the overlay array and add a polygon for the community center boundary.

Set the type to polygon.
Set the geometry.rings to [[[-104.9402957, 39.8993397], [-104.9496416, 39.8992878], [-104.9496416, 39.895869], [-104.9508878, 39.895869], [-104.9517411, 39.8956819], [-104.9526892, 39.8951416], [-104.9522693, 39.8946116], [-104.9522693, 39.8943206], [-104.9523235, 39.8938737], [-104.9518494, 39.8939049], [-104.9516598, 39.894092], [-104.9514973, 39.8943414], [-104.9509284, 39.8946324], [-104.9507388, 39.8948922], [-104.9502918, 39.8951727], [-104.950048, 39.8952247], [-104.9497635, 39.8949233], [-104.9497094, 39.8931983], [-104.9495739, 39.8928449], [-104.9495468, 39.8921902], [-104.9403462, 39.8921958], [-104.9402957, 39.8993397]]].
Set the geometry.spatialReference.wkid to 4326.
Set the symbol.style to solid.
Set the symbol.color to fcef033b.
Set the symbol.outline.style to solid.
Set the symbol.outline.color to fcef03.
Set the symbol.outline.width to 1.

Python
Expand
Use dark colors for code blocks
  "overlay": [

    {
      "type": "polygon",
      "geometry": {
        "rings": [[[-104.9402957,39.8993397],[-104.9496416,39.8992878],[-104.9496416,39.895869],[-104.9508878,39.895869],[-104.9517411,39.8956819],[-104.9526892,39.8951416],[-104.9522693,39.8946116],[-104.9522693,39.8943206],[-104.9523235,39.8938737],[-104.9518494,39.8939049],[-104.9516598,39.894092],[-104.9514973,39.8943414],[-104.9509284,39.8946324],[-104.9507388,39.8948922],[-104.9502918,39.8951727],[-104.950048,39.8952247],[-104.9497635,39.8949233],[-104.9497094,39.8931983],[-104.9495739,39.8928449],[-104.9495468,39.8921902],[-104.9403462,39.8921958],[-104.9402957,39.8993397]]],
        "spatialReference": { "wkid": 4326 }
      },
      "symbol": { "style": "solid","color": "fcef033b","outline": { "style": "solid","color": "fcef03","width": 1 } }
    },

  ],
Expand

Create points with default marker symbols

In the overlay array, create points with default marker symbols and labels to represent parking areas.

In the overlay array, create four new geometries with default marker symbols and labels.
- Set the type to point
- Set the geometry.x to -104.9458346 and geometry.y to 39.8941225.
- Set the geometry.spatialReference.wkid to 4326.
- Set the symbol.style to circle.
- Set the symbol.color to 005e95.
- Set the symbol.label to P.
- Set the symbol.scale to 1.
Repeat the previous step for three more points, changing the geometry.x and geometry.y values for each point.
- geometry.x to -104.9423264 and geometry.y to 39.8930833.
- geometry.x to -104.9412564 and geometry.y to 39.8971153.
- geometry.x to -104.944006 and geometry.y to 39.8985702.

Your overlay array should now look like this:

Use dark colors for code blocksCopy
"overlay": [
  // ... existing polygon geometry
  { "type": "point", "geometry": { "x": -104.9458346, "y": 39.8941225, "spatialReference": { "wkid": 4326 } }, "symbol": { "style": "circle", "color": "005e95", "label": "P", "scale": 1 } },
  { "type": "point", "geometry": { "x": -104.9423264, "y": 39.8930833, "spatialReference": { "wkid": 4326 } }, "symbol": { "style": "circle", "color": "005e95", "label": "P", "scale": 1 } },
  { "type": "point", "geometry": { "x": -104.9412564, "y": 39.8971153, "spatialReference": { "wkid": 4326 } }, "symbol": { "style": "circle", "color": "005e95", "label": "P", "scale": 1 } },
  { "type": "point", "geometry": { "x": -104.944006, "y": 39.8985702, "spatialReference": { "wkid": 4326 } }, "symbol": { "style": "circle", "color": "005e95", "label": "P", "scale": 1 } }
]

In the overlay array, create four new geometries with labels and default marker symbols.
- Set the type to point
- Set the geometry.x to -104.9458346 and geometry.y to 39.8941225.
- Set the geometry.spatialReference.wkid to 4326.
- Set the symbol.style to circle.
- Set the symbol.color to 005e95.
- Set the symbol.label to P.
- Set the symbol.scale to 1.

Repeat the previous step for three more points, changing the geometry.x and geometry.y values for each point.

geometry.x to -104.9423264 and geometry.y to 39.8930833.
geometry.x to -104.9412564 and geometry.y to 39.8971153.
geometry.x to -104.944006 and geometry.y to 39.8985702.

HTML/JavaScript
Expand
Use dark colors for code blocks
          {
            type: "point",
            geometry: {
              x: -104.9458346,
              y: 39.8941225,
              spatialReference: { wkid: 4326 },
            },
            symbol: { style: "circle", color: "005e95", label: "P", scale: 1 },
          },
          {
            type: "point",
            geometry: {
              x: -104.9423264,
              y: 39.8930833,
              spatialReference: { wkid: 4326 },
            },
            symbol: { style: "circle", color: "005e95", label: "P", scale: 1 },
          },
          {
            type: "point",
            geometry: {
              x: -104.9412564,
              y: 39.8971153,
              spatialReference: { wkid: 4326 },
            },
            symbol: { style: "circle", color: "005e95", label: "P", scale: 1 },
          },
          {
            type: "point",
            geometry: {
              x: -104.944006,
              y: 39.8985702,
              spatialReference: { wkid: 4326 },
            },
            symbol: { style: "circle", color: "005e95", label: "P", scale: 1 },
          },

Expand

In the overlay array, create four new geometries with labels and default marker symbols.
- Set the type to point
- Set the geometry.x to -104.9458346 and geometry.y to 39.8941225.
- Set the geometry.spatialReference.wkid to 4326.
- Set the symbol.style to circle.
- Set the symbol.color to 005e95.
- Set the symbol.label to P.
- Set the symbol.scale to 1.

Repeat the previous step for three more points, changing the geometry.x and geometry.y values for each point.

geometry.x to -104.9423264 and geometry.y to 39.8930833.
geometry.x to -104.9412564 and geometry.y to 39.8971153.
geometry.x to -104.944006 and geometry.y to 39.8985702.

Python
Expand
Use dark colors for code blocks
    { "type": "point","geometry": { "x": -104.9458346,"y": 39.8941225,"spatialReference": { "wkid": 4326 } },"symbol": { "style": "circle","color": "005e95","label": "P","scale": 1 } },
    { "type": "point","geometry": { "x": -104.9423264,"y": 39.8930833,"spatialReference": { "wkid": 4326 } },"symbol": { "style": "circle","color": "005e95","label": "P","scale": 1 } },
    { "type": "point","geometry": { "x": -104.9412564,"y": 39.8971153,"spatialReference": { "wkid": 4326 } },"symbol": { "style": "circle","color": "005e95","label": "P","scale": 1 } },
    { "type": "point","geometry": { "x": -104.944006,"y": 39.8985702,"spatialReference": { "wkid": 4326 } },"symbol": { "style": "circle","color": "005e95","label": "P","scale": 1 } },

Expand

Create points with custom marker symbols

In the overlay array, create points with custom marker symbols to represent places of interest, such as restrooms and an amphitheatre, within the community center. The custom marker symbols are defined in the symbolDictionary object in the request body as key-value pairs. The key is a unique string and the value is a base64‑encoded data URL string representing the SVG image. The symbols are then referenced in the point geometries using customSymbolId.

Create a symbolDictionary object in the request body and define two custom marker symbols for the restrooms and amphitheatre.

Set the restroom key to:

Use dark colors for code blocksCopy
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNyAxNyI+CiAgPGNpcmNsZSBjeD0iOC41IiBjeT0iOC41IiByPSI4LjUiIGZpbGw9IiNGMjhDMjgiLz4KICA8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTQuNTggMi45OThzLTEuNDkyIDEuMS0zLjU4IDEuMWMtLjA0IDAtLjA3NC0uMDA2LS4xMTMtLjAwNy4wMzUuNDQ5LjA1OC45NDYuMDU4IDEuNDc3IDAgMS44OC0uMjk4IDQuMDQtLjM2MiA0LjQ4LjEzOC0uMDIuMjY5LS4wNS40MTctLjA1IDIgMCAzIDIgMyAycy0xLjM3NS0xLjEtMy0xLjFjLS4yMDYgMC0uNDA4LjAxOC0uNjAzLjA0OS0uMjY4Ljk3My0uOCAyLjE0LTEuNjg4IDIuOTcxLjUzMy42MTIgMS4yNyAxLjA4IDIuMjkxIDEuMDggMyAwIDMuNTgtNCAzLjU4LTRzLjM2NS0yLjQyMi4zNjUtNC40M2MwLTIuMDUtLjM2NS0zLjU3LS4zNjUtMy41N3ptLTEuMDggNGgtMWEuNTAxLjUwMSAwIDAgMS0uNS0uNWMwLS4yNzUuMjI1LS41LjUtLjVoMWMuMjc1IDAgLjUuMjI1LjUuNXMtLjIyNS41LS41LjV6bS0zLjkyLTVzLTEuNDkyIDEuMS0zLjU4IDEuMS0zLjU4LTEuMS0zLjU4LTEuMS0uMzY1IDEuNTE1LS4zNjUgMy41Ny4zNjUgNC40My4zNjUgNC40My41OCA0IDMuNTggNCAzLjU4LTQgMy41OC00IC4zNjUtMi40MjIuMzY1LTQuNDNjMC0yLjA1LS4zNjUtMy41Ny0uMzY1LTMuNTd6bS02LjA4IDNoMWMuMjc1IDAgLjUuMjI1LjUuNXMtLjIyNS41LS41LjVoLTFhLjUwMS41MDEgMCAwIDEtLjUtLjVjMC0uMjc1LjIyNS0uNS41LS41em0yLjUgNmMtMiAwLTMtMi0zLTJzMS4zNzUgMS4xIDMgMS4xIDMtMS4xIDMtMS4xLTEgMi0zIDJ6bTIuNS01aC0xYS41MDEuNTAxIDAgMCAxLS41LS41YzAtLjI3NS4yMjUtLjUuNS0uNWgxYy4yNzUgMCAuNS4yMjUuNS41cy0uMjI1LjUtLjUuNXoiLz4KPC9zdmc+

Set the amphitheatre key to:

Use dark colors for code blocksCopy
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMSAyMSI+CiAgPGNpcmNsZSBjeD0iMTAuNSIgY3k9IjEwLjUiIHI9IjEwLjUiIGZpbGw9IiMwMDc4RDQiLz4KICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNNi4xNSA0YTEuMzUgMS4zNSAwIDEgMSAyLjcgMCAxLjM1IDEuMzUgMCAwIDEtMi43IDB6bTguMzUgMS4zNWExLjM1IDEuMzUgMCAxIDAgMC0yLjcgMS4zNSAxLjM1IDAgMCAwIDAgMi43em0tNC4yMiAxLjQ1MmExLjAzNyAxLjAzNyAwIDAgMC0uOTgtLjgwNGwtMy42MDguMDAxYy0uNDg1LjAwNC0uODg5LjM4OC0uOTcyLjgwM2wtLjU2NCAyLjgxN2MtLjA5Mi40NTktLjE5Ni45MTUtLjI4OCAxLjM3My0uMTMuNjQzLS4yNTUgMS41MzguMzk5IDEuNDkyYS40NDguNDQ4IDAgMCAwIC40MDgtLjM1OWwuODUtNC4yNS42NzQgMS4xMjMtLjk5OSA2SDZ2My41YS41LjUgMCAxIDAgMSAwdi0zLjVoMXYzLjVhLjUuNSAwIDEgMCAxIDB2LTMuNWguOGwtLjk5OS02IC42NzctMS4xMTIuODQ3IDQuMjRjLjA0LjE5Ny4yMDcuMzQ0LjQwOC4zNTguNzgzLjA1NC40NTItMS4xNTguMzAzLTEuOTA1bC0uNDA3LTIuMDM0LS4zNDktMS43NDN6TTE2IDUuOTk4aC0zYy0uNTUgMC0xIC40NS0xIDF2NS41YS41LjUgMCAwIDAgLjUuNWguNXY1LjVhLjUuNSAwIDEgMCAxIDB2LTQuNWgxdjQuNWEuNS41IDAgMSAwIDEgMHYtNS41aC41YS41LjUgMCAwIDAgLjUtLjV2LTUuNWMwLS41NS0uNDUtMS0xLTF6Ii8+Cjwvc3ZnPgo=

In the overlay array, create a new point with a custom marker symbol for the amphitheatre.
- Set the type to point
- Set the geometry.x to -104.945388 and geometry.y to 39.8966582.
- Set the geometry.spatialReference.wkid to 4326.
- Set the symbol.customSymbolId to amphitheatre.
- Set the symbol.scale to 1.
Create a new point with a custom marker symbol for the restroom.
- Set the type to point
- Set the geometry.x to -104.9459995 and geometry.y to 39.8974496.
- Set the geometry.spatialReference.wkid to 4326.
- Set the symbol.customSymbolId to restroom.
- Set the symbol.scale to 0.75.
Create another point with a custom marker symbol for the restroom, with geometry.x of -104.9423995 and geometry.y of 39.8968409.

Your overlay array should now include all the points with their respective custom marker symbols.

Use dark colors for code blocksCopy
{
  "overlay": [
    // ... existing polygon geometry
    // ... existing points geometry
    { "type": "point", "geometry": { "x": -104.945388, "y": 39.8966582, "spatialReference": { "wkid": 4326 } }, "symbol": { "customSymbolId": "amphitheatre", "scale": 1 } },
    { "type": "point", "geometry": { "x": -104.9459995, "y": 39.8974496, "spatialReference": { "wkid": 4326 } }, "symbol": { "customSymbolId": "bathroom", "scale": 0.75 } },
    { "type": "point", "geometry": { "x": -104.9423995, "y": 39.8968409, "spatialReference": { "wkid": 4326 } }, "symbol": { "customSymbolId": "bathroom", "scale": 0.75 } },
  ],
  "symbolDictionary": {
    "amphitheatre": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNyAxNyI+CiAgPGNpcmNsZSBjeD0iOC41IiBjeT0iOC41IiByPSI4LjUiIGZpbGw9IiNGMjhDMjgiLz4KICA8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTQuNTggMi45OThzLTEuNDkyIDEuMS0zLjU4IDEuMWMtLjA0IDAtLjA3NC0uMDA2LS4xMTMtLjAwNy4wMzUuNDQ5LjA1OC45NDYuMDU4IDEuNDc3IDAgMS44OC0uMjk4IDQuMDQtLjM2MiA0LjQ4LjEzOC0uMDIuMjY5LS4wNS40MTctLjA1IDIgMCAzIDIgMyAycy0xLjM3NS0xLjEtMy0xLjFjLS4yMDYgMC0uNDA4LjAxOC0uNjAzLjA0OS0uMjY4Ljk3My0uOCAyLjE0LTEuNjg4IDIuOTcxLjUzMy42MTIgMS4yNyAxLjA4IDIuMjkxIDEuMDggMyAwIDMuNTgtNCAzLjU4LTRzLjM2NS0yLjQyMi4zNjUtNC40M2MwLTIuMDUtLjM2NS0zLjU3LS4zNjUtMy41N3ptLTEuMDggNGgtMWEuNTAxLjUwMSAwIDAgMS0uNS0uNWMwLS4yNzUuMjI1LS41LjUtLjVoMWMuMjc1IDAgLjUuMjI1LjUuNXMtLjIyNS41LS41LjV6bS0zLjkyLTVzLTEuNDkyIDEuMS0zLjU4IDEuMS0zLjU4LTEuMS0zLjU4LTEuMS0uMzY1IDEuNTE1LS4zNjUgMy41Ny4zNjUgNC40My4zNjUgNC40My41OCA0IDMuNTggNCAzLjU4LTQgMy41OC00IC4zNjUtMi40MjIuMzY1LTQuNDNjMC0yLjA1LS4zNjUtMy41Ny0uMzY1LTMuNTd6bS02LjA4IDNoMWMuMjc1IDAgLjUuMjI1LjUuNXMtLjIyNS41LS41LjVoLTFhLjUwMS41MDEgMCAwIDEtLjUtLjVjMC0uMjc1LjIyNS0uNS41LS41em0yLjUgNmMtMiAwLTMtMi0zLTJzMS4zNzUgMS4xIDMgMS4xIDMtMS4xIDMtMS4xLTEgMi0zIDJ6bTIuNS01aC0xYS41MDEuNTAxIDAgMCAxLS41LS41YzAtLjI3NS4yMjUtLjUuNS0uNWgxYy4yNzUgMCAuNS4yMjUuNS41cy0uMjI1LjUtLjUuNXoiLz4KPC9zdmc+",
    "bathroom": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMSAyMSI+CiAgPGNpcmNsZSBjeD0iMTAuNSIgY3k9IjEwLjUiIHI9IjEwLjUiIGZpbGw9IiMwMDc4RDQiLz4KICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNNi4xNSA0YTEuMzUgMS4zNSAwIDEgMSAyLjcgMCAxLjM1IDEuMzUgMCAwIDEtMi43IDB6bTguMzUgMS4zNWExLjM1IDEuMzUgMCAxIDAgMC0yLjcgMS4zNSAxLjM1IDAgMCAwIDAgMi43em0tNC4yMiAxLjQ1MmExLjAzNyAxLjAzNyAwIDAgMC0uOTgtLjgwNGwtMy42MDguMDAxYy0uNDg1LjAwNC0uODg5LjM4OC0uOTcyLjgwM2wtLjU2NCAyLjgxN2MtLjA5Mi40NTktLjE5Ni45MTUtLjI4OCAxLjM3My0uMTMuNjQzLS4yNTUgMS41MzguMzk5IDEuNDkyYS40NDguNDQ4IDAgMCAwIC40MDgtLjM1OWwuODUtNC4yNS42NzQgMS4xMjMtLjk5OSA2SDZ2My41YS41LjUgMCAxIDAgMSAwdi0zLjVoMXYzLjVhLjUuNSAwIDEgMCAxIDB2LTMuNWguOGwtLjk5OS02IC42NzctMS4xMTIuODQ3IDQuMjRjLjA0LjE5Ny4yMDcuMzQ0LjQwOC4zNTguNzgzLjA1NC40NTItMS4xNTguMzAzLTEuOTA1bC0uNDA3LTIuMDM0LS4zNDktMS43NDN6TTE2IDUuOTk4aC0zYy0uNTUgMC0xIC40NS0xIDF2NS41YS41LjUgMCAwIDAgLjUuNWguNXY1LjVhLjUuNSAwIDEgMCAxIDB2LTQuNWgxdjQuNWEuNS41IDAgMSAwIDEgMHYtNS41aC41YS41LjUgMCAwIDAgLjUtLjV2LTUuNWMwLS41NS0uNDUtMS0xLTF6Ii8+Cjwvc3ZnPgo="
  }
}

Create a symbolDictionary object in the request body and define two custom marker symbols for the restrooms and amphitheatre.

Set the restroom key to:

Use dark colors for code blocksCopy
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNyAxNyI+CiAgPGNpcmNsZSBjeD0iOC41IiBjeT0iOC41IiByPSI4LjUiIGZpbGw9IiNGMjhDMjgiLz4KICA8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTQuNTggMi45OThzLTEuNDkyIDEuMS0zLjU4IDEuMWMtLjA0IDAtLjA3NC0uMDA2LS4xMTMtLjAwNy4wMzUuNDQ5LjA1OC45NDYuMDU4IDEuNDc3IDAgMS44OC0uMjk4IDQuMDQtLjM2MiA0LjQ4LjEzOC0uMDIuMjY5LS4wNS40MTctLjA1IDIgMCAzIDIgMyAycy0xLjM3NS0xLjEtMy0xLjFjLS4yMDYgMC0uNDA4LjAxOC0uNjAzLjA0OS0uMjY4Ljk3My0uOCAyLjE0LTEuNjg4IDIuOTcxLjUzMy42MTIgMS4yNyAxLjA4IDIuMjkxIDEuMDggMyAwIDMuNTgtNCAzLjU4LTRzLjM2NS0yLjQyMi4zNjUtNC40M2MwLTIuMDUtLjM2NS0zLjU3LS4zNjUtMy41N3ptLTEuMDggNGgtMWEuNTAxLjUwMSAwIDAgMS0uNS0uNWMwLS4yNzUuMjI1LS41LjUtLjVoMWMuMjc1IDAgLjUuMjI1LjUuNXMtLjIyNS41LS41LjV6bS0zLjkyLTVzLTEuNDkyIDEuMS0zLjU4IDEuMS0zLjU4LTEuMS0zLjU4LTEuMS0uMzY1IDEuNTE1LS4zNjUgMy41Ny4zNjUgNC40My4zNjUgNC40My41OCA0IDMuNTggNCAzLjU4LTQgMy41OC00IC4zNjUtMi40MjIuMzY1LTQuNDNjMC0yLjA1LS4zNjUtMy41Ny0uMzY1LTMuNTd6bS02LjA4IDNoMWMuMjc1IDAgLjUuMjI1LjUuNXMtLjIyNS41LS41LjVoLTFhLjUwMS41MDEgMCAwIDEtLjUtLjVjMC0uMjc1LjIyNS0uNS41LS41em0yLjUgNmMtMiAwLTMtMi0zLTJzMS4zNzUgMS4xIDMgMS4xIDMtMS4xIDMtMS4xLTEgMi0zIDJ6bTIuNS01aC0xYS41MDEuNTAxIDAgMCAxLS41LS41YzAtLjI3NS4yMjUtLjUuNS0uNWgxYy4yNzUgMCAuNS4yMjUuNS41cy0uMjI1LjUtLjUuNXoiLz4KPC9zdmc+

Set the amphitheatre key to:

Use dark colors for code blocksCopy
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMSAyMSI+CiAgPGNpcmNsZSBjeD0iMTAuNSIgY3k9IjEwLjUiIHI9IjEwLjUiIGZpbGw9IiMwMDc4RDQiLz4KICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNNi4xNSA0YTEuMzUgMS4zNSAwIDEgMSAyLjcgMCAxLjM1IDEuMzUgMCAwIDEtMi43IDB6bTguMzUgMS4zNWExLjM1IDEuMzUgMCAxIDAgMC0yLjcgMS4zNSAxLjM1IDAgMCAwIDAgMi43em0tNC4yMiAxLjQ1MmExLjAzNyAxLjAzNyAwIDAgMC0uOTgtLjgwNGwtMy42MDguMDAxYy0uNDg1LjAwNC0uODg5LjM4OC0uOTcyLjgwM2wtLjU2NCAyLjgxN2MtLjA5Mi40NTktLjE5Ni45MTUtLjI4OCAxLjM3My0uMTMuNjQzLS4yNTUgMS41MzguMzk5IDEuNDkyYS40NDguNDQ4IDAgMCAwIC40MDgtLjM1OWwuODUtNC4yNS42NzQgMS4xMjMtLjk5OSA2SDZ2My41YS41LjUgMCAxIDAgMSAwdi0zLjVoMXYzLjVhLjUuNSAwIDEgMCAxIDB2LTMuNWguOGwtLjk5OS02IC42NzctMS4xMTIuODQ3IDQuMjRjLjA0LjE5Ny4yMDcuMzQ0LjQwOC4zNTguNzgzLjA1NC40NTItMS4xNTguMzAzLTEuOTA1bC0uNDA3LTIuMDM0LS4zNDktMS43NDN6TTE2IDUuOTk4aC0zYy0uNTUgMC0xIC40NS0xIDF2NS41YS41LjUgMCAwIDAgLjUuNWguNXY1LjVhLjUuNSAwIDEgMCAxIDB2LTQuNWgxdjQuNWEuNS41IDAgMSAwIDEgMHYtNS41aC41YS41LjUgMCAwIDAgLjUtLjV2LTUuNWMwLS41NS0uNDUtMS0xLTF6Ii8+Cjwvc3ZnPgo=

HTML/JavaScript
Expand
Use dark colors for code blocks
        symbolDictionary: {
          amphitheatre:
            "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNyAxNyI+CiAgPGNpcmNsZSBjeD0iOC41IiBjeT0iOC41IiByPSI4LjUiIGZpbGw9IiNGMjhDMjgiLz4KICA8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTQuNTggMi45OThzLTEuNDkyIDEuMS0zLjU4IDEuMWMtLjA0IDAtLjA3NC0uMDA2LS4xMTMtLjAwNy4wMzUuNDQ5LjA1OC45NDYuMDU4IDEuNDc3IDAgMS44OC0uMjk4IDQuMDQtLjM2MiA0LjQ4LjEzOC0uMDIuMjY5LS4wNS40MTctLjA1IDIgMCAzIDIgMyAycy0xLjM3NS0xLjEtMy0xLjFjLS4yMDYgMC0uNDA4LjAxOC0uNjAzLjA0OS0uMjY4Ljk3My0uOCAyLjE0LTEuNjg4IDIuOTcxLjUzMy42MTIgMS4yNyAxLjA4IDIuMjkxIDEuMDggMyAwIDMuNTgtNCAzLjU4LTRzLjM2NS0yLjQyMi4zNjUtNC40M2MwLTIuMDUtLjM2NS0zLjU3LS4zNjUtMy41N3ptLTEuMDggNGgtMWEuNTAxLjUwMSAwIDAgMS0uNS0uNWMwLS4yNzUuMjI1LS41LjUtLjVoMWMuMjc1IDAgLjUuMjI1LjUuNXMtLjIyNS41LS41LjV6bS0zLjkyLTVzLTEuNDkyIDEuMS0zLjU4IDEuMS0zLjU4LTEuMS0zLjU4LTEuMS0uMzY1IDEuNTE1LS4zNjUgMy41Ny4zNjUgNC40My4zNjUgNC40My41OCA0IDMuNTggNCAzLjU4LTQgMy41OC00IC4zNjUtMi40MjIuMzY1LTQuNDNjMC0yLjA1LS4zNjUtMy41Ny0uMzY1LTMuNTd6bS02LjA4IDNoMWMuMjc1IDAgLjUuMjI1LjUuNXMtLjIyNS41LS41LjVoLTFhLjUwMS41MDEgMCAwIDEtLjUtLjVjMC0uMjc1LjIyNS0uNS41LS41em0yLjUgNmMtMiAwLTMtMi0zLTJzMS4zNzUgMS4xIDMgMS4xIDMtMS4xIDMtMS4xLTEgMi0zIDJ6bTIuNS01aC0xYS41MDEuNTAxIDAgMCAxLS41LS41YzAtLjI3NS4yMjUtLjUuNS0uNWgxYy4yNzUgMCAuNS4yMjUuNS41cy0uMjI1LjUtLjUuNXoiLz4KPC9zdmc+",
          bathroom:
            "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMSAyMSI+CiAgPGNpcmNsZSBjeD0iMTAuNSIgY3k9IjEwLjUiIHI9IjEwLjUiIGZpbGw9IiMwMDc4RDQiLz4KICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNNi4xNSA0YTEuMzUgMS4zNSAwIDEgMSAyLjcgMCAxLjM1IDEuMzUgMCAwIDEtMi43IDB6bTguMzUgMS4zNWExLjM1IDEuMzUgMCAxIDAgMC0yLjcgMS4zNSAxLjM1IDAgMCAwIDAgMi43em0tNC4yMiAxLjQ1MmExLjAzNyAxLjAzNyAwIDAgMC0uOTgtLjgwNGwtMy42MDguMDAxYy0uNDg1LjAwNC0uODg5LjM4OC0uOTcyLjgwM2wtLjU2NCAyLjgxN2MtLjA5Mi40NTktLjE5Ni45MTUtLjI4OCAxLjM3My0uMTMuNjQzLS4yNTUgMS41MzguMzk5IDEuNDkyYS40NDguNDQ4IDAgMCAwIC40MDgtLjM1OWwuODUtNC4yNS42NzQgMS4xMjMtLjk5OSA2SDZ2My41YS41LjUgMCAxIDAgMSAwdi0zLjVoMXYzLjVhLjUuNSAwIDEgMCAxIDB2LTMuNWguOGwtLjk5OS02IC42NzctMS4xMTIuODQ3IDQuMjRjLjA0LjE5Ny4yMDcuMzQ0LjQwOC4zNTguNzgzLjA1NC40NTItMS4xNTguMzAzLTEuOTA1bC0uNDA3LTIuMDM0LS4zNDktMS43NDN6TTE2IDUuOTk4aC0zYy0uNTUgMC0xIC40NS0xIDF2NS41YS41LjUgMCAwIDAgLjUuNWguNXY1LjVhLjUuNSAwIDEgMCAxIDB2LTQuNWgxdjQuNWEuNS41IDAgMSAwIDEgMHYtNS41aC41YS41LjUgMCAwIDAgLjUtLjV2LTUuNWMwLS41NS0uNDUtMS0xLTF6Ii8+Cjwvc3ZnPgo=",
        },
Expand

In the overlay array, create a new point with a custom marker symbol for the amphitheatre.
- Set the type to point
- Set the geometry.x to -104.945388 and geometry.y to 39.8966582.
- Set the geometry.spatialReference.wkid to 4326.
- Set the symbol.customSymbolId to amphitheatre.
- Set the symbol.scale to 1.
Create a new point with a custom marker symbol for the restroom.
- Set the type to point
- Set the geometry.x to -104.9459995 and geometry.y to 39.8974496.
- Set the geometry.spatialReference.wkid to 4326.
- Set the symbol.customSymbolId to restroom.
- Set the symbol.scale to 0.75.

Create another point with a custom marker symbol for the restroom, with geometry.x of -104.9423995 and geometry.y of 39.8968409.

HTML/JavaScript
Expand
Use dark colors for code blocks
          {
            type: "point",
            geometry: {
              x: -104.9458346,
              y: 39.8941225,
              spatialReference: { wkid: 4326 },
            },
            symbol: { style: "circle", color: "005e95", label: "P", scale: 1 },
          },
          {
            type: "point",
            geometry: {
              x: -104.9423264,
              y: 39.8930833,
              spatialReference: { wkid: 4326 },
            },
            symbol: { style: "circle", color: "005e95", label: "P", scale: 1 },
          },
          {
            type: "point",
            geometry: {
              x: -104.9412564,
              y: 39.8971153,
              spatialReference: { wkid: 4326 },
            },
            symbol: { style: "circle", color: "005e95", label: "P", scale: 1 },
          },
          {
            type: "point",
            geometry: {
              x: -104.944006,
              y: 39.8985702,
              spatialReference: { wkid: 4326 },
            },
            symbol: { style: "circle", color: "005e95", label: "P", scale: 1 },
          },

Expand

Create a symbolDictionary object in the request body and define two custom marker symbols for the restrooms and amphitheatre.

Set the restroom key to:

Use dark colors for code blocksCopy
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNyAxNyI+CiAgPGNpcmNsZSBjeD0iOC41IiBjeT0iOC41IiByPSI4LjUiIGZpbGw9IiNGMjhDMjgiLz4KICA8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTQuNTggMi45OThzLTEuNDkyIDEuMS0zLjU4IDEuMWMtLjA0IDAtLjA3NC0uMDA2LS4xMTMtLjAwNy4wMzUuNDQ5LjA1OC45NDYuMDU4IDEuNDc3IDAgMS44OC0uMjk4IDQuMDQtLjM2MiA0LjQ4LjEzOC0uMDIuMjY5LS4wNS40MTctLjA1IDIgMCAzIDIgMyAycy0xLjM3NS0xLjEtMy0xLjFjLS4yMDYgMC0uNDA4LjAxOC0uNjAzLjA0OS0uMjY4Ljk3My0uOCAyLjE0LTEuNjg4IDIuOTcxLjUzMy42MTIgMS4yNyAxLjA4IDIuMjkxIDEuMDggMyAwIDMuNTgtNCAzLjU4LTRzLjM2NS0yLjQyMi4zNjUtNC40M2MwLTIuMDUtLjM2NS0zLjU3LS4zNjUtMy41N3ptLTEuMDggNGgtMWEuNTAxLjUwMSAwIDAgMS0uNS0uNWMwLS4yNzUuMjI1LS41LjUtLjVoMWMuMjc1IDAgLjUuMjI1LjUuNXMtLjIyNS41LS41LjV6bS0zLjkyLTVzLTEuNDkyIDEuMS0zLjU4IDEuMS0zLjU4LTEuMS0zLjU4LTEuMS0uMzY1IDEuNTE1LS4zNjUgMy41Ny4zNjUgNC40My4zNjUgNC40My41OCA0IDMuNTggNCAzLjU4LTQgMy41OC00IC4zNjUtMi40MjIuMzY1LTQuNDNjMC0yLjA1LS4zNjUtMy41Ny0uMzY1LTMuNTd6bS02LjA4IDNoMWMuMjc1IDAgLjUuMjI1LjUuNXMtLjIyNS41LS41LjVoLTFhLjUwMS41MDEgMCAwIDEtLjUtLjVjMC0uMjc1LjIyNS0uNS41LS41em0yLjUgNmMtMiAwLTMtMi0zLTJzMS4zNzUgMS4xIDMgMS4xIDMtMS4xIDMtMS4xLTEgMi0zIDJ6bTIuNS01aC0xYS41MDEuNTAxIDAgMCAxLS41LS41YzAtLjI3NS4yMjUtLjUuNS0uNWgxYy4yNzUgMCAuNS4yMjUuNS41cy0uMjI1LjUtLjUuNXoiLz4KPC9zdmc+

Set the amphitheatre key to:

Use dark colors for code blocksCopy
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMSAyMSI+CiAgPGNpcmNsZSBjeD0iMTAuNSIgY3k9IjEwLjUiIHI9IjEwLjUiIGZpbGw9IiMwMDc4RDQiLz4KICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNNi4xNSA0YTEuMzUgMS4zNSAwIDEgMSAyLjcgMCAxLjM1IDEuMzUgMCAwIDEtMi43IDB6bTguMzUgMS4zNWExLjM1IDEuMzUgMCAxIDAgMC0yLjcgMS4zNSAxLjM1IDAgMCAwIDAgMi43em0tNC4yMiAxLjQ1MmExLjAzNyAxLjAzNyAwIDAgMC0uOTgtLjgwNGwtMy42MDguMDAxYy0uNDg1LjAwNC0uODg5LjM4OC0uOTcyLjgwM2wtLjU2NCAyLjgxN2MtLjA5Mi40NTktLjE5Ni45MTUtLjI4OCAxLjM3My0uMTMuNjQzLS4yNTUgMS41MzguMzk5IDEuNDkyYS40NDguNDQ4IDAgMCAwIC40MDgtLjM1OWwuODUtNC4yNS42NzQgMS4xMjMtLjk5OSA2SDZ2My41YS41LjUgMCAxIDAgMSAwdi0zLjVoMXYzLjVhLjUuNSAwIDEgMCAxIDB2LTMuNWguOGwtLjk5OS02IC42NzctMS4xMTIuODQ3IDQuMjRjLjA0LjE5Ny4yMDcuMzQ0LjQwOC4zNTguNzgzLjA1NC40NTItMS4xNTguMzAzLTEuOTA1bC0uNDA3LTIuMDM0LS4zNDktMS43NDN6TTE2IDUuOTk4aC0zYy0uNTUgMC0xIC40NS0xIDF2NS41YS41LjUgMCAwIDAgLjUuNWguNXY1LjVhLjUuNSAwIDEgMCAxIDB2LTQuNWgxdjQuNWEuNS41IDAgMSAwIDEgMHYtNS41aC41YS41LjUgMCAwIDAgLjUtLjV2LTUuNWMwLS41NS0uNDUtMS0xLTF6Ii8+Cjwvc3ZnPgo=

Python
Use dark colors for code blocks
  "symbolDictionary": {
    "amphitheatre": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNyAxNyI+CiAgPGNpcmNsZSBjeD0iOC41IiBjeT0iOC41IiByPSI4LjUiIGZpbGw9IiNGMjhDMjgiLz4KICA8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTQuNTggMi45OThzLTEuNDkyIDEuMS0zLjU4IDEuMWMtLjA0IDAtLjA3NC0uMDA2LS4xMTMtLjAwNy4wMzUuNDQ5LjA1OC45NDYuMDU4IDEuNDc3IDAgMS44OC0uMjk4IDQuMDQtLjM2MiA0LjQ4LjEzOC0uMDIuMjY5LS4wNS40MTctLjA1IDIgMCAzIDIgMyAycy0xLjM3NS0xLjEtMy0xLjFjLS4yMDYgMC0uNDA4LjAxOC0uNjAzLjA0OS0uMjY4Ljk3My0uOCAyLjE0LTEuNjg4IDIuOTcxLjUzMy42MTIgMS4yNyAxLjA4IDIuMjkxIDEuMDggMyAwIDMuNTgtNCAzLjU4LTRzLjM2NS0yLjQyMi4zNjUtNC40M2MwLTIuMDUtLjM2NS0zLjU3LS4zNjUtMy41N3ptLTEuMDggNGgtMWEuNTAxLjUwMSAwIDAgMS0uNS0uNWMwLS4yNzUuMjI1LS41LjUtLjVoMWMuMjc1IDAgLjUuMjI1LjUuNXMtLjIyNS41LS41LjV6bS0zLjkyLTVzLTEuNDkyIDEuMS0zLjU4IDEuMS0zLjU4LTEuMS0zLjU4LTEuMS0uMzY1IDEuNTE1LS4zNjUgMy41Ny4zNjUgNC40My4zNjUgNC40My41OCA0IDMuNTggNCAzLjU4LTQgMy41OC00IC4zNjUtMi40MjIuMzY1LTQuNDNjMC0yLjA1LS4zNjUtMy41Ny0uMzY1LTMuNTd6bS02LjA4IDNoMWMuMjc1IDAgLjUuMjI1LjUuNXMtLjIyNS41LS41LjVoLTFhLjUwMS41MDEgMCAwIDEtLjUtLjVjMC0uMjc1LjIyNS0uNS41LS41em0yLjUgNmMtMiAwLTMtMi0zLTJzMS4zNzUgMS4xIDMgMS4xIDMtMS4xIDMtMS4xLTEgMi0zIDJ6bTIuNS01aC0xYS41MDEuNTAxIDAgMCAxLS41LS41YzAtLjI3NS4yMjUtLjUuNS0uNWgxYy4yNzUgMCAuNS4yMjUuNS41cy0uMjI1LjUtLjUuNXoiLz4KPC9zdmc+",
    "bathroom": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMSAyMSI+CiAgPGNpcmNsZSBjeD0iMTAuNSIgY3k9IjEwLjUiIHI9IjEwLjUiIGZpbGw9IiMwMDc4RDQiLz4KICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNNi4xNSA0YTEuMzUgMS4zNSAwIDEgMSAyLjcgMCAxLjM1IDEuMzUgMCAwIDEtMi43IDB6bTguMzUgMS4zNWExLjM1IDEuMzUgMCAxIDAgMC0yLjcgMS4zNSAxLjM1IDAgMCAwIDAgMi43em0tNC4yMiAxLjQ1MmExLjAzNyAxLjAzNyAwIDAgMC0uOTgtLjgwNGwtMy42MDguMDAxYy0uNDg1LjAwNC0uODg5LjM4OC0uOTcyLjgwM2wtLjU2NCAyLjgxN2MtLjA5Mi40NTktLjE5Ni45MTUtLjI4OCAxLjM3My0uMTMuNjQzLS4yNTUgMS41MzguMzk5IDEuNDkyYS40NDguNDQ4IDAgMCAwIC40MDgtLjM1OWwuODUtNC4yNS42NzQgMS4xMjMtLjk5OSA2SDZ2My41YS41LjUgMCAxIDAgMSAwdi0zLjVoMXYzLjVhLjUuNSAwIDEgMCAxIDB2LTMuNWguOGwtLjk5OS02IC42NzctMS4xMTIuODQ3IDQuMjRjLjA0LjE5Ny4yMDcuMzQ0LjQwOC4zNTguNzgzLjA1NC40NTItMS4xNTguMzAzLTEuOTA1bC0uNDA3LTIuMDM0LS4zNDktMS43NDN6TTE2IDUuOTk4aC0zYy0uNTUgMC0xIC40NS0xIDF2NS41YS41LjUgMCAwIDAgLjUuNWguNXY1LjVhLjUuNSAwIDEgMCAxIDB2LTQuNWgxdjQuNWEuNS41IDAgMSAwIDEgMHYtNS41aC41YS41LjUgMCAwIDAgLjUtLjV2LTUuNWMwLS41NS0uNDUtMS0xLTF6Ii8+Cjwvc3ZnPgo="
  }

In the overlay array, create a new point with a custom marker symbol for the amphitheatre.
- Set the type to point
- Set the geometry.x to -104.945388 and geometry.y to 39.8966582.
- Set the geometry.spatialReference.wkid to 4326.
- Set the symbol.customSymbolId to amphitheatre.
- Set the symbol.scale to 1.
Create a new point with a custom marker symbol for the restroom.
- Set the type to point
- Set the geometry.x to -104.9459995 and geometry.y to 39.8974496.
- Set the geometry.spatialReference.wkid to 4326.
- Set the symbol.customSymbolId to restroom.
- Set the symbol.scale to 0.75.

Create another point with a custom marker symbol for the restroom, with geometry.x of -104.9423995 and geometry.y of 39.8968409.

Python
Expand
Use dark colors for code blocks
    { "type": "point","geometry": { "x": -104.9458346,"y": 39.8941225,"spatialReference": { "wkid": 4326 } },"symbol": { "style": "circle","color": "005e95","label": "P","scale": 1 } },
    { "type": "point","geometry": { "x": -104.9423264,"y": 39.8930833,"spatialReference": { "wkid": 4326 } },"symbol": { "style": "circle","color": "005e95","label": "P","scale": 1 } },
    { "type": "point","geometry": { "x": -104.9412564,"y": 39.8971153,"spatialReference": { "wkid": 4326 } },"symbol": { "style": "circle","color": "005e95","label": "P","scale": 1 } },
    { "type": "point","geometry": { "x": -104.944006,"y": 39.8985702,"spatialReference": { "wkid": 4326 } },"symbol": { "style": "circle","color": "005e95","label": "P","scale": 1 } },

    { "type": "point","geometry": { "x": -104.945388,"y": 39.8966582,"spatialReference": { "wkid": 4326 } },"symbol": { "customSymbolId": "amphitheatre","scale": 1 } },
    { "type": "point","geometry": { "x": -104.9459995,"y": 39.8974496,"spatialReference": { "wkid": 4326 } },"symbol": { "customSymbolId": "bathroom","scale": 0.75 } },
    { "type": "point","geometry": { "x": -104.9423995,"y": 39.8968409,"spatialReference": { "wkid": 4326 } },"symbol": { "customSymbolId": "bathroom","scale": 0.75 } },
Expand

Create polylines

In the overlay array, create polylines to represent trails around the community center. The polylines can be styled with different colors, line symbols, and widths to indicate the type of trail.

In the overlay array, create a new polyline that represents a biking trail with solid lines.
- Set the type to polyline.
- Set the geometry.paths to [[[-104.9445212, 39.8967743], [-104.944576, 39.8966819], [-104.9442692, 39.8964801], [-104.9442911, 39.8962699], [-104.9445103, 39.8962447], [-104.944828, 39.8962531], [-104.9452882, 39.8963876], [-104.9457813, 39.8963876], [-104.9458799, 39.8966062], [-104.9460443, 39.8969929], [-104.9463292, 39.897161], [-104.9461977, 39.8965894], [-104.9465264, 39.8962195], [-104.9488932, 39.8957571], [-104.9490685, 39.8958916], [-104.9485426, 39.8964128], [-104.9479618, 39.8966146], [-104.9479399, 39.8967659], [-104.9481371, 39.8969677], [-104.9484439, 39.8971694], [-104.9484768, 39.8975057], [-104.9483125, 39.8976738], [-104.9480166, 39.8978756], [-104.9476002, 39.8978672], [-104.9474359, 39.8978924], [-104.9473811, 39.8982034], [-104.9471839, 39.8985313], [-104.9468332, 39.8986405], [-104.9460991, 39.8985817], [-104.9456827, 39.8984052], [-104.9456827, 39.8981698], [-104.9457156, 39.8978503], [-104.946132, 39.8975057], [-104.9454636, 39.8969929], [-104.9449267, 39.8970938], [-104.9447732, 39.8968164]]].
- Set the geometry.spatialReference.wkid to 4326.
- Set the symbol.style to solid.
- Set the symbol.color to 22981c.
- Set the symbol.width to 2.
Create another polyline that represents a walking trail with dashed lines.
- Set the type to polyline.
- Set the geometry.paths to [[[-104.9419353, 39.896892], [-104.9418476, 39.8967575], [-104.9418476, 39.8965053], [-104.9416285, 39.8964044], [-104.9414094, 39.8962531], [-104.9414094, 39.8960093], [-104.9415299, 39.8956142], [-104.9419024, 39.8955302], [-104.9422531, 39.8957067], [-104.942538, 39.8957067], [-104.9423517, 39.8954377], [-104.9421435, 39.8952107], [-104.9423188, 39.8949837], [-104.9431625, 39.8953704], [-104.9435351, 39.8953788], [-104.944072, 39.8955806], [-104.9444007, 39.8957824], [-104.9449814, 39.8958664], [-104.9456389, 39.8959673], [-104.946121, 39.8958916], [-104.9466031, 39.8953957], [-104.9466469, 39.8950342], [-104.9465922, 39.8948997], [-104.9465264, 39.8947483], [-104.9443788, 39.8943784], [-104.943557, 39.8942019], [-104.9415956, 39.8931679], [-104.9412012, 39.8931174], [-104.9408724, 39.8933276], [-104.9406862, 39.893832], [-104.940741, 39.8940926], [-104.9422202, 39.8949249]]].
- Set the geometry.spatialReference.wkid to 4326.
- Set the symbol.style to dash.
- Set the symbol.color to ff5da3.
- Set the symbol.width to 2.

Your full request should now look like the following.

HTTP

cURL

Use dark colors for code blocksCopy
POST https://static-maps-api.arcgis.com/arcgis/rest/services/static-maps-service/v1/static-maps/arcgis/imagery/with-overlay HTTP/1.1
Host: static-maps-api.arcgis.com
Content-Type: application/json
Authorization: Bearer YOUR_ACCESS_TOKEN
Accept: image/png

{
  "overlay": [
    {
      "type": "polygon",
      "geometry": {
        "rings": [[[-104.9402957,39.8993397],[-104.9496416,39.8992878],[-104.9496416,39.895869],[-104.9508878,39.895869],[-104.9517411,39.8956819],[-104.9526892,39.8951416],[-104.9522693,39.8946116],[-104.9522693,39.8943206],[-104.9523235,39.8938737],[-104.9518494,39.8939049],[-104.9516598,39.894092],[-104.9514973,39.8943414],[-104.9509284,39.8946324],[-104.9507388,39.8948922],[-104.9502918,39.8951727],[-104.950048,39.8952247],[-104.9497635,39.8949233],[-104.9497094,39.8931983],[-104.9495739,39.8928449],[-104.9495468,39.8921902],[-104.9403462,39.8921958],[-104.9402957,39.8993397]]],
        "spatialReference": { "wkid": 4326 }
      },
      "symbol": { "style": "solid","color": "fcef033b","outline": { "style": "solid","color": "fcef03","width": 1 } }
    },
    { "type": "point","geometry": { "x": -104.9458346,"y": 39.8941225,"spatialReference": { "wkid": 4326 } },"symbol": { "style": "circle","color": "005e95","label": "P","scale": 1 } },
    { "type": "point","geometry": { "x": -104.9423264,"y": 39.8930833,"spatialReference": { "wkid": 4326 } },"symbol": { "style": "circle","color": "005e95","label": "P","scale": 1 } },
    { "type": "point","geometry": { "x": -104.9412564,"y": 39.8971153,"spatialReference": { "wkid": 4326 } },"symbol": { "style": "circle","color": "005e95","label": "P","scale": 1 } },
    { "type": "point","geometry": { "x": -104.944006,"y": 39.8985702,"spatialReference": { "wkid": 4326 } },"symbol": { "style": "circle","color": "005e95","label": "P","scale": 1 } },
Expand
Run in Postman

Send the request to generate the static map. You should see a static map centered on Thornton Recreation Center Park with a polygon boundary, points with labels and custom marker symbols, and polylines representing trails.

In the overlay array, create a new polyline that represents a biking trail with solid lines.
- Set the type to polyline.
- Set the geometry.paths to [[[-104.9445212, 39.8967743], [-104.944576, 39.8966819], [-104.9442692, 39.8964801], [-104.9442911, 39.8962699], [-104.9445103, 39.8962447], [-104.944828, 39.8962531], [-104.9452882, 39.8963876], [-104.9457813, 39.8963876], [-104.9458799, 39.8966062], [-104.9460443, 39.8969929], [-104.9463292, 39.897161], [-104.9461977, 39.8965894], [-104.9465264, 39.8962195], [-104.9488932, 39.8957571], [-104.9490685, 39.8958916], [-104.9485426, 39.8964128], [-104.9479618, 39.8966146], [-104.9479399, 39.8967659], [-104.9481371, 39.8969677], [-104.9484439, 39.8971694], [-104.9484768, 39.8975057], [-104.9483125, 39.8976738], [-104.9480166, 39.8978756], [-104.9476002, 39.8978672], [-104.9474359, 39.8978924], [-104.9473811, 39.8982034], [-104.9471839, 39.8985313], [-104.9468332, 39.8986405], [-104.9460991, 39.8985817], [-104.9456827, 39.8984052], [-104.9456827, 39.8981698], [-104.9457156, 39.8978503], [-104.946132, 39.8975057], [-104.9454636, 39.8969929], [-104.9449267, 39.8970938], [-104.9447732, 39.8968164]]].
- Set the geometry.spatialReference.wkid to 4326.
- Set the symbol.style to solid.
- Set the symbol.color to 22981c.
- Set the symbol.width to 2.

Create another polyline that represents a walking trail with dashed lines.

Set the type to polyline.
Set the geometry.paths to [[[-104.9419353, 39.896892], [-104.9418476, 39.8967575], [-104.9418476, 39.8965053], [-104.9416285, 39.8964044], [-104.9414094, 39.8962531], [-104.9414094, 39.8960093], [-104.9415299, 39.8956142], [-104.9419024, 39.8955302], [-104.9422531, 39.8957067], [-104.942538, 39.8957067], [-104.9423517, 39.8954377], [-104.9421435, 39.8952107], [-104.9423188, 39.8949837], [-104.9431625, 39.8953704], [-104.9435351, 39.8953788], [-104.944072, 39.8955806], [-104.9444007, 39.8957824], [-104.9449814, 39.8958664], [-104.9456389, 39.8959673], [-104.946121, 39.8958916], [-104.9466031, 39.8953957], [-104.9466469, 39.8950342], [-104.9465922, 39.8948997], [-104.9465264, 39.8947483], [-104.9443788, 39.8943784], [-104.943557, 39.8942019], [-104.9415956, 39.8931679], [-104.9412012, 39.8931174], [-104.9408724, 39.8933276], [-104.9406862, 39.893832], [-104.940741, 39.8940926], [-104.9422202, 39.8949249]]].
Set the geometry.spatialReference.wkid to 4326.
Set the symbol.style to dash.
Set the symbol.color to ff5da3.
Set the symbol.width to 2.

HTML/JavaScript
Expand
Use dark colors for code blocks
          {
            type: "polyline",
            geometry: {
              paths: [
                [
                  [-104.9445212, 39.8967743],
                  [-104.944576, 39.8966819],
                  [-104.9442692, 39.8964801],
                  [-104.9442911, 39.8962699],
                  [-104.9445103, 39.8962447],
                  [-104.944828, 39.8962531],
                  [-104.9452882, 39.8963876],
                  [-104.9457813, 39.8963876],
                  [-104.9458799, 39.8966062],
                  [-104.9460443, 39.8969929],
                  [-104.9463292, 39.897161],
                  [-104.9461977, 39.8965894],
                  [-104.9465264, 39.8962195],
                  [-104.9488932, 39.8957571],
                  [-104.9490685, 39.8958916],
                  [-104.9485426, 39.8964128],
                  [-104.9479618, 39.8966146],
                  [-104.9479399, 39.8967659],
                  [-104.9481371, 39.8969677],
                  [-104.9484439, 39.8971694],
                  [-104.9484768, 39.8975057],
                  [-104.9483125, 39.8976738],
                  [-104.9480166, 39.8978756],
                  [-104.9476002, 39.8978672],
                  [-104.9474359, 39.8978924],
                  [-104.9473811, 39.8982034],
                  [-104.9471839, 39.8985313],
                  [-104.9468332, 39.8986405],
                  [-104.9460991, 39.8985817],
                  [-104.9456827, 39.8984052],
                  [-104.9456827, 39.8981698],
                  [-104.9457156, 39.8978503],
                  [-104.946132, 39.8975057],
                  [-104.9454636, 39.8969929],
                  [-104.9449267, 39.8970938],
                  [-104.9447732, 39.8968164],
                ],
              ],
              spatialReference: { wkid: 4326 },
            },
            symbol: {
              style: "solid",
              color: "04ff00",
              width: 2,
            },
          },
          {
            type: "polyline",
            geometry: {
              paths: [
                [
                  [-104.9419353, 39.896892],
                  [-104.9418476, 39.8967575],
                  [-104.9418476, 39.8965053],
                  [-104.9416285, 39.8964044],
                  [-104.9414094, 39.8962531],
                  [-104.9414094, 39.8960093],
                  [-104.9415299, 39.8956142],
                  [-104.9419024, 39.8955302],
                  [-104.9422531, 39.8957067],
                  [-104.942538, 39.8957067],
                  [-104.9423517, 39.8954377],
                  [-104.9421435, 39.8952107],
                  [-104.9423188, 39.8949837],
                  [-104.9431625, 39.8953704],
                  [-104.9435351, 39.8953788],
                  [-104.944072, 39.8955806],
                  [-104.9444007, 39.8957824],
                  [-104.9449814, 39.8958664],
                  [-104.9456389, 39.8959673],
                  [-104.946121, 39.8958916],
                  [-104.9466031, 39.8953957],
                  [-104.9466469, 39.8950342],
                  [-104.9465922, 39.8948997],
                  [-104.9465264, 39.8947483],
                  [-104.9443788, 39.8943784],
                  [-104.943557, 39.8942019],
                  [-104.9415956, 39.8931679],
                  [-104.9412012, 39.8931174],
                  [-104.9408724, 39.8933276],
                  [-104.9406862, 39.893832],
                  [-104.940741, 39.8940926],
                  [-104.9422202, 39.8949249],
                ],
              ],
              spatialReference: { wkid: 4326 },
            },
            symbol: {
              style: "dash",
              color: "ff5da3",
              width: 2,
            },
          },
Expand

Run the app or .
You should see a static map centered on Thornton Recreation Center Park with a polygon boundary, points with labels and custom marker symbols, and polylines representing trails.

In the overlay array, create a new polyline that represents a biking trail with solid lines.
- Set the type to polyline.
- Set the geometry.paths to [[[-104.9445212, 39.8967743], [-104.944576, 39.8966819], [-104.9442692, 39.8964801], [-104.9442911, 39.8962699], [-104.9445103, 39.8962447], [-104.944828, 39.8962531], [-104.9452882, 39.8963876], [-104.9457813, 39.8963876], [-104.9458799, 39.8966062], [-104.9460443, 39.8969929], [-104.9463292, 39.897161], [-104.9461977, 39.8965894], [-104.9465264, 39.8962195], [-104.9488932, 39.8957571], [-104.9490685, 39.8958916], [-104.9485426, 39.8964128], [-104.9479618, 39.8966146], [-104.9479399, 39.8967659], [-104.9481371, 39.8969677], [-104.9484439, 39.8971694], [-104.9484768, 39.8975057], [-104.9483125, 39.8976738], [-104.9480166, 39.8978756], [-104.9476002, 39.8978672], [-104.9474359, 39.8978924], [-104.9473811, 39.8982034], [-104.9471839, 39.8985313], [-104.9468332, 39.8986405], [-104.9460991, 39.8985817], [-104.9456827, 39.8984052], [-104.9456827, 39.8981698], [-104.9457156, 39.8978503], [-104.946132, 39.8975057], [-104.9454636, 39.8969929], [-104.9449267, 39.8970938], [-104.9447732, 39.8968164]]].
- Set the geometry.spatialReference.wkid to 4326.
- Set the symbol.style to solid.
- Set the symbol.color to 22981c.
- Set the symbol.width to 2.

Create another polyline that represents a walking trail with dashed lines.

Set the type to polyline.
Set the geometry.paths to [[[-104.9419353, 39.896892], [-104.9418476, 39.8967575], [-104.9418476, 39.8965053], [-104.9416285, 39.8964044], [-104.9414094, 39.8962531], [-104.9414094, 39.8960093], [-104.9415299, 39.8956142], [-104.9419024, 39.8955302], [-104.9422531, 39.8957067], [-104.942538, 39.8957067], [-104.9423517, 39.8954377], [-104.9421435, 39.8952107], [-104.9423188, 39.8949837], [-104.9431625, 39.8953704], [-104.9435351, 39.8953788], [-104.944072, 39.8955806], [-104.9444007, 39.8957824], [-104.9449814, 39.8958664], [-104.9456389, 39.8959673], [-104.946121, 39.8958916], [-104.9466031, 39.8953957], [-104.9466469, 39.8950342], [-104.9465922, 39.8948997], [-104.9465264, 39.8947483], [-104.9443788, 39.8943784], [-104.943557, 39.8942019], [-104.9415956, 39.8931679], [-104.9412012, 39.8931174], [-104.9408724, 39.8933276], [-104.9406862, 39.893832], [-104.940741, 39.8940926], [-104.9422202, 39.8949249]]].
Set the geometry.spatialReference.wkid to 4326.
Set the symbol.style to dash.
Set the symbol.color to ff5da3.
Set the symbol.width to 2.

Python
Expand
Use dark colors for code blocks
    { "type": "polyline","geometry": { "paths": [[[-104.9445212,39.8967743],[-104.944576,39.8966819],[-104.9442692,39.8964801],[-104.9442911,39.8962699],[-104.9445103,39.8962447],[-104.944828,39.8962531],[-104.9452882,39.8963876],[-104.9457813,39.8963876],[-104.9458799,39.8966062],[-104.9460443,39.8969929],[-104.9463292,39.897161],[-104.9461977,39.8965894],[-104.9465264,39.8962195],[-104.9488932,39.8957571],[-104.9490685,39.8958916],[-104.9485426,39.8964128],[-104.9479618,39.8966146],[-104.9479399,39.8967659],[-104.9481371,39.8969677],[-104.9484439,39.8971694],[-104.9484768,39.8975057],[-104.9483125,39.8976738],[-104.9480166,39.8978756],[-104.9476002,39.8978672],[-104.9474359,39.8978924],[-104.9473811,39.8982034],[-104.9471839,39.8985313],[-104.9468332,39.8986405],[-104.9460991,39.8985817],[-104.9456827,39.8984052],[-104.9456827,39.8981698],[-104.9457156,39.8978503],[-104.946132,39.8975057],[-104.9454636,39.8969929],[-104.9449267,39.8970938],[-104.9447732,39.8968164]]],"spatialReference": { "wkid": 4326 } },"symbol": { "style": "solid","color": "04ff00","width": 2 } },
    { "type": "polyline","geometry": { "paths": [[[-104.9419353,39.896892],[-104.9418476,39.8967575],[-104.9418476,39.8965053],[-104.9416285,39.8964044],[-104.9414094,39.8962531],[-104.9414094,39.8960093],[-104.9415299,39.8956142],[-104.9419024,39.8955302],[-104.9422531,39.8957067],[-104.942538,39.8957067],[-104.9423517,39.8954377],[-104.9421435,39.8952107],[-104.9423188,39.8949837],[-104.9431625,39.8953704],[-104.9435351,39.8953788],[-104.944072,39.8955806],[-104.9444007,39.8957824],[-104.9449814,39.8958664],[-104.9456389,39.8959673],[-104.946121,39.8958916],[-104.9466031,39.8953957],[-104.9466469,39.8950342],[-104.9465922,39.8948997],[-104.9465264,39.8947483],[-104.9443788,39.8943784],[-104.943557,39.8942019],[-104.9415956,39.8931679],[-104.9412012,39.8931174],[-104.9408724,39.8933276],[-104.9406862,39.893832],[-104.940741,39.8940926],[-104.9422202,39.8949249]]],"spatialReference": { "wkid": 4326 } },"symbol": { "style": "dash","color": "ff5da3","width": 2 } }
Expand

Send the request to generate the static map.

Python
Expand
Use dark colors for code blocks
response = requests.post(url,headers=headers,json=json_body)

if response.status_code == 200:
  img = Image.open(BytesIO(response.content))
  img.show()
else:
  print("Request failed:",response.text)

You should see a static map centered on Thornton Recreation Center Park with a polygon boundary, points with labels and custom marker symbols, and polylines representing trails.

What's next

Display a simple static map

Display a static map with a point, polyline, or polygon.

REST API Python JavaScript (Node)HTML