Angular Leaflet is loading custom icon multiple times-CodePudding

I am using Leaflet and Angular (with @asymmetrik/ngx-leaflet ^14.0.1 and leaflet ^1.9.2) and I have an issue with custom marker icons.

On the map, I have approximately 200-400 markers, which are "dynamic" and update each 15 s. (representing vehicles on the map). When the user clicks on the marker, a new icon is set to let the user know, what vehicle is selected. There are only 3 types of selected icon/marker.

When users click on the marker, I see it in Google Chrome Dev. Tools network tab that this image (icon) is loaded, which is fine then I click again, and nothing is shown in the network tab, because the image was cached, which is also fine. But when I click again on the same marker (same icon, therefore same image) after like 10 s., which was already cached, I see that it's loaded again in the network tab. And this is causing problems because there is always a small lag when loading images from the network (and also on slower devices/slower internet speed this will produce blank spots for a while).

I tried to do something like "asset warmup" where I preloaded these three images right after the map is ready, but the loading of the images/icons is still there after approx. 10 s. after warmup. Here is the asset warmup code

  private warmMarkerAssets(): void {
    const selectedMarkerIcons = ["bus/selected_bus.png", "train/selected_train.png", "trolleybus/selected_trolleybus.png"]
    selectedMarkerIcons.forEach((iconPath) => {
      const tempMarker = marker(
        latLng(0, 0),
        { icon: icon({
          iconUrl: this.assetMarkerPath   iconPath,
          iconSize: [40, 40],
          iconAnchor: [20, 20],
        })}
      )
      this.map.addLayer(tempMarker)
      this.map.removeLayer(tempMarker)
    })
  }

Do you have any advice on how to solve this or maybe you already encountered this issue before?

Thanks a lot

CodePudding user response：

There does not seem to be any obvious issue with cache control from your screenshot.

it's loaded again in the network tab

Even when served from cache, a "request" may appear in browser network tab, see Check whether network response is coming from server or Chrome cache

Finally, also make sure the Dev Tools "disable cache" option is unchecked.

If you still have actual server requests, then it would require much more detailed investigation, which may be impractical here, unless you are able to share a live reproduction example.

But a quite easy workaround would be to serve your static image as Data URL (with Base64 encoding), at least for the ones that appear on click. This should get rid entirely of any network request for these resources.

Note that if you have a few hundreds of Markers permanently displayed with 1 image, you may prefer keeping that image the normal way, as Data URL/Base64 performs worse when displayed simultaneously so many times, see Leaflet/Leaflet#4968.

BTW, as for "warmup" (preloading image asset content), there is no need to build a Leaflet Marker. See e.g. Preloading images with JavaScript