How do I load a basemap from rest services hosted on a local ArcGIS instance?

[PraveenaRaavicharla]

How do I set it up so that the baseMap is loaded from my local ArcGIS instance using the following.

  var map = L.map('ui-map').setView([39, -97.5], 4);
  L.esri.basemapLayer('Streets').addTo(map);

[FC_Basson · Accepted solution]

What type of local layer are you trying to load as basemap? Tile layer, Vector Tile Layer, Map Image Layer, Image Service?  Layers are stacked in the order you add them, so the first layer you load will be the basemap.  You can use the dynamicMapLayer class to use a Map Image layer:

L.esri.dynamicMapLayer({
    url:'https://<myserver>/arcgis/rest/services/<map service>/MapServer',
    layers:[0]
 }).addToMap;‍‍‍‍‍‍‍‍

Alternatively you could add a Tile Layer as basemap using the Leaflet base classes.

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);‍

A handy way of handling multiple basemaps and overlays is by using the Leaflet layer control:

var basemaps = {
   "Esri Topographic": L.esri.basemapLayer('Topographic'),
   "OSM": L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map)
};
var overlays = {
    "Streets": L.esri.dynamicMapLayer({
                 url:'https://<myserver>/arcgis/rest/services/<map service>/MapServer',
                 layers:[0]
               }),
    "Towns": L.esri.dynamicMapLayer({
               url:'https://<myserver>/arcgis/rest/services/<map service>/MapServer',
               layers:[1]
             })
};
L.control.layers(basemaps, overlays).addTo(map);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍