I have a Leaflet application that uses circles. It works fine when I don't put the script in my HTML template (I use SingApp template), but when I integrate the script with the template, the circle does not appear on top of my map.

This is how it looks when I use it without the HTML template (SingApp template):

enter image description here

And here I put the script into the template:

enter image description here

I've checked the HTML element, there is a circle SVG element in the HTML document.

<svg class="leaflet-zoom-animated" width="1902" height="406" viewBox="-301 -64 1902 406" style="transform: translate3d(-301px, -64px, 0px);"><g><path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="red" stroke-opacity="0.5" stroke-width="5" fill="#f03" fill-opacity="0.3" class="leaflet-clickable" d="M434,140A52,52,0,1,1,433.9,140 z"></path></g></svg>

but still, circle does not appear on top of my map. I think there is conflict with template, but i dont know how to deal with it.

  • 1
    Can you add more of the code you are using, and perhaps how your directory is structured. Commented Dec 2, 2015 at 4:48

2 Answers 2


I ran into the exactly the same problem today. It was an absolute devil to debug, but in my instance I had some styles on the svg element - specifically a height:100% and width:100% that was causing them to override the default height/width of the element itself and prevented them from showing.


When you create the map, try to specify the following option: preferCanvas: true In my case it solved the problem.

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.