Add two basemap layers

This sample demonstrates how to add two separate basemap layers to a map. Common basemap combinations such as ArcGIS:Imagery, an imagery layer with labels, are available from the basemap styles service.

In Esri Leaflet Vector, basemaps are added to panes via the following method:

  • Basemap enums ending in :Labels or /labels, such as ArcGIS:Imagery:Labels, are added to the esri-labels pane.
  • Basemap enums ending in :Detail or /detail, such as arcgis/human-geography/detail, are added to the esri-detail pane.
  • Basemaps are added to the tilePane by default.

To learn more, go to the API reference.

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
<html>
  <head>
    <meta charset="utf-8" />
    <title>Add two basemap layers</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>

    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet@3.0.14/dist/esri-leaflet.js"></script>

    <!-- Load Esri Leaflet Vector from CDN -->
    <script src="https://unpkg.com/esri-leaflet-vector@4.2.7/dist/esri-leaflet-vector.js" crossorigin=""></script>
    <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>
    <script>
      const accessToken = "YOUR_ACCESS_TOKEN";

      const map = L.map("map").setView([-6.17742, 106.828308], 10);

      L.esri.Vector.vectorBasemapLayer("arcgis/dark-gray/base", {
        token: accessToken
      }).addTo(map);

      L.esri.Vector.vectorBasemapLayer("arcgis/dark-gray/labels", {
        token: accessToken
      }).addTo(map);
    </script>
  </body>
</html>

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