initMap() {
   this.map = L.map('map', {
     center: [this.coords[0], this.coords[1]],
     zoom: 8,
   });
   let basemap = L.tileLayer('https://api.mapbox.com/styles/v1/nathanhnew/cj62p1p9l3nyx2qp07zm12yh5/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmF0aGFuaG5ldyIsImEiOiJjajYxZXJ2NHowdHk1MnFvZnFvcjE2aTZ3In0.uyW_Te8pYugmfTiKuVHvOA', {
     attribution: 'Imagery © Mapbox, Map Data © OpenStreetMap |'
   });
   var radarWMS = L.tileLayer.wms("https://nowcoast.noaa.gov/arcgis/services/nowcoast/radar_meteo_imagery_nexrad_time/MapServer/WMSServer", {
     layers: '1',
     format: 'image/png',
     transparent: true,
     opacity: 0.8,
     attribution: 'Radar data provided by National Weather Service via nowCOAST'
   });
   var warningsWMS = L.tileLayer.wms("https://nowcoast.noaa.gov/arcgis/services/nowcoast/wwa_meteoceanhydro_shortduration_hazards_warnings_time/MapServer/WMSServer", {
     layers: '1',
     format: 'image/png',
     transparent: true,
     opacity: 0.8,
     attribution: 'nowCOAST'
   });
   let overlay = L.tileLayer('https://api.mapbox.com/styles/v1/nathanhnew/cj62phsw73npj2rphndjzt3i2/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmF0aGFuaG5ldyIsImEiOiJjajYxZXJ2NHowdHk1MnFvZnFvcjE2aTZ3In0.uyW_Te8pYugmfTiKuVHvOA');
   let layers = L.layerGroup([basemap,radarWMS,warningsWMS,overlay]).addTo(this.map)
   this.initialized = true;
 }
	/**
	 * Creates a TileLayer from the provided definition. This is a convenience function
	 * to help with generating layers from objects.
	 *
	 * @param layerDef The layer to create
	 * @returns {TileLayer} The TileLayer that has been created
	 */
	static createTileLayer(layerDef: LeafletTileLayerDefinition): TileLayer {
		let layer: TileLayer;

		switch (layerDef.type) {
			case 'xyz':
				layer = tileLayer(layerDef.url,  layerDef.options);
				break;
			case 'wms':
			default:
				layer = tileLayer.wms(layerDef.url,  layerDef.options);
				break;
		}

		return layer;
	}
import * as L from 'leaflet';
import 'leaflet-providers';

const map = L.map('map');
L.tileLayer.provider('Stamen.Watercolor').addTo(map);

L.tileLayer.provider('HERE.terrainDay', {
  app_id: '<insert ID here>',
  app_code: '<insert ID here>'
}).addTo(map);

new L.TileLayer.Provider('MapBox').addTo(map);
new L.TileLayer.Provider('MapBox', {id: 'ID', accessToken: 'ACCESS_TOKEN'}).addTo(map);

L.TileLayer.Provider.providers['nlmaps'] = {
  url: 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/{variant}/EPSG:3857/{z}/{x}/{y}.png',
  options: {
    minZoom: 6,
    maxZoom: 19,
    bounds: [[50.5, 3.25], [54, 7.6]],
    attribution: 'Kaartgegevens &copy; <a href="kadaster.nl">Kadaster</a>'
  },
  variants: {
    standaard: 'brtachtergrondkaart',
    pastel: 'brtachtergrondkaartpastel',
    grijs: 'brtachtergrondkaartgrijs',
    luchtfoto: {
      url: 'https://geodata.nationaalgeoregister.nl/luchtfoto/rgb/wmts/1.0.0/2016_ortho25/EPSG:3857/{z}/{x}/{y}.png',
    }
  }
};