leaflet circle drawing / editing issue

Question

I am working on leaflet for the very first time and facing the issue with drawing circles and editing (changing location of circle).

The problems I am facing are :-

1. Editing (moving) circle from one location to another changes its radius.
   Note: Pls try to create circle on top of map in given fiddle and then move it to the bottom by clicking edit button.

2. If I create circle on top section of map it works fine. But If I create circle on bottom of map it only prints a single DOT on map. I checked few examples and it works fine everywhere.
   Here is the working example where circle creation and moving circle is completely fine.

I am not using the geographic map like google maps. I am using and static image as it is my project requirement.

Here is the fiddle of my code.

Just using following code to enable drawing circle :

enabled : this.options.circle,
handler : new L.Draw.Circle(map,this.options.circle),
title : L.drawLocal.draw.toolbar.buttons.circle

Answer 1

What you're seeing is distortion in distance inherent in the mercator projection (and the Google Mercator projection based off it that is inherent to most online maps). Because your map starts at zoom 1, dragging the circle marker north/south will cause a lot of distortion.

So, rather than georeference your image to a global bounding box, try georeferencing it to something much smaller. In your case, your are adding your image overlay relative to the maxZoom, so by increasing maxZoom, your image will be overlayed over a smaller area of the globe, and you will see less (or no) distortions across latitudes.

I changed the maxZoom from 4 to 14, and the result looked like it worked well: fiddle here: var w = 553, h = 329, url = 'https://kathleenmillar.files.wordpress.com/2012/10/picture2.png';

    var map = L.map('map', {
        minZoom : 10,
        maxZoom : 14,
        center : [ w / 2, h / 2 ],
        zoom : 11,
        crs : L.CRS.Simple

    });

    // calculate the edges of the image, in coordinate space
    var southWest = map.unproject([ 0, h ], map.getMaxZoom() - 3);
    var northEast = map.unproject([ w, 0 ], map.getMaxZoom() - 3);
    var bounds = new L.LatLngBounds(southWest, northEast);