Using ESRI street maps with Leaflet

Question

How can I integrate the ESRI street maps (https://leaflet-extras.github.io/leaflet-providers/preview/#filter=Esri.WorldStreetMap) into my leaflet javascript. Following is what I did but the map doesn't load.

<script src="https://unpkg.com/[email protected]"></script>
<script> var map = L.map('map1').setView([48.135, 11.582], 3);
L.esri.basemapLayer('Streets').addTo(map); 

     L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map /MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS,    Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand),  TomTom, 2012'}).addTO(map); 

Answer 1

you're mixing up two entirely different techniques of loading the same tiled map service.

when you use the esri leaflet plugin you can just mention the Esri basemap by name. Leaflet's attribution control will be populated automatically with relevant credits recognizing data providers in the area as users pan and zoom automatically.

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script>
  var map = L.map("map").setView([37.75, -122.23], 10);
  L.esri.basemapLayer('Streets').addTo(map); 
</script>

The second technique is to use Leaflet's own TileLayer class to load the Esri basemap. You had a typo in your own attempt, but its certainly valid to reference the service url manually and skip using the plugin.

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]"></script>
<script>
var map = L.map("map").setView([37.75, -122.23], 10);

var serviceUrl = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}';
var credits = 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012 etc. etc. etc.';
// not addTO(map)
L.tileLayer(serviceUrl, { attribution: credits }).addTo(map); 
</script>

No matter which approach you take, Esri has two requirements when you display an ArcGIS Online service in a Leaflet application

1. You need a (free) ArcGIS Online account.
2. You must display 'Powered by Esri' and recognize all data providers.