Display a dynamic map layer

You can display a dynamic map layer from a map service. If the service is published in a different coordinate system than the map, it will automatically reproject on the fly. More information about Map Services can be found in the L.esri.DynamicMapLayer documentation.

Use dark colors for code blocksCopy
<html>
  <head>
    <meta charset="utf-8" />
    <title>Display a dynamic map layer</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.10/dist/esri-leaflet.js"></script>
    <!-- Load Esri Leaflet Vector from CDN -->
    <script src="https://unpkg.com/esri-leaflet-vector@4.2.5/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([37.71, -99.88], 4);

      L.esri.Vector.vectorBasemapLayer("arcgis/imagery/standard", {
        token: accessToken
      }).addTo(map);

      L.esri
        .dynamicMapLayer({
          url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
          opacity: 0.7
        })
        .addTo(map);

    </script>
  </body>
</html>