CODEWITHSUNDEEP
leafletmapbox
Adam Niles-Crane Walker
Adam Niles-Crane Walker

Reputation: 427

Leaflet Circle radius changing dependant on y/lng coords

I am using mapbox/leaflet to display a picture of a human body rather than a regular map.

I am using leaflet draw and I need to be able to create a circle and move it around while maintaining its radius. However, when I move it towards the bottom of the map/screen, the size increases exponentialy. I want it to stay the same size.

I assume it's something to do with projection or CRS but I'm not sure what to do to stop it.

My code is : 

    var mapMinZoom = 0;
    var mapMaxZoom = 4;
    var map = L.map('map', {
        maxZoom: mapMaxZoom,
        minZoom: mapMinZoom,
        crs: L.CRS.Simple,
        noWrap: true,
        continuousWorld: true
    }).setView([0, 0], mapMaxZoom);

    var mapBounds = new L.LatLngBounds(
        map.unproject([0, 3840], mapMaxZoom),
        map.unproject([4096, 0], mapMaxZoom));

    map.fitBounds(mapBounds);
    L.tileLayer('/tiles/{z}/{x}/{y}.png', {
        minZoom: mapMinZoom, maxZoom: mapMaxZoom,
        bounds: mapBounds,
        attribution: 'Rendered with <a href="http://www.maptiler.com/">MapTiler</a>',
        noWrap: true,
        continuousWorld: true
    }).addTo(map);

     var touches;

     var featureGroup = L.featureGroup().addTo(map);

     var drawControl = new L.Control.Draw({
         edit: {
             featureGroup: featureGroup
         }
     }).addTo(map);

    map.on('draw:created', function (e) {
        featureGroup.addLayer(e.layer);
    });

Any ideas? I don't need to use leaflet draw, just the L.circle would do, but it has the same issue.

Gif of issue here :

enter image description here

Upvotes: 2

Views: 1079

Answers (1)

Adam Niles-Crane Walker
Adam Niles-Crane Walker

Reputation: 427

Turns out there are a load of todos in the leaflet 0.7 code... including this little gem :

// TODO Earth hardcoded, move into projection code!

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

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

Updated to 0.8Dev and it has all been fixed!

Upvotes: 5

Related Questions