how to load faster or load a static image while loading map

I also had a dataset with a lot of data points, which were better served as an image. So I created a PNG in QGIS and overlaid it on my map, as you can see here: https://arst.dk/luft

I inserted it with this JavaScript (there are two files here, also the legend in the upper right corner):

if (window.location.pathname == '/luft') {
  map.setView([56.2, 11.65], 8);
  var pm25Url = '/themes/custom/arst_2024/assets/pm25.png', imageBounds = [[54.443459480, 8.018099313], [57.761847116, 15.575382821]];
  var pm25RangeUrl = '/themes/custom/arst_2024/assets/pm25-range.png', imageBoundsRange = [[56.2, 12.6], [57.2, 13.5]];
  var imageOverlays = L.layerGroup();
  L.imageOverlay(pm25Url, imageBounds).setOpacity(0.6).addTo(imageOverlays);
  L.imageOverlay(pm25RangeUrl, imageBoundsRange).setOpacity(1.0).addTo(imageOverlays);
  imageOverlays.addTo(map);
}

hi can you tell me which file you put that code above in ? and also how can i load the image only while the actual map is loading? then take away the image?

I put it into a JavaScript file in my theme. I don't know how to remove it, since I don't do that.

Automatically closed - issue fixed for 2 weeks with no activity.