31:Ta6a,map = { // The approach for first defining and yeilding the container is [from Tom MacWright](https://observablehq.com/@tmcw/leaflet). Tom does it a bit differently (more responsively) [container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });]. I hard code this in HTML b/c I am not super adept using the DOM API. const container = html`

@JWasilGeo | ' + '2020 global land cover map (produced by Impact Observatory for Esri) | ' + 'Learn more at https://github.com/jwasilgeo/leaflet-experiments | ' + map.attributionControl.options.prefix ); // before creating an instance of the layer and adding it to the map, first get the raster attribute table // from the ImageServer because we need to assign RGB colors to land cover pixel categories fetch("https://tiledimageservices.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/Esri_2020_Land_Cover_V2/ImageServer/rasterattributetable?f=json", { method: 'GET' }) .then(response => response.json()) .then(rasterAttributeTable => { // create an instance of the custom "Lerc8bitColorLayer" defined above const landcoverLayer = new Lerc8bitColorLayer({ url: 'https://tiledimageservices.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/Esri_2020_Land_Cover_V2/ImageServer', rasterAttributeTable: rasterAttributeTable, tileSize: 256 }); // and finally add it to the map landcoverLayer.addTo(map); }) .catch(error => { console.error('Error loading ImageServer raster attribute table', error); }); }32:Tc98,Lerc8bitColorLayer = L.GridLayer.extend({ createTile: function (coords, done) { let tileError; let tile = L.DomUtil.create('canvas', 'leaflet-tile'); tile.width = this.options.tileSize; tile.height = this.options.tileSize; const tileUrl = this.options.url + '/tile/' + coords.z + '/' + coords.y + '/' + coords.x; fetch(tileUrl, { "method": "GET", }) .then(response => response.arrayBuffer()) .then(arrayBuffer => { try { // decode the response's arrayBuffer (Lerc global comes from an imported script) tile.decodedPixels = Lerc.decode(arrayBuffer); // display newly decoded pixel data as canvas context image data this.draw.call(this, tile); } catch (error) { console.error(error); // displaying error text in the canvas tile is for debugging/demo purposes // we could instead call `this.draw.call(this, tile);` to bring less visual attention to any errors this.drawError(tile); } done(tileError, tile); }) .catch(error => { console.error(error); // displaying error text in the canvas tile is for debugging/demo purposes // we could instead call `this.draw.call(this, tile);` to bring less visual attention to any errors this.drawError(tile); done(tileError, tile); }); return tile; }, draw: function (tile) { const width = tile.decodedPixels.width; const height = tile.decodedPixels.height; const pixels = tile.decodedPixels.pixels[0]; // get pixels from the first band (only 1 band when 8bit RGB) const mask = tile.decodedPixels.maskData; const rasterAttributeTableFeatures = this.options.rasterAttributeTable.features; // write new canvas context image data by working with the decoded pixel array and mask array const ctx = tile.getContext('2d'); const imageData = ctx.createImageData(width, height); const data = imageData.data; for (let i = 0; i < width * height; i++) { // look up RGB colormap attributes in the raster attribute table for the decoded pixel value const pixelValue = pixels[i]; const attributes = rasterAttributeTableFeatures.find(info => info.attributes.Value === pixelValue).attributes; data[i * 4] = attributes.Red; data[i * 4 + 1] = attributes.Green; data[i * 4 + 2] = attributes.Blue; // make the pixel transparent when either missing data exists for the decoded mask value // or for this particular ImageServer when the ClassName raster attribute is "No Data" if ((mask && !mask[i]) || attributes.ClassName === "No Data") { data[i * 4 + 3] = 0; } else { data[i * 4 + 3] = 255; } } ctx.putImageData(imageData, 0, 0); }, drawError: function (tile) { const width = tile.width; const height = tile.height; const ctx = tile.getContext('2d'); ctx.font = 'italic 12px sans-serif'; ctx.fillStyle = 'darkred'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText( 'Error decoding data or tile may not exist here.', width / 2, height / 2, width - 10 ); } });33:[] 2f:{"title":"Esri 2020 Land Cover","cells":[{"id":0,"value":"md`# Esri 2020 Land Cover`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`\nThe [code below](https://github.com/jwasilgeo/leaflet-experiments#lerc-imagery-land-cover-layer) was written by [Jacob Wasilkowski](https://observablehq.com/@jwasilgeo/interpolating-spatial-shapes), who graciously and generously responded to my [help request](https://community.esri.com/t5/esri-leaflet-questions/how-to-diagnose-error-rendering-esri-2020-land/m-p/1081727#M431). Based on the \\`GridLayer\\` approach pioneered by [@jgravois](https://github.com/jgravois). My contribution is rendering the map into Observable... building on the backs of giants.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`\nGlobal land use/land cover (LULC) map for the year 2020 at 10 meter resolution by the [Esri Landscape Team](https://www.arcgis.com/home/user.html?user=esri_landscape2).\n\nThe map is derived from ESA Sentinel-2 imagery at 10m resolution. It is a composite of LULC predictions for 10 classes throughout the year in order to generate a representative snapshot of 2020.\n\n[Read more.](https://www.arcgis.com/home/item.html?id=d6642f8a4f6d4685a24ae2dc0c73d4ac#)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"Lerc = require('lerc@2.0.0/LercDecode.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"esriLeaflet = require('https://unpkg.com/esri-leaflet@2.5.3/dist/esri-leaflet.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"// Thanks to @mootari for this appoach to requiring Leaflet. It renders the CSS together with the JavaScript, which allows us to embed maps more gracefully.\nL = {\n const L = require(\"leaflet@1.7.1\");\n const n = html``;\n document.head.appendChild(n);\n invalidation.then(() => n.remove());\n return L;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}