Display a map

Learn how to use MapLibre GL JS to display a .

Display a map using API key authentication

You can display a map in MapLibre GL JS by using a from the . A vector tile basemap layer is a MapLibre GL style containing a , , 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

Steps

Create a new app

Select a type of authentication below and follow the steps to create a new application.

Create a new CodePen app with a map div that is the full width and height of the browser window.

  1. Go to CodePen and create a new pen for your application.

  2. In CodePen > HTML, add HTML and CSS to create a page with a div element called map.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    <!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 Tutorials: Display a map</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>

Set up authentication

Create in your for the type of authentication you selected.

Create a new with the correct privileges to access the resources used in this tutorial.

  1. Go to the Create an API key tutorial and create an with the following :
    • Privileges
      • Location services > Basemaps
  2. Copy the API key access token to your clipboard when prompted.

Set developer credentials

Use the API key or OAuth created in the previous step in your application.

  1. Add <script> elements in the HTML <body> and create an accessToken variable to store your . Set YOUR_ACCESS_TOKEN with the access token you previously copied from your .

    Expand
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
      <script>
    
        /* Use for API key authentication */
        const accessToken = "YOUR_ACCESS_TOKEN"
    
      </script>
    
    Expand

Add script references

  1. In the index.html file, add the following <link> and <script> references if they are missing.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
      <meta charset="utf-8" />
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
      <title>MapLibre GL JS Tutorials: Display a map</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>
    
      <script src=https://unpkg.com/maplibre-gl@5.1.0/dist/maplibre-gl.js></script>
      <link href=https://unpkg.com/maplibre-gl@5.1.0/dist/maplibre-gl.css rel="stylesheet" />
    

Create a map

Use a Map to add a map to your div with the basemap you specify.

  1. Create a basemapEnum variable to store the basemap identifier, arcgis/streets.

    Expand
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
      <script>
    
        /* Use for API key authentication */
        const accessToken = "YOUR_ACCESS_TOKEN"
    
        // or
    
        /* Use for user authentication */
        // const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({
        //   clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
        //   redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials
        //   portal: "https://www.arcgis.com/sharing/rest" // Your portal URL
        // })
    
        // const accessToken = session.token;
    
        const basemapEnum = "arcgis/streets";
    
      </script>
    
    Expand
  2. Create a Map with options to control its display and behavior. Set the container property to the map id of the div you created. The style property references the location of the and contains the basemap identifier and your API key.

    Expand
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
      <script>
    
        /* Use for API key authentication */
        const accessToken = "YOUR_ACCESS_TOKEN"
    
        // or
    
        /* Use for user authentication */
        // const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({
        //   clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
        //   redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials
        //   portal: "https://www.arcgis.com/sharing/rest" // Your portal URL
        // })
    
        // const accessToken = session.token;
    
        const basemapEnum = "arcgis/streets";
    
        const map = new maplibregl.Map({
          container: "map", // the id of the div element
          style: `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapEnum}?token=${accessToken}`,
          zoom: 12, // starting zoom
          center: [-118.805, 34.027] // starting location [longitude, latitude]
        });
    
      </script>
    
    Expand

Add attribution

You need to display and data attribution in all applications that use Esri technology. MapLibre GL JS displays data attribution automatically for the , however, you need to take additional steps to display ("Powered by Esri").

  1. Use the customAttribution option to include the Powered by Esri string in the map's attribution control.

    Expand
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
      <script>
    
        /* Use for API key authentication */
        const accessToken = "YOUR_ACCESS_TOKEN"
    
        // or
    
        /* Use for user authentication */
        // const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({
        //   clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
        //   redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials
        //   portal: "https://www.arcgis.com/sharing/rest" // Your portal URL
        // })
    
        // const accessToken = session.token;
    
        const basemapEnum = "arcgis/streets";
    
        const map = new maplibregl.Map({
          container: "map", // the id of the div element
          style: `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapEnum}?token=${accessToken}`,
          zoom: 12, // starting zoom
          center: [-118.805, 34.027] // starting location [longitude, latitude]
        });
    
        // Add Esri attribution
        // Learn more in https://esriurl.com/attribution
        map._controls[0].options.customAttribution += " | Powered by Esri "
        map._controls[0]._updateAttributions()
    
      </script>
    
    Expand

Run the app

Run the app.

The map should display the streets for an area of the Santa Monica Mountains in California.

What's next?

Learn how to use additional ArcGIS location services in these tutorials:

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close