I am using Mapbox with leaflet. I have drawn a simple polygon with a hole inside that polygon. I have done this using L.polygon and passing an array of points inside it and another array in reverse direction creating a hole as mentioned in the API docs of leaflet here. the output is as shown in the image belowenter image description here

When we pan the map, I don't want that circle to move from it's place on the screen and hence, on panning of map i am redrawing the circle on the center of the map. But the problem is, when i pan the map, the circle gets distorted. I know, map tiles needs time to load but the circle is also getting loaded and hence not giving clear view, as shown in the images

at start of the panning

enter image description here

and when i keep on dragging

enter image description here

Then once i finish dragging, the circle is normal again (i.e the overlap of map tiles over the circle goes away). This is giving very bad experience to the user note: I am showing the hole as kilometers within reach, considering the user is at the centre of the circle

1 Answer 1


This is probably due to the clipping of polygons by leaflet. A solution is to have a non moving hole using CSS in an overlay layer (not managed by leaflet). You still have to adjust the diameter of the circle during the drag depending on the location, but you will avoid this behaviour.

Making a circle hole in css: https://stackoverflow.com/questions/8286550/transparent-circle-using-only-css

Making an overlay: https://stackoverflow.com/questions/17537496/bootstrap-row-over-leaflet

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.