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 © <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', } } };