In leaflet, I would like to draw the largest sqare that fits inside a circle. In other words, I have the radius info and the center, but not the corner points.
How can I achive that?

geometric represantation And here is my code for that circle (cyc_163_1):

var clausis_163_cyclic =  L.circle([44.6730555555556, 6.9225], 700, {fillColor:'none', color: '#a6a6a6', weight: 6, opacity: 0.3});     
var length = 0.0065
var angle = 254    //16juillet->270-16=254
var end_x = clausis_163_cyclic.getLatLng().lng + length * Math.cos(angle * Math.PI / 180)
var end_y = clausis_163_cyclic.getLatLng().lat + length * Math.sin(angle * Math.PI / 180)
var cyc_163_1 = L.circle([end_y, end_x], 80, {fillColor:'#666666', fillOpacity: 1, color: '#666666', weight: 0.5, opacity: 1});

Normally I believe that the following code should solve the issue, but it does not:

var rectangle = L.rectangle(circle.getBounds(), {
  stroke: false,
  fill: true,
  color: '#00f',
  opacity: 0.5

2 Answers 2


The Logic is simple (a squared + b squared = c squared). So if you draw a line from the center to a corner, call it a, draw another to an adjacent corner it's b, then the line connecting both is c, a side of the square, finding it's length is easy. Normally in a planar system, you take 1/2 the distance of the side subtract it from it's x & y,to get min x,y coords and then add 1/2 the distance to the center and get the max x,y's. However your center point is in decimal degrees and your length is in meters. Since Lat distances don't change, and Lng distances change with lat.

My pseudo code :

var clausis_163_cyclic =  L.circle([44.6730555555556, 6.9225], 700, {fillColor:'none', color: 'blue', weight: 6, opacity: 0.3}); 

    var rad = 700  //meters
    theLat = 44.6730555555556;  //decimal degrees
    theLng = 6.9225;  //decimal degrees

    var sideA = Math.pow(rad, 2);
    var sideB = Math.pow(rad, 2);
    var sideC = Math.sqrt(sideA+sideB);

    theLen = sideC/2   // Meters 

    theLenAdjtoDegreesLat = ????????  //Lat is a constant.
    theLenAdjtoDegreesLng = ????????  //Lng changes with lat.

    xMin = theLng - theLenAdjtoDegreesLng;
    yMin = theLat - theLenAdjtoDegreesLat;
    xMax = theLng + theLenAdjtoDegreesLng;
    yMax = theLat + theLenAdjtoDegreesLat;

    var bounds = [[yMin,xMax], [yMax, xMax]];
    L.rectangle(bounds, {color: "#red", weight: 1}).addTo(map);

This may help with the meters degrees function: https://stackoverflow.com/questions/15258078/latitude-longitude-and-meters


You can achieve that by doing:

1.- Get bounds with given center coordinates and radius:

let radiusMts = 5500;
let bounds = L.latLng(44.6730555555556, 6.9225).toBounds(radiusMts); 

2.- Add bounds to reactangle:


Aditionally you can set a color to the rectangle:

L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);

In other words, object 'bounds' is like a rectangle, so you will have the northeast, nortwest, southeast and soutwest coordinates.

More info: https://leafletjs.com/reference-1.7.1.html#latlng

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.