Introduction to basemap layers

A map is a container for layers. You use a map together with a map view to display layers of geographic data in 2D. Most applications contain a basemap layer to display geographic data with streets or satellite imagery, and the data is typically provided by the basemap layer service.

You can use the basemap layer service in your application to:

  • Display different types of geographic data of the world for a map.
  • Dsiplay default vector tile basemp styles such as streets navigation, light gray canvas, and OSM.
  • Display custom basemap styles with your own colors, glyphs, and fonts.
  • Display default image tile (raster) basemp layers for satyellite imagery and hillshade.

How to access the basemap layer service

To access vector basemap layers, you reference both the main Esri Leaflet plugin and the vectorBasemapLayer plugin.

  1. Reference the Esri Leaflet and vector plugins.
  2. Define a basemap style enumeration.
  3. Instantiate the vectorBasemapLayer class.
  4. Set the basemap enumeration and API key.

Example

Display a basemap layer

This example loads and displays the ArcGIS:Streets vector tile style in the map. To see all of the basemap style enumerations, go to Basemap layer service in the Mapping APIs and location services guide.

Use dark colors for code blocksCopy
                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- Esri Leaflet -->
<script src="https://unpkg.com/esri-leaflet@3.0.8/dist/esri-leaflet.js"
    integrity="sha512-oUArlxr7VpoY7f/dd3ZdUL7FGOvS79nXVVQhxlg6ij4Fhdc4QID43LUFRs7abwHNJ0EYWijiN5LP2ZRR2PY4hQ=="
    crossorigin=""></script>

<!-- Vector basemap layer plugin -->
<script src="https://unpkg.com/esri-leaflet-vector@4.0.0/dist/esri-leaflet-vector.js"
    integrity="sha512-7rLAors9em7cR3/583gZSvu1mxwPBUjWjdFJ000pc4Wpu+fq84lXF1l4dbG4ShiPQ4pSBUTb4e9xaO6xtMZIlA=="
    crossorigin=""></script>

<script>

  const apiKey = "YOUR_API_KEY";
  const basemapEnum = "ArcGIS:Streets";

  const map = L.map('map', {
    minZoom: 2
  }).setView([34.02,-118.805], 13);

  L.esri.Vector.vectorBasemapLayer(basemapEnum, {
    apiKey: apiKey
  }).addTo(map);

</script>

To learn more, see the Display a map and Change the basemap layer tutorials.

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