I have a leaflet map with lots of little circles to mark particular points. When zoomed in, they look great. I can see both the orange fill and the black outline.

enter image description here

When zoomed out, however, I can only see the outline.

enter image description here

Does Leaflet provide a good way to always have both the outline and fill visible, no matter the zoom? I don't want to dynamically resize the layers on a zoom event (a la "change width of outline for leaflet map depending on zoomlevel") because that adds a ton of complexity to my code (there are tons of these circles, zoom changes for a lot of different reasons, etc.). But I can, if that's the only way.

Here's the code where I initialize the layers

  const options = {
    color: 'black',
    fillColor: '#FF802B',
    fill: true,
    fillOpacity: 0.8,
    radius: 100,
    weight: 10,
  item.layer = L.circle([lat, lng], options)

1 Answer 1


Use circleMarkers instead of circles. They stay the same size when you zoom in or out as they are measured in screen pixals instead of meters on the ground. Here is an example. http://www.gistechsolutions.com/leaflet/DEMO/Drink/Drink.html

L.circleMarker(latlng, { radius:6, opacity: .5, color: "#000", fillColor: 'red', fillOpacity: 0.8 });

  • This helped a lot! In the end, I also had to adjust their size a bit depending on zoom, because I really wanted them to be a bit bigger when zoomed in, but I was able to speed up and contain things a lot by switching to circlemarkers
    – Teddy Ward
    Jan 15, 2018 at 19:32

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.