Get started

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.

Create an API key

Create an API key credential to get an access token.

Learn more about the types of authentication and access tokens.

3. Display your first map

To display a map, use MapLibre GL JS with the MapLibre ArcGIS plugin. The plugin makes it easy to access the ArcGIS Basemap Styles service and use all of the ArcGIS basemap styles and Open basemap styles available.

This example uses the arcgis/outdoor style with and references CDN libraries. To use NPM instead, go to Install and setup.

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

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

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
    <script>

      const accessToken = "YOUR_ACCESS_TOKEN";

      const map = new maplibregl.Map({
        container: "map", // Div element ID
        zoom: 1,
        center: [-20, 30] // [longitude, latitude]
      });

      // Display a style with the MapLibre ArcGIS plugin
      const basemapStyle = maplibreArcGIS.BasemapStyle.applyStyle(map, {
        style: "arcgis/outdoor", // arcgis/navigation, arcgis/imagery, open/osm-style, etc.
        token: accessToken
      });

    </script>

4. What's next?

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