31:Tcf8,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", { crs: L.CRS["EPSG4326"] //crs: L.CRS["EPSG3857"] })); 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); // 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); let wmsLayer = L.tileLayer.wms( "https://thredds-su.ipsl.fr/thredds/wms/ipsl_thredds/brocksce/GCA/Flux_Transcom/" + directory + "/" + period + "/" + ressource + "?", { LAYERS: variable, COLORSCALERANGE: range, NUMCOLORBANDS: numcolorbands, STYLES: "raster/" + palette, ABOVEMAXCOLOR: "extend", BELOWMINCOLOR: "extend", SRS: "EPSG:4326", FORMAT: "image/png", OPACITY: opacity } ); var tdWmsLayer = L.timeDimension.layer.wms(wmsLayer); tdWmsLayer.addTo(map); // https://bio.discomap.eea.europa.eu/arcgis/services/Internal/Basemap_EU_27_WM_Cached/MapServer/WMSServer?service=WMS&VERSION=1.3.0&REQUEST=map&LAYERS=1&STYLES=default&CRS=EPSG:4326&BBOX=-180,-90,180,90&WIDTH=600&HEIGHT=600&FORMAT=image/png let layerAdditional0 = L.tileLayer.wms( //"https://marine.discomap.eea.europa.eu/arcgis/services/Marine/EEA_coastline_v2017/MapServer/WMSServer", "https://bio.discomap.eea.europa.eu/arcgis/services/Internal/Basemap_EU_27_WM_Cached/MapServer/WMSServer", { layers: "1", format: "image/png", style: "default", transparent: "true" } ); // http://www2.demis.nl/WMS/wms.asp?wms=WorldMap&WMTVER=1.0.0&REQUEST=map&LAYERS=Coastlines,Borders&SRS=EPSG:4326&BBOX=-180,-90,180,90&WIDTH=1200&HEIGHT=600&FORMAT=image/png&STYLES=000000,AAAAAA&TRANSPARENT=TRUE let layerAdditional = L.tileLayer.wms("https://www2.demis.nl/wms/wms.asp", { wms: "WorldMap", layers: "Coastlines,Borders", format: "image/png", styles: "000000,AAAAAA", transparent: "true" }); layerAdditional.addTo(map); layerAdditional.bringToFront(); }32:T6ef,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").catch(() => {}), 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; }33:[] 2f:{"title":"WMS Leaflet map GCA","cells":[{"id":0,"value":"md`# WMS Leaflet map GCA\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`Layers from netCDF files available\nfrom : https://thredds-su.ipsl.fr/thredds/catalog/ipsl_thredds/brocksce/GCA/catalog.html.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":743,"value":"md`

\n### Interface`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"viewof palette0 = Inputs.select(palettesArray, {\n value: palettesArray[4],\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([1, 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":1515,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"dirsArray = {\n var xmlResponseDirectories = await fetch(\n \"https://thredds-su.ipsl.fr/thredds/catalog/ipsl_thredds/brocksce/GCA/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 n\n .getAttribute(\"ID\")\n .replace(\"DatasetScanIPSLTHREDDS/brocksce/GCA/Flux_Transcom/\", \"\")\n );\n return dirsArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"ressourcesArray = {\n var ressourcesResponse = await fetch(\n \"https://thredds-su.ipsl.fr/thredds/catalog/ipsl_thredds/brocksce/GCA/Flux_Transcom/\" +\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://thredds-su.ipsl.fr/thredds/wms/ipsl_thredds/brocksce/GCA/Flux_Transcom/\" +\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":2385,"value":"url = \"https://thredds-su.ipsl.fr/thredds/wms/ipsl_thredds/brocksce/GCA/Flux_Transcom/\" +\n directory +\n \"/\" +\n period +\n \"/\" +\n ressource +\n \"?REQUEST=GetCapabilities\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1257,"value":"timeVariable = {\n var timeVariableResponse = await fetch(\n \"https://thredds-su.ipsl.fr/thredds/wms/ipsl_thredds/brocksce/GCA/Flux_Transcom/\" +\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://thredds-su.ipsl.fr/thredds/wms/ipsl_thredds/brocksce/GCA/Flux_Transcom/\" +\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":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://thredds-su.ipsl.fr/thredds/wms/ipsl_thredds/brocksce/GCA/Flux_Transcom/\" +\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":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"import { rangeSlider } from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}