Display a map

Learn how to use to display a .

Display a map using API key authentication

A map contains of geographic data. A map contains a and, optionally, one or more . You can display a specific area of a map by using a and setting the and .

In this tutorial you will use OpenLayers to display a of the Santa Monica Mountains in California using the Outdoor .

This tutorial is the starting point for the other OpenLayers 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
    68
    69
    70
    71
    72
    73
    74
    75
    <html>
    
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
      <title>OpenLayers 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
    68
    69
    70
    71
    72
    73
    74
    75
      <script>
    
        /* Use for API key authentication */
        const accessToken = "YOUR_ACCESS_TOKEN";
    
      </script>
    
    Expand

Add script references

You will need add <script> and <link> tags to load the JavaScript and CSS files for OpenLayers and ol-mapbox-style.

  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
    68
    69
    70
    71
    72
    73
    74
    75
      <style>
        html,
        body,
        #map {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 14px;
          color: #323232;
        }
      </style>
    
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.4.0/ol.css" type="text/css" />
      <script src="https://cdn.jsdelivr.net/npm/ol@v10.4.0/dist/ol.js"></script>
    
      <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@12.3.5/dist/olms.js"></script>
    

Create a map and view

Use the Map and View classes to create an OpenLayers map.

  1. Use the Map class to create the map with options to control its display and behavior. Set the target property to "map", which is the id of the div element.

    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
    68
    69
    70
    71
    72
    73
    74
    75
        const map = new ol.Map({ target: "map" });
    
    Expand
  2. Create a View, and use setView to apply it to the map. To center the map view, set the center property to -118.80500,34.02700 and the zoom property to 13.

    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
    68
    69
    70
    71
    72
    73
    74
    75
        map.setView(
          new ol.View({
            center: ol.proj.fromLonLat([-118.805, 34.027]),
            zoom: 12
          })
        );
    
    Expand

Add the basemap layer

OpenLayers does not directly support a vector basemap or a vector style file, so you will use the openlayers-mapbox-style (olms) JavaScript library to load a Mapbox style from the Basemap styles service and render it with OpenLayers.

  1. Create a basemapId variable and set it to arcgis/outdoor.

    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
    68
    69
    70
    71
    72
    73
    74
    75
        const basemapId = "arcgis/outdoor";
    
    
    Expand
  2. Construct the basemap URL based on basemapId 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
    68
    69
    70
    71
    72
    73
    74
    75
        const basemapId = "arcgis/outdoor";
    
        const basemapURL = `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapId}?token=${accessToken}`;
    
    
    Expand
  3. Use olms to apply the basemap style to your map. The olms function takes two inputs, the map element and the URL for a basemap layer.

    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
    68
    69
    70
    71
    72
    73
    74
    75
        const basemapId = "arcgis/outdoor";
    
        const basemapURL = `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapId}?token=${accessToken}`;
    
        olms.apply(map, basemapURL)
    
          });
    
    Expand

Add attribution

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

  1. Add a load event handler to the olms function call. Inside, Use setAttributions on the basemap source to add Powered by Esri to the map's attribution.

    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
    68
    69
    70
    71
    72
    73
    74
    75
        const basemapId = "arcgis/outdoor";
    
        const basemapURL = `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapId}?token=${accessToken}`;
    
        olms.apply(map, basemapURL)
    
          .then(() => {
            // Add Esri attribution
            // Learn more in https://esriurl.com/attribution
            const source = map.getLayers().item(0).getSource();
            source.setAttributions("Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a> | ")
    
          });
    
    Expand

Run the app

Run the app.

The map should display the streets for an area of the Santa Monica Mountains in California. Pan and zoom to explore the map.

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

Supported

Supported

Not supported. Learn more