How to use the leaflet.tileLayer function in leaflet

wheelDebounceTime: 30,
	wheelPxPerZoomLevel: 25,
	tap: false,
	tapTolerance: 10,
	bounceAtZoomLimits: false
};

mapOptions.doubleClickZoom = true;
mapOptions.doubleClickZoom = 'center';

mapOptions.center = latLng;
mapOptions.center = latLngLiteral;
mapOptions.center = latLngTuple;

mapOptions.layers = [];
mapOptions.layers = [L.tileLayer('')]; // add layers of other types

mapOptions.maxBounds = latLngBounds;
mapOptions.maxBounds = [];
mapOptions.maxBounds = latLngBoundsLiteral;

// mapOptions.renderer = ?

mapOptions.scrollWheelZoom = true;
mapOptions.scrollWheelZoom = 'center';

mapOptions.touchZoom = false;
mapOptions.touchZoom = 'center';

let layer: L.Layer;

const htmlElement = document.getElementById('foo');

private createMap() {
    const tileOptions = {
      minZoom: ZOOM_EXTENT[0],
      maxZoom: ZOOM_EXTENT[1],
      accessToken: MAP_ACCESS_TOKEN,
      attribution: MAP_ATTRIBUTION,
    };
    const light = L.tileLayer(LEAFLET_LIGHT_URL + MAP_ACCESS_TOKEN, tileOptions);
    const dark = L.tileLayer(LEAFLET_DARK_URL + MAP_ACCESS_TOKEN, tileOptions);
    const streets = L.tileLayer(LEAFLET_STREETS_URL + MAP_ACCESS_TOKEN, tileOptions);
    this.map = L.map(this.$refs.map as HTMLElement, {
      layers: [light, dark, streets],
    }).setView(this.center, this.zoom);

    // @types/leaflet does not know about attribution
    // tslint:disable-next-line
    (this.map as any).attributionControl.setPrefix('');

    const baseMaps = {
      gray: light,
      dark,
      color: streets,
    };
    L.control.layers(baseMaps).addTo(this.map);

componentDidMount() {
    const { mapId, lat, lng, zoom } = this.props;

    this.progress = NProgress.configure({
      showSpinner: false,
      parent: `#${mapId}`,
    });

    //construct baselayers object for control
    //	http://a.tile.openstreetmap.org/${z}/${x}/${y}.png
    const cartoLightNoLabels = L.tileLayer(
      'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_nolabels/{z}/{x}/{y}.png',
      {
        // http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
        attribution: 'Carto © CC BY 3.0, OpenStreetMap © ODbL',
        name: 'Carto Light',
      },
    );
    const cartoVoyagerNoLabels = L.tileLayer(
      'https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager_nolabels/{z}/{x}/{y}.png',
      {
        maxZoom: 19,
        attribution: 'Carto © CC BY 3.0, OpenStreetMap © ODbL',
      },
    );

    const cartoLabels = L.tileLayer(

exclusive       	: false,
	collapsed : true, 
	position: 'topright'
};


// Initialize the map
var map = L.map('map', {
  scrollWheelZoom: false
});

// Set the position and zoom level of the map
map.setView([47.70, 13.35], 7);

/* Base Layers */
var esri_WorldImagery = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
	attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
}).addTo(map);

var esri_WorldTerrain = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}', {
	attribution: 'Tiles © Esri — Source: USGS, Esri, TANA, DeLorme, and NPS',
	maxZoom: 13
});

var esri_NatGeoWorldMap = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
	attribution: 'Tiles © Esri — National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC',
	maxZoom: 16
});

var districts = L.tileLayer.wms("http://webportal.conabio.gob.mx:8085/geoserver/wms?",
	{layers:"leafletTutorial:at_districts", format:'image/png',transparent:true})//.addTo(map)

import * as L from 'leaflet';
import 'leaflet-draw';

const osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors';
const osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
const map = L.map('map', {layers: [osm], center: L.latLng(-37.7772, 175.2756), zoom: 15 });

const drawnItems = L.featureGroup();
map.addLayer(drawnItems);

const drawControl = new L.Control.Draw({
    position: 'topleft' ,
    draw: {
        polygon: {
            allowIntersection: false,
            drawError: {
                color: '#b00b00',
                timeout: 1000
            },
            shapeOptions: {
                color: '#bada55'

var urlOsmFr = 'http://{s}.layers.openstreetmap.fr/{layer}/{z}/{x}/{y}.png';
var attributionOsmFr = '';
export var mapOverlay = {
  'No name': L.tileLayer(urlOsmFr, {layer: 'noname', attribution: attributionOsmFr}),
  'No Oneway': L.tileLayer(urlOsmFr, {layer: 'nooneway', attribution: attributionOsmFr}),
  'No Ref on way': L.tileLayer(urlOsmFr, {layer: 'noref', attribution: attributionOsmFr}),
  'Fixme tags': L.tileLayer(urlOsmFr, {layer: 'fixme', attribution: attributionOsmFr}),
  'Note tags': L.tileLayer(urlOsmFr, {layer: 'note', attribution: attributionOsmFr}),
  'validate:my_own=yes': L.tileLayer(urlOsmFr, {layer: 'my_own', attribution: attributionOsmFr}),
  'admin_level=4': L.tileLayer(urlOsmFr, {layer: 'admin4', attribution: attributionOsmFr}),
  'admin_level=5': L.tileLayer(urlOsmFr, {layer: 'admin5', attribution: attributionOsmFr}),
  'admin_level=6': L.tileLayer(urlOsmFr, {layer: 'admin6', attribution: attributionOsmFr}),
  'admin_level=7': L.tileLayer(urlOsmFr, {layer: 'admin7', attribution: attributionOsmFr}),
  'admin_level=8': L.tileLayer(urlOsmFr, {layer: 'admin8', attribution: attributionOsmFr}),
  'admin_level=10': L.tileLayer(urlOsmFr, {layer: 'admin10', attribution: attributionOsmFr}),
  'boundary=local_authority': L.tileLayer(urlOsmFr, {layer: 'boundary_local_authority', attribution: attributionOsmFr}),
  'boundary=political': L.tileLayer(urlOsmFr, {layer: 'boundary_political', attribution: attributionOsmFr}),
  'boundary=election': L.tileLayer(urlOsmFr, {layer: 'boundary_election', attribution: attributionOsmFr}),
  'Voirie/Cadastre': L.tileLayer(urlOsmFr, {layer: 'voirie-cadastre', attribution: attributionOsmFr}),
  'No ref without tertiary': L.tileLayer(urlOsmFr, {layer: 'noref-notertiary', attribution: attributionOsmFr}),
  'Mapillary': new Mapillary('MEpmMTFQclBTUWlacjV6RTUxWWMtZzo5OTc2NjY2MmRiMDUwYmMw'),
};

function setTiles(leaflet, initData) {
    let tiles = initData["tiles"];
    switch (tiles["provider"]) {
        case "OSM":
            let OsmTileUrl = (tiles["url"] ? tiles["url"] : "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");
            L.tileLayer(OsmTileUrl, {
                attribution: 'Map data © <a href="https://www.openstreetmap.org">OpenStreetMap</a>',
            }).addTo(leaflet);
            break;
        case "Mapbox":
            let MapboxTileUrl = (tiles["url"] ? tiles["url"] : "https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}{highres}.png?access_token={accessToken}");
            L.tileLayer(MapboxTileUrl, {
                attribution: 'Map data © <a href="https://www.openstreetmap.org">OpenStreetMap</a>, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com">Mapbox</a>',
                accessToken: tiles['token'],
                highres: (window.devicePixelRatio &gt; 1.5 ? '@2x' : '')
            }).addTo(leaflet);
            break;
    }
}

componentDidMount() {
    let map = L.map('map', {
      center: [34.02, -118.48],
      zoom: 14,
      layers: [
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }),
      ]
    });

    map.on('zoomend', () =&gt; this.onZoomChanged(map.getZoom()));

    this.markers = L.layerGroup().addTo(map);

    this.componentDidUpdate();
  }

var _this = this;

    this.map = L.map(id, { attributionControl: false });
    this.geojsonLayer = {};
    this.geomLayer = L.geoJson(null, {
      style: createStyle,
      pointToLayer: function(feature, latlng) {
        return L.circle(latlng, 24);
      },
      onEachFeature: function(f, layer) {
        _this.geojsonLayer[L.stamp(f)] = layer;
        featureControl(f, layer);
      }
    });

    L.tileLayer(config.tiles.url, {
      attribution: config.tiles.atttribution
    }).addTo(this.map);

    L.control.attribution({ position: 'bottomleft' }).addTo(this.map);

    this.geomLayer.addTo(this.map);
    this.map.setView([0, 0], 2);
    this.map.on('click', L.bind(function(e) { this.fire('click', e); }, this));
  },

}
          });

          this.config.process = p[0];

          return p;
        } else {
          this.notificationService.error(response.error);

          return [];
        }
      });

    this.map = L.map(this.mapContainer.nativeElement).setView(L.latLng(0.0, 0.0), 1);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.map);

    this.selection = new Selection(this.map, [[0, 0], [20, 20]], {color: '#4db8ff'});

    this.selection.on('updatedomain', (data: any) =&gt; {
      let nw = data.getNorthWest(),
        se = data.getSouthEast();

      this.axes.forEach((axisComponent: AxisComponent) =&gt; {
        let axis = axisComponent.axis;

        if (this.lngNames.some((x: string) =&gt; x === axis.id)) {
          axis.start = nw.lng;