Display a basemap style (2 of 3)

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>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>MapLibre GL JS</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.9.0/dist/maplibre-gl.js></script>
  <link href=https://unpkg.com/maplibre-gl@5.9.0/dist/maplibre-gl.css rel="stylesheet" />
  <!-- Load MapLibre ArcGIS from CDN -->
  <script src="https://unpkg.com/@esri/maplibre-arcgis@1.0.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 token. Set YOUR_ACCESS_TOKEN with the access token you previously copied.

Expand
Use dark colors for code blocks
  <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.

Display a basemap style (2 of 3)

Get started

1. Create an API key

2. Display a basemap style

3. Set style preferences