Add high zoom level program is crashing

[burki505]

I am updating my coords from the socket connection and drawing polyline regards to these coordinates. Whenever I give size as 50px and frequency as 500 px it works okay in the low zoom level. However when I zoom in UI crashes and I am getting blank page. Example polyline code is like this: L.Polyline([[0, 0]], { color: 'black' }).arrowheads({ size: '50px', frequency: '500px', } My default max zoom level on leaflet map is 20

[slutske22]

I'm going to need more information about what is happening to be able to tell if this is a bug with this plugin, or with your code.

When the page crashes, are there errors in the console?

Can you create a reproducible example in a codesandbox?

[burki505]

I am sorry I can't share the code because of the privacy.Problem is whenever I zoom into the polylines with arrowheads, My program is slowing down and finally crashing. It only gives me 'Maximum stack sizes exceed' error in the console. As I provided above, I think the issue is something with the frequency.

[slutske22]

Yeah sorry without more detail than this I can't really help you

[derett]

@slutske22 Here is a sample code for the case defined by @burki505. Demo. It starts lagging with higher zoom levels than 14.

[slutske22]

@derett thanks for the reproducible example.

The performance issue is happening because to do its calculations, lealfet-arrowheads sets noClip to true in order to calculate distances correctly. Due to this, the further you zoom in, you are drawing more and more offscreen arrowheads. Even though they aren't on screen, because we are not clipping the parent polyline, the browser is still calculating them.

Quick fix is to manually set noClip to false again after creating the parent polyline:

  const prevRoute = L.polyline([sourceCoord, markerCoord], {
    color: prevColor
  })
    .arrowheads(arrowheadsOptions)
    .addTo(map);

  prevRoute.options.noClip = false;

  const remaRoute = L.polyline([markerCoord, destCoord], {
    color: remaColor
  })
    .arrowheads(arrowheadsOptions)
    .addTo(map);

  remaRoute.options.noClip = false;

It has to be done after the fact or noClip will get overriden by the internal leaflet-arrowheads code. It seems that when using the px option for frequency, noClip should indeed be false. I don't have time to push a change to the library, but the above fix seems to solve the problem.

[derett]

@slutske22 Thank you for your quick response. Your suggestion works perfectly, even with increasing polylines to 100 it works seamless. Thank you