CODEWITHSUNDEEP
javascriptdictionaryleaflet
Jonniboy
Jonniboy

Reputation: 136

Leaflet circle radius doesn't matter

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?

Upvotes: 2

Views: 2344

Answers (2)

Smilo90
Smilo90

Reputation: 23

I have had the same problem, but Stas' answer doesn't work for me (now using Leaflet 1.9).

I managed to make it work by forcing _updateCircle to take my parameter. In leaflet-src.js I changed this:

_updateCircle: function(t) {
                var e = t._point,
                    i = Math.max(Math.round(t._radius), 1),
                    n = "a" + i + "," + (Math.max(Math.round(t._radiusY), 1) || i) + " 0 1,0 ",
                    e = t._empty() ? "M0 0" : "M" + (e.x - i) + "," + e.y + n + 2 * i + ",0 " + n + 2 * -i + ",0 ";
                this._setPath(t, e)
            },

To this:

_updateCircle: function(t) {
                /******/
                t._radius = t._mRadius
                t._radiusY =  t._mRadius
                /******/
                var e = t._point,
                    i = Math.max(Math.round(t._radius), 1),
                    n = "a" + i + "," + (Math.max(Math.round(t._radiusY), 1) || i) + " 0 1,0 ",
                    e = t._empty() ? "M0 0" : "M" + (e.x - i) + "," + e.y + n + 2 * i + ",0 " + n + 2 * -i + ",0 ";
                this._setPath(t, e)
            },

You lose the possibility to stretch the circle on its Y axis (_radiusY is always equal to _radius) but it is a rather rare feature to use (and frankly I wouldn't know how to control it anyway).

Upvotes: 0

Stas Parshin
Stas Parshin

Reputation: 1673

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

Upvotes: 4

Related Questions