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); }); }