Skip to content

1. Sign up for an account

Create an account to generate developer credentials, access development tools, and monitor usage of ArcGIS services.

2. Get an access token

To access ArcGIS resources and services, you'll need an access token. The easiest way is to use API key authentication.

Learn more about the types of authentication and access tokens.

3. Display your first map

This example displays the arcgis/outdoor style from the ArcGIS Basemap Styles service.

  1. Open the code in or your preferred editor.
  2. Replace YOUR_ACCESS_TOKEN with your access token.

For detailed step-by-step instructions, go to the Display a map tutorial.

Expand
Use dark colors for code blocksCopy
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
    <script>

      const map = new ol.Map({ target: "map" });

      map.setView(
        new ol.View({
          center: ol.proj.fromLonLat([-25, 25]), // Starting location [longitude, latitude]
          zoom: 2
        })
      );

      const accessToken = "YOUR_ACCESS_TOKEN";

      const basemapId = "arcgis/outdoor"; // arcgis/navigation, arcgis/imagery, open/osm-style, etc.

      const basemapURL = `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapId}?token=${accessToken}`;

      olms.apply(map, basemapURL).then(() => {
        // Add Esri attribution
        // Learn more in https://esriurl.com/attribution
        const source = map.getLayers().item(0).getSource();
        const poweredByEsriString = "Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a> | ";

        const attributionFn = source.getAttributions();
        if (attributionFn) {
          source.setAttributions((ViewStateLayerStateExtent) => {
            return [poweredByEsriString, ...attributionFn(ViewStateLayerStateExtent)];
          });
        } else source.setAttributions(poweredByEsriString);
      });

    </script>

4. What's next?

Learn more about displaying maps, hosting your data as services, and accessing additional ArcGIS service functionality.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.