How to use the esri-leaflet.tiledMapLayer function in esri-leaflet

initMap () {
      // Create map, with default centered and zoomed to show entire BC.
      this.map = L.map('map', {
        preferCanvas: true
      }).setView([this.latitude ? this.latitude : 54.5, this.getLongitude() ? this.getLongitude() : -126.5], 5)
      L.control.scale().addTo(this.map)
      // Add map layers.
      tiledMapLayer({url: 'https://maps.gov.bc.ca/arcserver/rest/services/Province/roads_wm/MapServer'}).addTo(this.map)
      L.tileLayer.wms('https://openmaps.gov.bc.ca/geo/pub/WHSE_CADASTRE.PMBC_PARCEL_FABRIC_POLY_SVW/ows?', {
        format: 'image/png',
        layers: 'pub:WHSE_CADASTRE.PMBC_PARCEL_FABRIC_POLY_SVW',
        styles: 'PMBC_Parcel_Fabric_Cadastre_Outlined',
        transparent: true
      }).addTo(this.map)
      // Add locate control
      const locateButton = L.control.locate({ position: 'topleft' })
      locateButton.onClick = (ev) => {
        this.map.locate()
      }
      locateButton.addTo(this.map)
      this.map.on('locationfound', (ev) => {
        this.$emit('coordinate', ev.latlng)
      })

initMap () {
      // Create map, with default centered and zoomed to show entire BC.
      this.map = L.map('map').setView([this.latitude ? this.latitude : 54.5, this.getLongitude() ? this.getLongitude() : -126.5], 5)
      L.control.scale().addTo(this.map)

      // Add map layers.
      tiledMapLayer({url: 'https://maps.gov.bc.ca/arcserver/rest/services/Province/roads_wm/MapServer'}).addTo(this.map)
      L.tileLayer.wms('https://openmaps.gov.bc.ca/geo/pub/WHSE_CADASTRE.PMBC_PARCEL_FABRIC_POLY_SVW/ows?', {
        format: 'image/png',
        layers: 'pub:WHSE_CADASTRE.PMBC_PARCEL_FABRIC_POLY_SVW',
        styles: 'PMBC_Parcel_Fabric_Cadastre_Outlined',
        transparent: true
      }).addTo(this.map)
      this.createMarker()
    },
    createMarker () {

initMap () {
      // Create map, with default centered and zoomed to show entire BC.
      this.map = L.map(this.$el).setView([54.5, -126.5], 5)
      L.control.scale().addTo(this.map)
      // Add map layers.
      tiledMapLayer({url: 'https://maps.gov.bc.ca/arcserver/rest/services/Province/roads_wm/MapServer'}).addTo(this.map)
      L.tileLayer.wms('https://openmaps.gov.bc.ca/geo/pub/WHSE_CADASTRE.PMBC_PARCEL_FABRIC_POLY_SVW/ows?', {
        format: 'image/png',
        layers: 'pub:WHSE_CADASTRE.PMBC_PARCEL_FABRIC_POLY_SVW',
        styles: 'PMBC_Parcel_Fabric_Cadastre_Outlined',
        transparent: true
      }).addTo(this.map)

      L.tileLayer.wms('https://openmaps.gov.bc.ca/geo/pub/WHSE_WATER_MANAGEMENT.GW_AQUIFERS_CLASSIFICATION_SVW/ows?', {
        format: 'image/png',
        layers: 'pub:WHSE_WATER_MANAGEMENT.GW_AQUIFERS_CLASSIFICATION_SVW',
        styles: 'Aquifers_BC_Outlined',
        transparent: true
      }).addTo(this.map)

      L.tileLayer.wms('https://openmaps.gov.bc.ca/geo/pub/WHSE_BASEMAPPING.FWA_STREAM_NETWORKS_SP/ows?', {
        format: 'image/png',

createLeafletElement(props) {
        return tiledMapLayer({ ...props });
    }
}

function FootprintMap (opts) {
  var mapOptions = {
    minZoom: 16,
    maxZoom: 19,
    center: [48.535903, -123.018723],
    zoom: 17,
    dragging: false,
    keyboard: false,
    tap: false
  }
  if (!(this instanceof FootprintMap)) return new FootprintMap(opts)
  this.element = document.createElement('div')
  var map = L.map(opts.mapId, mapOptions)
  var baseLayer = esri.tiledMapLayer({
    url: 'https://sjcgis.org/arcgis/rest/services/Basemaps/Aerials_2016_WM/MapServer',
    maxZoom: 19
  })
  baseLayer.addTo(map)

  this.zoomTo = function (latlng, z) {
    map.setView(latlng, z)
  }

  this.addGeojson = function (gj) {
    L.geoJson(gj).addTo(map)
  }
}

map.addBasemapType('esri-tiled', function(conf) {
    return esri.tiledMapLayer(conf);
});