Draw a circle of constant size for all zoom levels leaflet.js

Question

I am trying to implement something like this using leaflet.js, where the size of the circle remains the same on varying zoom levels. For example, if I want to depict the populations in different US counties, I would have circles of different radius represent different ranges of populations. They may overlap when zoomed out completely, but once we start zooming in, they tend to separate. So is there a way to do this using leaflet.js. I saw an issue raised, but I wasn't able to follow if it was fixed or not. Any help would be deeply appreciated.

Answer 1

For circles, just use circleMarker instead of circle: http://leafletjs.com/reference.html#circlemarker

Answer 2

I think you're gonna want to do something like this:

var map = L.map('map').setView([51.505, -0.09], 13);

var circle = L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);

var myZoom = {
  start:  map.getZoom(),
  end: map.getZoom()
};

map.on('zoomstart', function(e) {
   myZoom.start = map.getZoom();
});

map.on('zoomend', function(e) {
    myZoom.end = map.getZoom();
    var diff = myZoom.start - myZoom.end;
    if (diff > 0) {
        circle.setRadius(circle.getRadius() * 2);
    } else if (diff < 0) {
        circle.setRadius(circle.getRadius() / 2);
    }
});

What I've done is simply initialize a map and a circle and created event listeners for the zoomstart and zoomend events. There's a myZoom object that records the zoom levels so you can find out whether or not the final zoom is in or out by simple subtraction. In the zoomEnd listener, you check that and change the circle radius based on whether the difference is greater or lesser than 0. We of course do nothing when it's 0. This is where I leave you to get more sophisticated with your results. But, I think this demonstrates how to do it.