CODEWITHSUNDEEP
javascriptleafletlatitude-longitudeangular-leaflet-directive
user1472709
user1472709

Reputation: 133

leaflet square given centre and square width

On Leaflet I can create a new circle easily given the centre and the radius:

// Circle
var radius = 500; // [metres]
var circleLocation = new L.LatLng(centreLat, centreLon);
var circleOptions = {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
};
var circle = new L.Circle(circleLocation, radius, circleOptions);
map.addLayer(circle);

The circle above is created and drawn without problems, so it is all.

However, if I wanted now to create and draw a rectangle that which bounds the circle, it does not work. Here is what I did:

// Rectangle
var halfside = radius;   // It was 500 metres as reported above
// convert from latlng to a point (<-- I think the problem is here!)
var centre_point = map.latLngToContainerPoint([newCentreLat, newCentreLon]);
// Compute SouthWest and NorthEast points
var sw_point = L.point([centre_point.x - halfside, centre_point.y - halfside]);
var ne_point = L.point([centre_point.x + halfside, centre_point.y + halfside]);
// Convert the obtained points to latlng
var sw_LatLng = map.containerPointToLatLng(sw_point);
var ne_LatLng = map.containerPointToLatLng(ne_point);
// Create bound
var bounds = [sw_LatLng, ne_LatLng];
var rectangleOptions = {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
};
var rectangle = L.rectangle(bounds, rectangleOptions);
map.addLayer(rectangle);

The size of the rectangle that I obtain has nothing to do with 500 metres. Also, it looks like the size of the rectangle depends on the zoom level the map is. None of these problems arose for the circle.

I suspect the way I transform the latitude/longitude to point and viceversa is wrong.

Upvotes: 0

Views: 5004

Answers (3)

Štefan Schindler
Štefan Schindler

Reputation: 187

You can also use the LatLng.toBounds(<Number> sizeInMeters) method.

According to documentation:

Returns a new LatLngBounds object in which each boundary is sizeInMeters/2 meters apart from the LatLng.

So to create rectangle with size defined in meters you could use:

var rectangle = new L.Rectangle(L.latLng(0,0).toBounds(500)).addTo(map);

Where the 500 meters would needed to be adjusted to encompass the circle of radius 500 (which is 1000 m in diameter).

Upvotes: 0

faisal
faisal

Reputation: 99

I was getting "Cannot read property 'layerPointToLatLng' of undefined" error, So I made some changes to iH8's answer.

var grp=L.featureGroup().addTo(map);
var circle=L.circle([0,0],{radius:<circle radius>}).addTo(grp);
L.rectangle(circle.getBounds()).addTo(this.bufferMap);
map.removeLayer(grp);

Upvotes: 1

iH8
iH8

Reputation: 28688

Just use the getBounds method that L.Circle inherits from L.Path:

Returns the LatLngBounds of the path.

http://leafletjs.com/reference.html#path-getbounds

var circle = new L.Circle([0,0], 500).addTo(map);

var rectangle = new L.Rectangle(circle.getBounds()).addTo(map);

Working example on Plunker: http://plnkr.co/edit/n55xLOIohNMY6sVA3GLT?p=preview

Upvotes: 6

Related Questions