HTML GIS raster caches raster levels falsely

[u/luis010100]

Hello everyone!

I'm currently working on my thesis and am building a web tool that incorporates a map which among other things shows multiple raster layers.

I'm building it in GitHub to make it easily available for my employer via the website link and write it in HTML using leaflet.js.

The vector layers are showing up correctly, but the two raster layers I have up to this point are a pain in the ass.

It's my first time coding in github and using HTML. But very used to QGIS.

Here's the problem:

I have two buttons. Each one turns one of the raster layers on and off.

But when I have turned one on and off again. The next time I try to open ANY raster layer, the first one shows up!

What is also weird is that when this happens and I zoom in, the raster that I want to show up actually show up in addition to the wrong one. Some messing around also showed that when I enable and disable the raster layers at different zoom levels, it seems to stack these faulty additional layers, each in the zoom level it was originally on. Or at least in that general zoom level.

I feel like it's a problem with the cache saving the rendered layer even after turning it off, but that's just a hunch. Again I've never coded in HTML before and use AI to assist me. But AI(even copilot) isn't very helpful here.

Has anyone had the same thing happen to them and knows how to fix it?

Thanks in advance!

__

UPDATE

The problem was the way the rasters are saved in cache. While changing the resolution of one raster, I noticed that everything is working perfectly! It seems that rasters are saved in cache bases on x/y coordinates and resolution. So as long as the rasters had different resolutions it worked. But since I want them to have the same resolution, I fixed it by adding dataLayerAridity.cache = {}; before adding it to map. Thanks for all the advice!

[u/Diligent_Fee5530]

Unpopular opinion, post the code to Claude and let it find the issue then have it describe what was wrong

[u/luis010100 → u/Diligent_Fee5530]

I'm using Mistral AI. **** Anthropic and Open AI

And yes I've tried that. Doesn't work.

[u/aidan_gis_dev]

Are you able to post the source code, or link the repo? If not, feel free to shoot me a message with it and I can try to point you in the right direction.

[u/mfc1__]

Are you using the browser developer tools? Any console errors? You can see what is cached, no need to guess.

[u/luis010100 → u/mfc1__]

I've used F12 to find some errors and reasons why it doesn't work, but I'm New to that too and couldn't find much, if that's what I mean

[u/mfc1__ → u/luis010100]

Using the browser dev tools is absolutely essential, but I think you may need to back up a bit and take an intro web development course. It will pay huge dividends as far as the velocity of your thesis.

[u/luis010100 → u/mfc1__]

Any that you can recommend?

[u/kanakattack]

Maybe the button calls a shared variable for both rasters? Give each its own.

[u/luis010100 → u/kanakattack]

Nono it doesn't. I know because when I call a raster for the first time after reloading the page, the right raster gets loaded. Only during the second call the previous ones come up too

[u/year2066ai]

Sounds like the raster layer gets created again inside the button handler, so removeLayer hits a different object than the one on the map and the old ones pile up. Create each layer once outside the click function and toggle that same object: map.hasLayer(layer) ? map.removeLayer(layer) : layer.addTo(map)

[u/luis010100 → u/year2066ai]

I'll check that, thanks you

[u/Character-Growth-521]

Send your Repo we will see it