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

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

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

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.