Leaflet circle radius doesn't matter

Question

I'm working on an extension for a game map which displays an active map from server. The map is working and isn't from me. Important is to say that they're using simple CRS to work around the game coordinates.

Now I want to create a circle with a radius. The radius should bind to the map unit (latlng) and not to pixels, so if you zoom in the circle should have a bigger radius on screen, but relative to the world map the same radius.

So I've this code as extension for the map:

var bla = L.circle([0,0], 1000, {'color': '#ffffff'}).addTo(map);

As you can see, this is a test only. Now there should be a circle with the radius 1000 (I think it's in map "units" because the value in the docs is named as "meters"). But what I can see is only a circle but it isn't more than a dot.

If I set the radius to another size, there is no effect:

var bla = L.circle([0,0], 100000, {'color': '#ffffff'}).addTo(map);

And even a radius of 1000000000000000 doesn't matter for radius calculation. Negative radius doesn't work, too.

Have you any ideas?

I never got my example working tbh, and abandoned the project because it seems to hard to solve it (too much effort). But a few people upvoted your answer, so it might be useful for some people. — Jonniboy

Stas Parshin Stas Parshin · Accepted Answer · 2015-08-21T21:42:08

This happens when you use the 0.7 leaflet with the L.CRS.Simple projection.

They've fixed this in 1.0 beta but added a bunch of new bugs (for example - lots of leaflet.draw plugin features refuse to work with the new version)

I've managed to find 2 workarounds for this:

Option 1: Upgrading to a 1.0 beta or higher

Option 2: Since they've got an Earth projection hardcoded into the L.Circle, we can also hack the leaflet-src.js like this:

Change FROM

_getLatRadius: function () {
    return (this._mRadius / 40075017) * 360;
},

_getLngRadius: function () {
    return this._getLatRadius() / Math.cos(L.LatLng.DEG_TO_RAD * this._latlng.lat);
},

TO

_getLatRadius: function () {
    return this._mRadius;
},

_getLngRadius: function () {
    return this._mRadius;
},

Hope this helps someone

Leaflet circle radius doesn't matter

1 Answers