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

Use the MapLibre ArcGIS plugin to display the custom basemap style.

Display a custom basemap style created using the ArcGIS Vector Tile Style Editor.

Prerequisites

You need an ArcGIS Location Platform or ArcGIS Online account.
You need to complete Step 2. 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.11.0/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@5.11.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

Display the custom style

Create a map to display the custom basemap style centered on Miami, Florida. Use the MapLibre ArcGIS plugin to access the style by referencing its item ID.

Create a Map that centers on Miami, Florida.

Expand
Use dark colors for code blocks
    const map = new maplibregl.Map({
      container: "map", // the id of the div element
      zoom: 14, // starting zoom
      center: [-80.194, 25.774] // starting location [longitude, latitude]
    });

Expand

Use the plugin to apply a BasemapStyle to the map. Set the style with the item ID previously copied. The plugin will automatically apply Esri and data attribution.

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

Run the app

Run the app.

The map should display the Major Transportation Routes custom basemap style created using ArcGIS Vector Tile Style Editor.

Congratulations!

You have completed the Display a custom basemap style how-to. The application uses the MapLibre ArcGIS plugin and an access token to display your custom basemap style. The access token has privileges to access your custom basemap style. The style emphasizes train transportation features at high zoom levels near cities.

What's next?

Style a feature layer

Use data-driven styling to apply symbol colors and styles to feature layers.

Search with autosuggest

Search for addresses with partial text using autosuggest.

Find a route and directions

Find a route and directions from a start and finish location.

To explore additional ArcGIS capabilities, go to Tutorials.