Esri and data attribution

This topic covers the Esri attribution and data attribution requirements for applications that display a 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.

Esri attribution

Esri attributionEsri attribution is the requirement to display "Powered by Esri" text in all applications that use Esri technology including ArcGIS Maps SDKs, APIs, content, or services.Learn more is the requirement to display the Powered by Esri text on or near the static map. This text is automatically embedded in static maps from the ArcGIS Static Maps service; otherwise must be added manually.

Display requirements

Requirements

• If it is not possible to show the full Powered by Esri text due to the size of the image or UI constraints, at minimum the word Esri must be shown, whether as part of data attribution or standalone.
• The text must not be covered or obstructed by other UI elements.
• The text must be easily discoverable.

Recommendations

• Position text at the bottom-right of the application.
• Use Esri's data attribution design:
  • Font family: "Avenir Next W00","Helvetica Neue", Helvetica,Arial,sans-serif;
  • Font color: #323232 (100% opacity)
  • Background color: #ffffff (65% opacity)

Examples

The following are acceptable examples of displaying Esri attribution in applications that contain a static map image from the ArcGIS Static Maps service.

Default (attribution=auto)	No attribution (attribution=none)

Data attribution

Display requirements

Data attributionData attribution is the requirement to display the names of data source providers in all applications when accessing ArcGIS content, layers, or services.Learn more is the requirement to display the names of all data source providers of an ArcGIS basemap on or near the static map. This is automatically embedded in static maps from the ArcGIS Static Maps service; however, if attribution=none is specified, data attribution must be retrieved and added manually according to the following display requirements.

Requirements

• Display names near the map, within an accessible UI, or in another accessible location within the application, such as a Credits/Attribution page, legal section, or footer text.
• Provide an expandable UI to display all names when they can not be displayed on small screens.
• Do not obstruct names with other logo or visual elements.
• Frequently verify names as data source providers can change.

Recommendations

• Position names at the bottom of the map when possible.
• Prefix names with Sources: Name A, Name B... or Images on this application are sourced from Name A, Name B....
• Use fonts and colors that meet accessibility guidelines.
• Use Esri's data attribution design:
  • Font family: "Avenir Next W00","Helvetica Neue", Helvetica,Arial,sans-serif;
  • Font color: #323232 (100% opacity)
  • Background color: #ffffff (65% opacity)
  • Font size: 12px or larger.

Below is an example of a string with multiple data source names:

Sources: Esri, TomTom, Garmin, FAO, NOAA, USGS, © OpenStreetMap contributors, and the GIS User Community

Get attribution from the service

The steps to get data attribution text from the ArcGIS Static Maps service are:

1. Make a request to the /attribution endpoint of the ArcGIS Static Maps service.
2. Display the retrieved attribution text on your application following the requirements above.

Below is an example of how to get the data attribution from the Static Maps service:

1
2
curl -X GET "https://static-maps-api.arcgis.com/arcgis/rest/services/static-maps-service/v1/static-maps/arcgis/navigation/attribution?token=<ACCESS_TOKEN>" \
  -H 'Accept: application/json'

Examples

The following are acceptable examples of displaying data attribution associated with a static map:

Default (Light)	Dark

Below the map	Collapsed/Expanded

Website footer

Code examples

The following examples show how to correctly display both Esri attribution and data attribution. The steps required depend on the API you are using.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
    <script>
      const basemapStyle = "arcgis/imagery";
      const accessToken = "YOUR_ACCESS_TOKEN";

      const lat = 34.0567;
      const lon = -117.1956;

      const img = document.getElementById("mapImage");

      fetch(
        `https://static-maps-api.arcgis.com/arcgis/rest/services/static-maps-service/v1/static-maps/${basemapStyle}/with-point?x=${lon}&y=${lat}&symbolStyle=pin&width=700&height=300`,
        {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        }
      )
        .then((response) => response.blob())
        .then((blob) => {
          img.src = URL.createObjectURL(blob);
        });
    </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
    <script>
      const basemapStyle = "arcgis/imagery";
      const accessToken = "YOUR_ACCESS_TOKEN";
      const attributionDiv = document.getElementById("attribution");
      const lat = 34.0567;
      const lon = -117.1956;

      fetch(
        `https://static-maps-api.arcgis.com/arcgis/rest/services/static-maps-service/v1/static-maps/${basemapStyle}/with-point?x=${lon}&y=${lat}&symbolStyle=pin&width=700&height=300&attribution=none`,
        {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        }
      )
        .then((response) => response.blob())
        .then((blob) => {
          document.getElementById("mapImage").src = URL.createObjectURL(blob);
        });

      async function loadAttribution() {
        const res = await fetch(
          `https://static-maps-api.arcgis.com/arcgis/rest/services/static-maps-service/v1/static-maps/${basemapStyle}/attribution?token=${accessToken}`
        );
        const data = await res.json();

        attributionDiv.innerHTML = data.attribution;
        attributionDiv.style.display = "block";
      }

      loadAttribution();
    </script>

Resources