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> <linkand> <scriptreferences.> Use dark colors for code blocks <!-- Load MapLibre GL JS from CDN --> <script src="https://unpkg.com/maplibre-gl@5.15.0/dist/maplibre-gl.js"></script> <link href="https://unpkg.com/maplibre-gl@5.15.0/dist/maplibre-gl.css" rel="stylesheet"> <!-- Load MapLibre ArcGIS from CDN --> <script src="https://unpkg.com/@esri/maplibre-arcgis@1.0.1/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", // the id of the div element center: [-122.402, 37.789], // San Francisco, CA zoom: 11 // starting zoom }); -
Use the plugin to create and apply a new
Basemapto the map. The plugin will also automatically apply Esri and data attribution.Style Use dark colors for code blocks const basemapStyle = maplibreArcGIS.BasemapStyle.applyStyle(map, { style: "arcgis/streets", token: accessToken });
Run the app
Run the app.
The map should display thearcgis/streets style from the Basemap Styles service.