diff --git a/fields.js b/fields.js index e98e45e..4fa81fc 100644 --- a/fields.js +++ b/fields.js @@ -24,6 +24,8 @@ export class FieldInitializer { this.siteCurrentlyZoomed = false this.daily = false this.toggleInactive = null + this.terminator = null + this.wmsLayer = null this.init(); } @@ -108,7 +110,6 @@ export class FieldInitializer { header.textContent = "Data Filters"; header.style.textAlign = 'center'; -// Define basemaps var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap contributors' @@ -118,170 +119,56 @@ export class FieldInitializer { maxZoom: 19, attribution: 'Tiles © Esri' }); - var template = - '//gibs-{s}.earthdata.nasa.gov/wmts/epsg4326/best/' + - '{layer}/default/{time}/{tileMatrixSet}/{z}/{y}/{x}.jpg'; - - var nasa = L.tileLayer(template, { - layer: 'MODIS_Terra_CorrectedReflectance_TrueColor', - tileMatrixSet: 'GoogleMapsCompatible_Level9', - maxZoom: 9, - time: '2023-11-04', - tileSize: 256, - subdomains: 'abc', - noWrap: true, - continuousWorld: true, - // Prevent Leaflet from retrieving non-existent tiles on the - // borders. - bounds: [ - [-85.0511287776, -179.999999975], - [85.0511287776, 179.999999975] - ], - attribution: - '' + - 'NASA EOSDIS GIBS   ' + - '' + - 'View Source' + - '' + + console.log(this.dateString) + + this.wmsLayer = L.tileLayer.wms("https://gibs.earthdata.nasa.gov/wms/epsg4326/best/wms.cgi", { + layers:["VIIRS_NOAA20_CorrectedReflectance_TrueColor"], + crs: L.CRS.EPSG4326, + format: 'image/png', + opacity: 0.7, + transparent:true, + + }); + + function updateTime(layer, newTime) { + layer.setParams({time: newTime}); + } + + this.wmsLayer1 = L.tileLayer.wms("https://gibs.earthdata.nasa.gov/wms/epsg4326/best/wms.cgi", { + layers: "VIIRS_NOAA20_CorrectedReflectance_TrueColor", + crs: L.CRS.EPSG4326, + time: "2023-12-10", + opacity: 0.5 }); - var wmsLayer = L.tileLayer.wms('https://gibs.earthdata.nasa.gov/layer-metadata/v1.0/VIIRS_NOAA20_CorrectedReflectance_TrueColor.json', { - layers: 'VIIRS_NOAA20_CorrectedReflectance_TrueColor' - }) - - var template = - '//gibs-{s}.earthdata.nasa.gov/wmts/epsg4326/best/' + - '{layer}/default/{time}/{tileMatrixSet}/{z}/{y}/{x}.jpg'; - - var nasa2 = L.tileLayer(template, { - layer: 'VIIRS_NOAA20_CorrectedReflectance_TrueColor', - tileMatrixSet: '250m', - time: '2013-11-04', - tileSize: 512, - subdomains: 'abc', - noWrap: true, - continuousWorld: true, - // Prevent Leaflet from retrieving non-existent tiles on the - // borders. - bounds: [ - [-89.9999, -179.9999], - [89.9999, 179.9999] - ], - attribution: - '' + - 'NASA EOSDIS GIBS   ' + - '' + - 'View Source' + - '' + + this.wmsLayer2 = L.tileLayer.wms("https://gibs.earthdata.nasa.gov/wms/epsg4326/best/wms.cgi", { + layers: ["Coastlines","Reference_Labels"], + crs: L.CRS.EPSG4326, + time: "2023-12-10", }); + // updateTime(this.wmsLayer, this.dateString); + // wmsLayer.time = '2013-11-04' + + // wmsLayer({time:"2022-12-12"}) + // var wmtsLayer = L.tileLayer('https://api.lantmateriet.se/open/topowebb-ccby/v1/wmts/token/{your_token}/?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=topowebb&STYLE=default&TILEMATRIXSET=3006&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image%2Fpng', { + // maxZoom: 9, + // minZoom: 0, + // continuousWorld: true, + // attribution: '© Lantmäteriet Topografisk Webbkarta Visning, CCB', + // }) -// Create control + // Create control var baseMaps = { + "AERONET Test3" : this.wmsLayer, + // "AERONET Test33": [this.wmsLayer1,this.wmsLayer2], "OpenStreetMap": osm, "Esri WorldStreetMap": esri, - "AERONET Test" : nasa, - "AERONET Test2" : wmsLayer, - "AERONET Test3" : nasa2, }; L.control.layers(baseMaps).addTo(this.map); - - - // const basemapOptions = [ - // { value: null, label: 'ArcGIS Satellite View Map' }, - // { value: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', label: 'Leaflet Original Map' }, - // // { value: 'topo', label: 'Topographic' }, - // ] - - -// const dropDisc = 'Select Map'; -// placeholder = 'ArcGIS Satellite View Map'; -// toolTipContent = 'This option allows you to select different base maps to overlay data to.'; -// -// const dropdownBM = initDropdownCN('basemap-dropdown', basemapOptions, dropDisc, placeholder, false, 'map-fields', toolTipContent); -// -// -// // Create a custom Leaflet control -// const AdjustMapControl = L.Control.extend({ -// onAdd: function(map) { -// // Create the container element for the control -// const container = L.DomUtil.create('div', 'adjust-map-control'); -// -// // Set the HTML for the fields container -// const adjustMapHeader = document.createElement("h2"); -// adjustMapHeader.textContent = "Adjust Map"; -// adjustMapHeader.style.textAlign = 'center'; -// container.appendChild(adjustMapHeader); -// -// const dropDisc = 'Select Map'; -// const placeholder = 'ArcGIS Satellite View Map'; -// const toolTipContent = 'This option allows you to select different base maps to overlay data to.'; -// -// container.appendChild(dropdownBM); -// -// // Return the container element -// return container; -// }, -// -// onRemove: function(map) { -// // Clean up any event listeners or other resources if needed -// } -// }); -// let newBasemapLayer = null -// let basemapLayer = null; -// -// const mapDropdownElm = document.getElementById('basemap-dropdown'); -// -// mapDropdownElm.addEventListener('change', async event => { -// const selectedBasemap = event.target.value; -// -// if (basemapLayer !== null) { -// // If there's an existing basemap layer, remove it from the map -// this.map.removeLayer(basemapLayer); -// basemapLayer = null; // Reset the basemapLayer reference -// } -// -// if (selectedBasemap !== null && selectedBasemap !== 'null') { -// -// // Create a new tile layer with the captured URL -// newBasemapLayer = L.tileLayer(selectedBasemap, { -// attribution: 'OpenStreetMap', -// noWrap: true, -// tileSize: 256, -// errorTileUrl: '', -// errorTileTimeout: 5000, -// }); -// // Add the new basemap layer to the map -// newBasemapLayer.addTo(this.map); -// } else { -// this.map.eachLayer(layer => { -// if (layer instanceof L.TileLayer && newBasemapLayer !== null) { -// this.map.removeLayer(newBasemapLayer); -// } -// }); -// } -// }); - -// -// // Create an instance of the custom control -// const adjustMapControl = new AdjustMapControl(); -// -// // Add the control to the map -// adjustMapControl.addTo(this.map); -// -// - - // Set the HTML for the fields container. - // const adjustMapHeader = document.createElement("h2"); - // adjustMapHeader.textContent = "Adjust Map"; - // adjustMapHeader.style.textAlign = 'center'; - - // placeholder = 'ArcGIS Satellite View Mpa' - // const dropDisc = 'Select Map'; - // toolTipContent = 'This option allows you to select different base maps to overlay data to.' - // const dropdownBM = initDropdown('basemap-dropdown', basemapOptions, dropDisc, placeholder, false, 'map-fields', toolTipContent); - // Insert the header before the form element fieldsContainer.insertBefore(header, fieldsContainer.firstChild); diff --git a/init.js b/init.js index c009b9a..6350bb5 100644 --- a/init.js +++ b/init.js @@ -64,14 +64,12 @@ export function initMap(basemapUrl = null) { map = L.map('map', options); } - - let t = L.terminator(); + var t = L.terminator(); t.addTo(map); setInterval(function(){updateTerminator(t)}, 500); function updateTerminator(t) { t.setTime(); } - return map; } diff --git a/map.js b/map.js index a840575..8ee5b14 100644 --- a/map.js +++ b/map.js @@ -22,6 +22,7 @@ async function initializeMap() { if (!map) { map = initMap(); } + // map = initMap(); defaultDate = getStartEndDateTime();