Can't view fill of small leaflet layer when zoomed out

Question

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.

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

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)

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 });