polyline and circle radius discrepancy

[Dr Georgle]

i wanted to create a circle whose radius was a given distance from a given point.  the user starts the process with an initial click on some locaion.  that creates 2 little markers
(one on top of the other, the bottom one being a kind of anchor), and a polyline as a kind of guide between the 2 markers.  the user then drags the marker on top x number
of miles or meters.  the distance is shown in a little label.  the calculation is based on leaflet's built-in distanceTo().  the user would stop dragging when she reaches however
many miles or kms she wanted to go.  when the dragging stops, a circle appears with a radius representing (in meters) the distance between the anchor and the point at which the dragging stops. 

since the polyline's length and the circle's radius are both calculated using the same start position (anchor) and point at which the dragging stops (e.target.getLatLng()), i would
have thought that the polyline and the circle would "line up", if that's the correct term.  what i'm seeing, howerver, is that they seldom do.  the polyline and little marker might be shorter than the radius of the circle, they might be longer (sometimes by a lot) and once in a while the polyline and the radius match up perfectly. 

while it might be tempting to say that the bigger the circle the more likely a mismatch will be, it isn't true.  and at one time i thought moving to a different latitude might be responsible,
but that isn't always the case.  the enclosed snippet should plug into any basic map scenario and show what i'm talking about.

 

click and release on the map to mark the anchor, then drag the marker somewhere.  stop dragging and release.  you can start dragging again to get a new circle.  (note: you have to click and release the first time, otherwise the map still gets dragged around.  i didn't add thact code to the snippet.  i also didn't show the label reporting the actual distance.)

as an example: click on paris, then drag to morocco, then drag to new york, then drag to panama.  you should see the line and the draggable marker on a different plane than the circle.  when i try it, the circle is way beyond panama.  if you simply go directly from paris to panama, the result is the same.

am i incorrect in thinking the marker should always be on the same place as the circle's radius?  is it because the circle's radius property is an assigne distance in meters, while the distance between to points on the globe uses a formula involving allowances for changes in latitude and longitude?  the thing is: the fomula gives a result in meters, so once i have that result why is it that assigning that result to the circle's radius gives an unexpected (by me) result? 

thanks in advance for any guidance.

-go

   function circle_vs_line() {
      var anchor = null;
      var circle, dline;

      map.once('mousedown', function(e) {
         if (anchor == null) {    // first time
            anchor = L.latLng( e.latlng );   // marks the anchor
            var lilm1 = L.marker( anchor, { icon: L.icon( { iconUrl:"icons/via.png", iconSize:[11,11], iconAnchor: [6,11] }), title:'click to clear' } );
            var lilm2 = L.marker( anchor, { icon: L.icon( { iconUrl:"icons/via.png",iconSize:[11,11],iconAnchor: [6,11]}),draggable:true, title: 'drag me'});
            dline = L.polyline([anchor,e.latlng], {color: 'blue',weight:2});

            lilm1.addTo(map);
            lilm2.addTo(map);
            dline.addTo(map);

            lilm2.on('drag', function(e) {
                 dline.setLatLngs([anchor,e.target.getLatLng()]);       
            });

            lilm2.on('dragend', function(e) {
              if (map.hasLayer( circle ))
                 map.removeLayer( circle );
             
              circle = L.circle( anchor, anchor.distanceTo( e.target.getLatLng()), {color:'red',weight:2,fillColor:'red'} );
              circle.addTo(map);
            });
         }
         else
            return;
      });   // set clicking on map to create points for making the box
   }