28:null 29:["$","title",null,{"children":"WMS Leaflet map GCA | Patrick Brockmann | Observable"}] 2e:Ta08,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")); 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); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {}).addTo( map ); let 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: "EPSG:4326", FORMAT: "image/png", OPACITY: opacity } ); 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: "EPSG:4326", FORMAT: "image/png", TRANSPARENT: "true" } ); layerGEOSERVER.addTo(map); layerGEOSERVER.bringToFront(); } }2f: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; }30:[] 2c:{"id":"46286bcce22c01b3","slug":"wms-leaflet-gca","title":"WMS Leaflet map GCA","thumbnail":"f3e43942e8f4f9f98b05b27e43234140a5140fc00e049b3031736bab95dde5ce","access_level":"public","create_time":"$D2022-01-06T13:13:18.162Z","update_time":"$D2022-07-11T12:38:33.032Z","view_time":null,"first_public_time":"$D2022-01-06T18:26:27.413Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"63e96f00663997c7","login":"pbrockmann","name":"Patrick Brockmann","avatar_url":"https://avatars-next.observableusercontent.com/25f3e1483d611e61cc2dc87b5091004972f4ad8dbf4792cd225809597ddb2463","tier":"starter_2024"},"version":2290,"publish_version":2290,"role":null,"authored":false,"authors":[{"type":"individual","id":"68e18af682792012","login":"pbrockmann","name":"Patrick Brockmann","avatar_url":"https://avatars-next.observableusercontent.com/25f3e1483d611e61cc2dc87b5091004972f4ad8dbf4792cd225809597ddb2463","tier":null}],"members":[{"type":"individual","id":"68e18af682792012","login":"pbrockmann","name":"Patrick Brockmann","avatar_url":"https://avatars-next.observableusercontent.com/25f3e1483d611e61cc2dc87b5091004972f4ad8dbf4792cd225809597ddb2463","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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 set.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"md`

\n### Interface`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"viewof palette0 = Inputs.select(palettesArray, {\n value: palettesArray[8],\n label: \"Palette\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"viewof paletteInversed = Inputs.toggle({\n label: \"Inverse palette\",\n values: [\"-inv\", \"\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1627,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1515,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"palette = palette0 + paletteInversed","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"html`

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

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"import { rangeSlider } from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"