Leaflet raster layers disappear after deployment in a Quarto Closeread Document

[flor14]

Hello,

I have been trying to get a Leaflet map to add raster layers based on crTriggerIndex. My code works perfectly locally 🎉, but the raster layers disappear once I deploy it.

Based on my understanding, there are two potential areas for debugging:

1. it could be a problem with how the Quarto Closeread deployment environment, or
2. my JavaScript code might fail in the deployment environment context due to factors I haven't considered. Disclaimer: I'm improving my skills in JavaScript.

From testing, I think the most likely issue is that the .tif file isn't being included in the deployment. I tried adding it in different ways, but it didn't work.

I believe that since the issue is with the deployment, the guidance you can provide is more conceptual. It is probably my lack of understanding of how deployment works that prevents me from capturing the error. If you think something like this should work, I can create a shorter reproducible example.

For now, I resolved this by using images (https://florencia.quarto.pub/mobility-matters-beta/), but I would like to be able to use code. Do you have any idea what the error might be, even if you can't provide a working version? Thank you!

Nevertheless, here is the .tif file mentioned in the code and here is the code:

L = require("[email protected]");
GeoTIFF = require('[email protected]');
parseGeoraster = require("[email protected]");
GeoRasterLayer = require("[email protected]");
html`<link href='${resolve('[email protected]/dist/leaflet.css')}' rel='stylesheet' />`;

container = DOM.element('div', { style: `width:${width/1.5}px;height:${width / 2}px` });
yield container;

map = L.map(container, {
  center: [-34.6037, -58.3816],
  zoom: 10,
  scrollWheelZoom: false,
});

// Functions to assign colors to pixels
function getColor(values) {
  if (values < -50) return "#0000FF";
  if (values < -40) return "#0040FF";
  if (values < -30) return "#0080FF";
  if (values < -20) return "#00BFFF";
  if (values < -10) return "#00FFFF";
  if (values < 1 && values > -1) return "#FFFFFF"; // white
  if (values > 10) return "#FFCC00";
  if (values > 20) return "#FF9900";
  if (values > 30) return "#FF6600";
  if (values > 40) return "#FF3300";
  if (values > 50) return "#FF0000";
}

function getCold(values) {
  if (values < -50) return "#0000FF";
  if (values < -40) return "#0040FF";
  if (values < -30) return "#0080FF";
  if (values < -20) return "#00BFFF";
  if (values < -10) return "#00FFFF";
  if (values > -1) return "#FFFFFF00"; // transparent
}


function mapAmba(lat, lon, zoom, opa, basemap, colorfun){

// Leaflet map
L.tileLayer(basemap, {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


// File
const url_to_geotiff_file = 'amba_pc_2020-05-13_16.tif';

{
  fetch(url_to_geotiff_file)
    .then(response => response.arrayBuffer())
    .then(arrayBuffer => {
      parseGeoraster(arrayBuffer).then(georaster => {
        var layer = new GeoRasterLayer({
          georaster: georaster,
          opacity: opa,
          pixelValuesToColorFn: colorfun,
          resolution: 64
        });
        layer.addTo(map);

        // Fit the map bounds to the raster
        map.setView([lat, lon], zoom);
      });
    }) 
}}

// Change map with crTriggerIndex
{
if (crTriggerIndex === 2) {
  mapAmba(-34.6037, -58.3816, 10, 0, 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', getColor);
} else if (crTriggerIndex === 3) {
  mapAmba(-34.6037, -58.3816, 10, 0.7, 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', getColor);
}  else if (crTriggerIndex === 4) {
  mapAmba(-34.6037, -58.3816, 10, 0.7, 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', getCold);
} else if (crTriggerIndex === 5) {
  mapAmba(-34.5912, -58.3717, 15, 0.7, 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', getCold);
} else {
  mapAmba(-34.6037, -58.3816, 10, 0.2, 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', getCold);
} 
}

[jimjam-slam]

Hi @flor14! I'm so sorry for the very slow response on this one; I'd composed a reply and then inadvertently not sent it 😮‍💨

If your code is running locally but not when deployed, then I agree that a missing file is the most likely culprit. You can confirm this by navigating to a deployed version with the offending TIF file, opening the browser tools (the method varies by browser and OS, but you can usually right-click the page and choose Inspect to open it up), then going to the Network tab. You might need to reload the page once that tab's open if there's nothing there.

If you scroll through this table to find the TIF file, it should be visually marked if there's a problem loading it. If you then click on it and check the Headers tab in the pop-up, under Response you should see a code. A three-digit code starting with 2 or 3 usually indicates a success, while a code starting 4 or 5 indicates failure (for example, 404 means the file wasn't found).

If the TIF file indeed isn't loading, one reason could be that Quarto didn't realise it needs to be copied when you rendered the project. I often have this problem when working with OJS code — Quarto's very good at noticing things like images in Markdown, but I find if often misses things like datasets used in OJS.

You can manually add the TIF file in the document metadata using format.closeread-html.resources, or by adding it to the project.resources in _quarto.yml.

Try adding the path to the TIF file in one (or both) of those places — it should appear in the same place in _site (or whatever folder name you have set as the place your rendered site goes).

Let me know how you go!