31:Ta4e,map = { const bounds = //this && this.map && typeof this.map.getBounds === "function" ? this.map.getBounds() : null; this && this.map ? this.map.getBounds() : null; const container = html`

`; yield container; //const map = (container.map = L.map("map")); const map = (container.map = L.map("map", { crs: L.CRS[CRS_Code] })); if (bounds) { //console.log(bounds); map.fitBounds(bounds); } else { map.setView([0, 0], 1); } //L.control.fullscreen().addTo(map); var resizer = L.control .resizer({ direction: "se", onlyOnHover: true, pan: true }) .addTo(map); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {}).addTo( map ); var wmsLayer = L.tileLayer.wms( "https://www.globalcarbonatlas.org:8443/thredds/wms/" + directory + "/" + period + "/" + ressource + "?", { LAYERS: variable, COLORSCALERANGE: range, NUMCOLORBANDS: numcolorbands, STYLES: "raster/" + palette, ABOVEMAXCOLOR: "extend", BELOWMINCOLOR: "extend", SRS: CRS_Code, FORMAT: "image/png", OPACITY: opacity } ); // https://github.com/socib/Leaflet.TimeDimension var timeDimension = new L.TimeDimension({ times: timeVariable }); map.timeDimension = timeDimension; const currentTime = this && this.map ? this.map.timeDimension.getCurrentTime() : null; if (currentTime) { //console.log(currentTime); map.timeDimension.setCurrentTime(currentTime); } var player = new L.TimeDimension.Player( { transitionTime: 100, loop: true, startOver: true }, timeDimension ); var timeDimensionControlOptions = { player: player, timeDimension: timeDimension, position: "bottomleft", autoPlay: false, minSpeed: 1, speedStep: 0.5, maxSpeed: 15, timeSliderDragUpdate: true }; var timeDimensionControl = new L.Control.TimeDimension( timeDimensionControlOptions ); map.addControl(timeDimensionControl); var tdWmsLayer = L.timeDimension.layer.wms(wmsLayer); tdWmsLayer.addTo(map); for (let i = 0; i < layers.length; i++) { let layerGEOSERVER = L.tileLayer.wms( "https://www.globalcarbonatlas.org:8443/geoserver/GCA/wms?", { LAYERS: layers[i].layer, SRS: "EPSG3408", FORMAT: "image/png", TRANSPARENT: "true" } ); layerGEOSERVER.addTo(map); layerGEOSERVER.bringToFront(); } }32:Te58,allmaps = { var randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; const container = html`

`; yield container; if (mapsArray.length == 0) return "No maps"; var center = [0, 0]; var zoom = 0; var width = 300; var height = 250; var mapsNb = mapsArray.length; var maps = []; var tdWmsLayer = []; for (var i = 0; i < mapsNb; i++) { var div = document.createElement("div"); div.style.width = width + "px"; div.style.height = height + "px"; div.style.float = "left"; div.id = "map" + i; document.getElementById("mapDiv").appendChild(div); maps[i] = L.map("map" + i); maps[i].setView(center, zoom); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {}).addTo( maps[i] ); var wmsLayer = L.tileLayer.wms( "https://www.globalcarbonatlas.org:8443/thredds/wms/" + mapsArray[i].directory + "/" + mapsArray[i].period + "/" + mapsArray[i].ressource + "?", { LAYERS: mapsArray[i].variable, COLORSCALERANGE: mapsArray[i].range, NUMCOLORBANDS: mapsArray[i].numcolorbands, STYLES: "raster/" + mapsArray[i].palette, ABOVEMAXCOLOR: "extend", BELOWMINCOLOR: "extend", SRS: CRS_Code, FORMAT: "image/png", OPACITY: mapsArray[i].opacity } ); // https://github.com/socib/Leaflet.TimeDimension var timeDimension = new L.TimeDimension({ times: mapsArray[i].timeVariable }); maps[i].timeDimension = timeDimension; var player = new L.TimeDimension.Player( { transitionTime: 100, loop: true, startOver: true }, timeDimension ); var timeDimensionControlOptions = { player: player, timeDimension: timeDimension, position: "bottomleft", autoPlay: false, minSpeed: 1, speedStep: 0.5, maxSpeed: 15, timeSliderDragUpdate: true }; var timeDimensionControl = new L.Control.TimeDimension( timeDimensionControlOptions ); tdWmsLayer[i] = L.timeDimension.layer.wms(wmsLayer); tdWmsLayer[i].addTo(maps[i]); //if (i == 0) { maps[i].addControl(timeDimensionControl); //} for (let j = 0; j < mapsArray[i].layers.length; j++) { let layerGEOSERVER = L.tileLayer.wms( "https://www.globalcarbonatlas.org:8443/geoserver/GCA/wms?", { LAYERS: mapsArray[i].layers[j].layer, SRS: CRS_Code, FORMAT: "image/png", TRANSPARENT: "true" } ); layerGEOSERVER.addTo(maps[i]); layerGEOSERVER.bringToFront(); } } // Synchronize time from 1st map tdWmsLayer[0].on("timeload", function () { var currentTime = this._timeDimension.getCurrentTime(); for (let j = 1; j < mapsNb; j++) { maps[j].timeDimension.setCurrentTime(currentTime); } }); // Synchronize all maps together for (var i = 0; i < mapsNb; i++) { for (var j = 0; j < mapsNb; j++) { if (i != j) { maps[i].sync(maps[j]); } } } // https://github.com/jjimenezshaw/Leaflet.Control.Resizer var resizer = L.control .resizer({ direction: "se", onlyOnHover: true }) .addTo(maps[0]); L.DomEvent.on(resizer, "dragend", function (e) { var map0Div = document.getElementById("map0"); for (var i = 1; i < mapsNb; i++) { var mapDiv = document.getElementById("map" + i); mapDiv.style.width = map0Div.style.width; mapDiv.style.height = map0Div.style.height; maps[i].invalidateSize(); } }); }33:T71e,L = { const r = require.alias({ leaflet: "leaflet@1.8.0/dist/leaflet-src.js", "leaflet/dist/leaflet.css": "leaflet@1.8.0/dist/leaflet.css", "leaflet-fullscreen": "leaflet-fullscreen@1.0.2/dist/Leaflet.fullscreen.min.js", "leaflet-fullscreen/dist/leaflet.fullscreen.css": "leaflet-fullscreen@1.0.2/dist/leaflet.fullscreen.css", "leaflet-timedimension": "leaflet-timedimension@1.1.1/dist/leaflet.timedimension.min.js", "leaflet-timedimension/dist/leaflet.timedimension.control.min.css": "leaflet-timedimension@1.1.1/dist/leaflet.timedimension.control.min.css", "iso8601-js-period": "iso8601-js-period@0.2.1/iso8601.js", "leaflet.sync": "leaflet.sync@0.2.4/L.Map.Sync.js", "leaflet.control.resizer": "leaflet.control.resizer@0.0.1/L.Control.Resizer.js", "leaflet.control.resizer/L.Control.Resizer.css": "leaflet.control.resizer@0.0.1/L.Control.Resizer.css" }); const L = await r("leaflet"); await Promise.all([ r("leaflet-fullscreen").catch(() => {}), r("leaflet-timedimension").then( (o) => (L.TimeDimension = o), () => {} ), r("leaflet.sync").catch(() => {}), r("leaflet.control.resizer").catch(() => {}) ]); if (!L._style) { // apply stylesheets (only once on load) L._style = true; document.head.append(htl.html` `); } return L; }34:[] 2f:{"title":"WMS Leaflet map GCA (DEV)","cells":[{"id":0,"value":"md`# WMS Leaflet map GCA (DEV)\n## An interface to produce a slippy map using WMS (Web Map Service)\n

\nLeaflet\nInteractive Web Map\nWMS \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"md`An interface to produce a slippy map using WMS (Web Map Service) layer from netCDF files available\nfrom : https://www.globalcarbonatlas.org:8443/thredds/catalog/Atlas/Flux_Transcom/catalog.html.\nVector layers come from a Geoserver and the WMS layer from a Thredds Data Server with the WMS service activated.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":743,"value":"md`

\n### Interface`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"viewof layers = Inputs.checkbox(layersArray, {\n value: [layersArray[2]],\n label: \"Vector layers\",\n format: (x) => x.name\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2371,"value":"viewof CRS_Code = Inputs.radio([\"EPSG3857\", \"EPSG4326\"], {\n label: \"Coordinate Reference System\",\n value: \"EPSG3857\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"viewof palette0 = Inputs.select(palettesArray, {\n value: palettesArray[8],\n label: \"Palette\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"viewof paletteInversed = Inputs.toggle({\n label: \"Inverse palette\",\n values: [\"-inv\", \"\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"viewof opacity = Inputs.range([0, 100], {\n value: 100,\n step: 5,\n label: \"Opacity\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"viewof numcolorbands = Inputs.range([10, 250], {\n value: 20,\n step: 1,\n label: \"Number of colorbands\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":948,"value":"viewof directory = Inputs.select(dirsArray, {\n width: 600,\n value: dirsArray[15],\n label: \"Directory\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1006,"value":"viewof period = Inputs.select(\n [\n \"longterm\",\n \"yearlymean\",\n \"yearlymean-anom\",\n \"monthlymean\",\n \"monthlymean-anom\"\n ],\n {\n value: \"yearlymean-anom\",\n width: 600,\n label: \"Period averaging\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"viewof ressource = Inputs.select(ressourcesArray, {\n width: 600,\n value: ressourcesArray[0],\n label: \"Ressource\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"viewof variable = {\n if (typeof this !== \"undefined\" && variablesArray.includes(this.value)) {\n var variableToSet = this.value;\n } else {\n var variableToSet = variablesArray.slice(-1)[0];\n }\n var variable = Inputs.select(variablesArray, {\n value: variableToSet,\n label: \"Variable\"\n });\n return variable;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1697,"value":"viewof rangeFrom = Inputs.radio(\n [\"variable\", \"user choice\"],\n { label: \"Get range from\", value: \"variable\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"viewof range = {\n const range0 =\n this && rangeFrom === \"user choice\" ? this.value : rangeVariable;\n return rangeSlider({\n min: Math.floor(range0[0] - Math.abs(range0[0]) * 0.2),\n max: Math.ceil(range0[1] + Math.abs(range0[1]) * 0.2),\n step: 10 ** Math.floor(Math.log10(Math.abs(range0[1] - range0[0]) / 100.0)),\n value: range0,\n precision: 3,\n title: \"

Range

\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1627,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2011,"value":"mapsSelectionButtons = Inputs.button(\n [\n [\n \"Add\",\n () => {\n mutable mapsArrayMutable = mapsArrayMutable.concat(addMap());\n //mutable mapsArrayMutable.push(addMap());\n }\n ],\n [\n \"Remove last\",\n () => {\n mutable mapsArrayMutable = mapsArrayMutable.slice(0, -1);\n //mutable mapsArrayMutable.splice(1, 1);\n }\n ],\n [\n \"Reset\",\n () => {\n mutable mapsArrayMutable = [];\n }\n ]\n ],\n { value: [], label: \"List of maps\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2182,"value":"htl.html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2176,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1945,"value":"function addMap() {\n var map1 = {\n directory: directory,\n ressource: ressource,\n period: period,\n variable: variable,\n timeVariable: timeVariable,\n range: range,\n palette: palette,\n numcolorbands: numcolorbands,\n opacity: opacity,\n layers: layers,\n CRS_Code: CRS_Code\n };\n return map1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2445,"value":"// 💡 this function returns an encoded hash (#xxxxx) of the configuration to append to the export URL\nfunction addHash(configuration) {\n return `#${btoa(JSON.stringify(configuration))}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2301,"value":"mapsArray = {\n var mapsArray = [];\n\n // 💡 this section decodes the hash in the URL if present, and sets the configuration;\n // if there is no hash or decoding fails, it returns the default empty array\n try {\n const a = document.location.hash.replace(/^#/, \"\");\n if (a) mapsArray = JSON.parse(atob(a));\n } catch (e) {}\n\n for (let i = 0; i < mapsArrayMutable.length; i++) {\n mapsArray.push(mapsArrayMutable[i]);\n }\n return mapsArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2085,"value":"mutable mapsArrayMutable = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1515,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"dirsArray = {\n var xmlResponseDirectories = await fetch(\n \"https://www.globalcarbonatlas.org:8443/thredds/catalog/Atlas/Flux_Transcom/catalog.xml\"\n ).then((response) => {\n return response.text();\n });\n var catalogDirectories = new DOMParser().parseFromString(\n xmlResponseDirectories,\n \"text/xml\"\n );\n var dirsArray = Array.from(\n catalogDirectories.querySelectorAll(\"dataset > catalogRef\"),\n (n) => n.getAttribute(\"ID\")\n );\n return dirsArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"ressourcesArray = {\n var ressourcesResponse = await fetch(\n \"https://www.globalcarbonatlas.org:8443/thredds/catalog/\" +\n directory +\n \"/\" +\n period +\n \"/catalog.xml\"\n ).then((response) => {\n return response.text();\n });\n var ressourcesCatalog = new DOMParser().parseFromString(\n ressourcesResponse,\n \"text/xml\"\n );\n var ressourcesArray = Array.from(\n ressourcesCatalog.querySelectorAll(\"dataset > dataset\"),\n (n) => n.getAttribute(\"name\")\n ).filter((d) => d.endsWith(\".nc\"));\n return ressourcesArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":960,"value":"variablesArray = {\n var variablesResponse = await fetch(\n \"https://www.globalcarbonatlas.org:8443/thredds/wms/\" +\n directory +\n \"/\" +\n period +\n \"/\" +\n ressource +\n \"?REQUEST=GetCapabilities\"\n ).then((response) => {\n return response.text();\n });\n var variablesCatalog = new DOMParser().parseFromString(\n variablesResponse,\n \"text/xml\"\n );\n var variablesArray = Array.from(\n variablesCatalog.querySelectorAll(\n \"WMS_Capabilities > Capability > Layer > Layer > Layer > Name\"\n ),\n (n) => n.childNodes[0].nodeValue\n );\n return variablesArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1257,"value":"timeVariable = {\n var timeVariableResponse = await fetch(\n \"https://www.globalcarbonatlas.org:8443/thredds/wms/\" +\n directory +\n \"/\" +\n period +\n \"/\" +\n ressource +\n \"?REQUEST=GetCapabilities\"\n ).then((response) => {\n return response.text();\n });\n var timeVariableCatalog = new DOMParser().parseFromString(\n timeVariableResponse,\n \"text/xml\"\n );\n var timeVariableArray = Array.from(\n timeVariableCatalog.querySelectorAll(\n \"WMS_Capabilities > Capability > Layer > Layer > Layer > Dimension\"\n ),\n (n) => n.childNodes[0].nodeValue\n );\n return timeVariableArray[0].trim();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1651,"value":"rangeVariable = {\n var rangeVariableResponse = await fetch(\n \"https://www.globalcarbonatlas.org:8443/thredds/wms/\" +\n directory +\n \"/\" +\n period +\n \"/\" +\n ressource +\n \"?REQUEST=GetMetadata&VERSION=1.1.1&LAYER=\" +\n variable +\n \"&ITEM=minmax&SRS=EPSG:4326&BBOX=-180,-90,180,90&WIDTH=200&HEIGHT=200\"\n ).then((response) => {\n return response.json();\n });\n return [rangeVariableResponse.min, rangeVariableResponse.max];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"layersArray = [\n { name: \"Land mask\", layer: \"GCA:GCA_landMask\" },\n { name: \"Ocean mask\", layer: \"GCA:GCA_oceanMask\" },\n { name: \"Frontiers\", layer: \"GCA:GCA_frontiersCountryAndRegions\" },\n { name: \"Names\", layer: \"GCA:GCA_labelsCountriesRegionsOceans\" },\n { name: \"Urban areas\", layer: \"GCA:GCA_citiesLabelsAndFrontiers\" },\n { name: \"Lakes and river\", layer: \"GCA:GCA_lakesAndRivers\" },\n { name: \"Graticules\", layer: \"GCA:GCA_graticules01_05_10\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"palettesArray = [\n \"div-BrBG\",\n \"div-BuRd2\",\n \"div-BuRd\",\n \"div-PiYG\",\n \"div-PRGn\",\n \"div-PuOr\",\n \"div-RdBu\",\n \"div-RdGy\",\n \"div-RdYlBu\",\n \"div-RdYlGn\",\n \"div-Spectral\",\n \"psu-inferno\",\n \"psu-magma\",\n \"psu-plasma\",\n \"psu-viridis\",\n \"seq-BkBu\",\n \"seq-BkGn\",\n \"seq-BkRd\",\n \"seq-BkYl\",\n \"seq-BlueHeat\",\n \"seq-Blues\",\n \"seq-BuGn\",\n \"seq-BuPu\",\n \"seq-BuYl\",\n \"seq-cubeYF\",\n \"seq-GnBu\",\n \"seq-Greens\",\n \"seq-Greys\",\n \"seq-GreysRev\",\n \"seq-Heat\",\n \"seq-Oranges\",\n \"seq-OrRd\",\n \"seq-PuBuGn\",\n \"seq-PuBu\",\n \"seq-PuRd\",\n \"seq-Purples\",\n \"seq-RdPu\",\n \"seq-Reds\",\n \"seq-YlGnBu\",\n \"seq-YlGn\",\n \"seq-YlOrBr\",\n \"seq-YlOrRd\",\n \"x-Ncview\",\n \"x-Occam\",\n \"x-Rainbow\",\n \"x-Sst\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"palette = palette0 + paletteInversed","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"legend = \"https://www.globalcarbonatlas.org:8443/thredds/wms/\" +\n directory +\n \"/\" +\n period +\n \"/\" +\n ressource +\n \"?REQUEST=GetLegendGraphic&LAYER=\" +\n variable +\n \"&STYLES=raster/\" +\n palette +\n \"&COLORSCALERANGE=\" +\n range +\n \"&NUMCOLORBANDS=\" +\n numcolorbands +\n \"&WIDTH=20&HEIGHT=250\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1381,"value":"keyword_style = `style=\"font-family:Source Sans Pro; font-size: 14px; background: #cdebea\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1366,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"import { rangeSlider } from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}