Vue2Leaflet and esri-leaflet plugin intergration. Adding layers from ArcGIS based map services

Question

Why is the tile layer not showing while using a basemap from ArcGIS based service e.g. https://uneplivemapservices.unep.org/arcgis/rest/services/UNBASEMAP_Tiled/MapServer

Link to fiddle

var { LMap, LTileLayer, LMarker } = Vue2Leaflet;

new Vue({
el: '#app',
    components: { LMap, LTileLayer, LMarker },
    data() {
      return {
      zoom:13,
      center: L.latLng(47.413220, -1.219482),
      //URL BELOW NOT WORKING
      url:'https://uneplivemapservices.unep.org/arcgis/rest/services/UNBASEMAP_Tiled/MapServer', //NOT WORKING
      //URL BELOW WORKING
      //url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png', //WORKING 
      attribution:'&copy; <a href="http://osm.org   /copyright">OpenStreetMap</a> contributors',
      marker: L.latLng(47.413220, -1.219482),
   }
   }
});

Answer 1

I was able to get a workaround as shown in this fiddle http://jsfiddle.net/oskgfxpz/

HTML

     <l-map style="height:400px;background-color: rgb(123, 173, 223);" ref="map"    :zoom=2 :center="[0.02, 36.9]">

        <l-marker :key="2" :lat-lng="[0.02, 36.9]">
          <l-popup :content="'Example tooltip'"></l-popup>
        </l-marker>
     </l-map>

JAVASCRIPT

var { LMap, LTileLayer, LGeoJson, LMarker, LPopup } = Vue2Leaflet;

new Vue({
  el: '#app',
  components: {
  LMap,
  LTileLayer,
  LGeoJson,
  LMarker,
  LPopup
 },
 data () {
   return {
  }
 },
 mounted() {

  const UNbaseMap = L.esri.tiledMapLayer({
  url: 'https://uneplivemapservices.unep.org/arcgis/rest/services/UNBASEMAP_Tiled/MapServer',
  maxZoom: 5,
  minZoom: 2
  });

  this.$refs.map.mapObject.addLayer(UNbaseMap);

 }
});