Display a basemap style (2 of 3) | MapLibre GL JS

Use the MapLibre ArcGIS plugin to display the arcgis/streets basemap style.

Prerequisites

You need an ArcGIS Location Platform or ArcGIS Online account.
You need to complete Step 1. Create an API key.

Steps

Create a new app

Create a new CodePen app with a map div that is the full width and height of the browser window.

Go to CodePen and create a new pen for your application.

In CodePen > HTML, add HTML and CSS to create a page with a div element called map.

Use dark colors for code blocks
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>MapLibre ArcGIS</title>
    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }

    </style>

  </head>

  <body>
    <div id="map"></div>

  </body>

</html>

Add script references

Reference the MapLibre GL JS library and the MapLibre ArcGIS plugin.

In the HTML <head>, add the following <link> and <script> references.

Use dark colors for code blocks
    <!-- Load MapLibre GL JS from CDN -->
    <script src="https://unpkg.com/maplibre-gl@5.23.0/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@5.23.0/dist/maplibre-gl.css" rel="stylesheet">
    <!-- Load MapLibre ArcGIS from CDN -->
    <script src="https://unpkg.com/@esri/maplibre-arcgis@1.1.0/dist/umd/maplibre-arcgis.min.js"></script>

Set the access token

Add a <script> element in the HTML <body> and create an accessToken variable to store the 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. Set YOUR_ACCESS_TOKEN with the access token you previously copied.
Expand
Use dark colors for code blocks
```
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
    <script>

    /* Use for API key authentication */
    const accessToken = "YOUR_ACCESS_TOKEN";

    </script>
```
Expand

Create a map

Create a map to display an ArcGIS basemap style centered on San Francisco, California. Use the MapLibre ArcGIS plugin to access the basemap style.

Create a Map that centers on San Francisco, California.

Expand
Use dark colors for code blocks
    const map = new maplibregl.Map({
      container: "map", // the id of the div element
      center: [-122.402, 37.789], // San Francisco, CA
      zoom: 11 // starting zoom
    });
Expand

Use the plugin to create and apply a new BasemapStyle to the map. The plugin will also automatically apply Esri and data attribution.

Expand
Use dark colors for code blocks
    const basemapStyle = maplibreArcGIS.BasemapStyle.applyStyle(map, {
      style: "arcgis/streets",
      token: accessToken
    });
Expand

Run the app

Run the app.

The map should display the arcgis/streets style from the Basemap Styles service.