Whenever I move the view on my leaflet map, polylines whose centers are no longer in view are removed. I have a polyline with a large stroke size (~500px) that is not visible even when part of it should be. This same problem can also be observed when dragging the map, polylines are not redrawn until the drag ends. Example shown below.
I have tried adding a listener for the leaflet remove event but that is not triggering. I also tried overriding the onRemove method for the polyline but that did not work. For now to get around this I have made the map bigger than the screen, but that causes some slowdown.
I assume it is a performance feature to remove non-visible polylines from the map. Does anyone know if that this can be disabled?
Advertisement
Answer
I needed to set L.Path.CLIP_PADDING.
Found by looking through closed issues on the github repo. https://github.com/Leaflet/Leaflet/issues/2814.
Also in the docs: http://leafletjs.com/reference.html#path-clip_padding
“How much to extend the clip area around the map view (relative to its size, e.g. 0.5 is half the screen in each direction). Smaller values mean that you will see clipped ends of paths while you’re dragging the map, and bigger values decrease drawing performance.”