Create and style vector tiles (6 of 7)

Use the MapLibre ArcGIS plugin to display your vector tile layer.

Display a vector tile layer of U.S. states on a map.

Prerequisites

You need an ArcGIS Location Platform or ArcGIS Online account.
You need to complete Step 5. 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',
      zoom: 3,
      center: [-100, 40]
    });
Expand

Use the plugin to apply a BasemapStyle to the map.

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

Add a vector tile layer

To add the vector tile layer to your map, use the MapLibre ArcGIS plugin.

Create an event handler that runs only once when the map has finished loading.

Expand
Use dark colors for code blocks
    map.on('load', async () => {

    });
Expand

Inside the event handler, use the plugin to create a new VectorTileLayer object that references the item ID of the vector tile layer you copied earlier, then add it to the map.

Expand
Use dark colors for code blocks
    map.on('load', async () => {

      const vectorLayer = await maplibreArcGIS.VectorTileLayer.fromPortalItem('31eb749371c441e0b3ac5db4f60ecba9', {
        token: accessToken
      });

      vectorLayer.addSourcesAndLayersTo(map);

    });
Expand

Run the app

Run the app.

The map should display the hosted vector tile layer with the styles you applied.

Create and style vector tiles (6 of 7)

Get started

1. Import GeoJSON

2. Style feature data

3. Publish vector tiles

4. Style vector tiles

5. Create an API key

6. Add vector tiles

7. Add interactivity