Display a map
Learn how to display a map with a basemap layer using MapLibre GL JS.
You can display a map in MapLibre GL JS by using a vector tile basemap layer from the basemap styles service. A vector tile basemap layer is a MapLibre GL style containing a source, layers, font glyphs, and icons to render the layers.
In this tutorial, you display a map of the Santa Monica Mountains using the streets basemap layer from the Basemap styles service.
This tutorial is the starting point for the other MapLibre tutorials.
Prerequisites
You need an ArcGIS Developer or ArcGIS Online account to access the developer dashboard and create an API key.
Steps
Create a new pen
- Go to CodePen to create a new pen for your mapping application.
Add HTML
Define an HTML page to create a map that is the full width and height of the browser window.
In CodePen > HTML, add HTML and CSS to create a page with a div element called
map
.Use dark colors for code blocks Copy
Reference the API
In the
<head>
tag, add references to the MapLibre GL JS CSS and JS library.Use dark colors for code blocks Add line. Add line.
Get an API key
To access location services, you need an API key or OAuth 2.0 access token. To learn how to create and scope your key, visit the Create an API key tutorial.
- Go to your dashboard to get your API key. You will use it in the next step.
Create a map
Use a Map
to add a map to your div with the basemap you specify.
Add a
<script>
section at the end of the...</script> <body>
section....</body> Use dark colors for code blocks Add line. Add line. Add line. Create an
api
variable to store your API key. ReplaceKey YOUR_
with the API key you previously copied from the developer dashboard. You will need to include this in the URL of each ArcGIS service you are accessing. You do not need to setAPI_ KEY mapboxgl.access
. Create aToken basemap
variable to store the basemap identifier,Enum ArcGIS:
.Streets Use dark colors for code blocks Add line. Add line. Create a
Map
with options to control its display and behavior. Set thecontainer
property to themap
id of the div you created. Thestyle
property references the location of the basemap styles service and contains the basemap identifier and your API key.Use dark colors for code blocks Add line. Add line. Add line. Add line. Add line. Add line.
Run the app
In CodePen, run your code to display the map.
The map should display the topographic basemap layer for an area of the Santa Monica Mountains in California.
What's next?
Learn how to use additional ArcGIS location services in these tutorials:

Change the basemap style
Switch a basemap style in a map.

Change the place label language
Switch the language of place labels on a basemap.

Display a custom vector tile style
Add a styled vector basemap layer to a map.

Search for an address
Find an address or place using a search box and the geocoding service.

Find a route and directions
Find a route and directions with the route service.