Use the MapLibre ArcGIS plugin to display your vector tile layer.
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 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> <linkand> <scriptreferences.> Use dark colors for code blocks <!-- Load MapLibre GL JS from CDN --> <script src="https://unpkg.com/maplibre-gl@5.10.0/dist/maplibre-gl.js"></script> <link href="https://unpkg.com/maplibre-gl@5.10.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
<scriptelement in the HTML> <bodyand create an> accessvariable to store the access token. SetToken YOURwith the access token you previously copied._ACCESS _TOKEN Use dark colors for code blocks <script> /* Use for API key authentication */ const accessToken = "YOUR_ACCESS_TOKEN"; </script>
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
Mapthat centers on San Francisco, California.Use dark colors for code blocks const map = new maplibregl.Map({ container: "map", zoom: 3, center: [-100, 40] }); -
Use the plugin to apply a
Basemapto the map.Style Use dark colors for code blocks const basemapStyle = maplibreArcGIS.BasemapStyle.applyStyle(map, { style: "arcgis/light-gray", token: accessToken });
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.
Use dark colors for code blocks map.on("load", async () => { }); -
Inside the event handler, use the plugin to create a new
Vectorobject that references the item ID of the vector tile layer you copied earlier, then add it to the map.Tile Layer Use dark colors for code blocks map.on("load", async () => { const vectorLayer = await maplibreArcGIS.VectorTileLayer.fromPortalItem("31eb749371c441e0b3ac5db4f60ecba9", { token: accessToken }); vectorLayer.addSourcesAndLayersTo(map); });
Run the app
Run the app.
The map should display the hosted vector tile layer with the styles you applied.