Coordinates of Leaflet.Draw rectangle

Question

Is it possible to get the coordinates of the rectangle on mouseClick, so I have all the corners of the rectangle?

score 19 · Accepted Answer · answered Mar 07 '13 at 12:09

19

See event object (http://leafletjs.com/reference.html#event-objects):

var map = L.map('map').setView([53.902257, 27.561640], 13);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

var bounds = [[53.912257, 27.581640], [53.902257, 27.561640]];

var rect = L.rectangle(bounds, {color: 'blue', weight: 1}).on('click', function (e) {
    // There event is event object
    // there e.type === 'click'
    // there e.lanlng === L.LatLng on map
    // there e.target.getLatLngs() - your rectangle coordinates
    // but e.target !== rect
    console.info(e);
}).addTo(map);

Use e.target.getLatLngs().

answered Mar 07 '13 at 12:09

tbicr

24,790
12
81
106

3

Please show the bounds semantic, my input is `{ne:{lat: -23.5601806640625lon: -46.64794921875}, sw:{lat: -23.565673828125,lon: -46.658935546875}}`. – Peter Krauss Dec 20 '18 at 10:16
1

Thank you. This helped me years later :) – Maile Thiesen Dec 30 '20 at 05:44
A nice little snippet when I was trying some `mapBounds.extend()`. Just draw a different box for each new set of bounds & see how the fit to the map. Thanks, +1 – Mawg says reinstate Monica Apr 05 '21 at 18:57

score 14 · Answer 2 · answered Aug 01 '14 at 14:08

14

Leaflet.draw plugin uses standard Leaflet's L.Rectangle.

Leaflet's rectangle extends Polygon. Polygon extends Polyline.

Therefore, in order to get the coordinates of the Leaflet.draw's rectangle you can use Polyline's method getLatLngs() that returns an array of the points in the path.

Example:

var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

map.on('draw:created', function (e) {

    var type = e.layerType,
        layer = e.layer;

    if (type === 'rectangle') {
        layer.on('mouseover', function() {
            alert(layer.getLatLngs());    
        });
    }

    drawnItems.addLayer(layer);
});

answered Aug 01 '14 at 14:08

martynas

12,120
3
55
60

Do you know why layer.toGeoJSON().geometry.coordinates will add another coordinate. – Spir Jul 07 '15 at 08:13
1

@Spir: layer.getLatLngs() will return a LatLng-array of an unclosed polygon. layer.toGeoJSON().geometry.coordinates will return a LngLat-array of a CLOSED polygon. (the last point is the first point) – Stefan Steiger May 20 '20 at 08:32
1

Also, layer.getLatLngs() won't be available if the shape is a circle. A circle will instead have layer.getLatLng(), but ToGeoJSON().geometry.coordinates is always there. – Stefan Steiger May 20 '20 at 08:33
nice answer bro! – Gerardo Bautista Jul 25 '23 at 00:02

score 1 · Answer 3 · answered Jun 18 '19 at 06:51

1

map.on(L.Draw.Event.CREATED, function (e) {

    var layer = e.layer;
    drawnItems.addLayer(layer);

    console.log(layer.getLatLngs())

});

answered Jun 18 '19 at 06:51

Mahdi Bashirpour

17,147
12
117
144

score 1 · Answer 4 · answered May 20 '20 at 10:06

It should be noted that e.layerType contains the shape-type that is being created.
Methods like getLatLngs and getLatLng are specific to the shapetype.

These are the different types allowed in layer according to the typescript definition file

Circle | CircleMarker | Marker | Polygon | Polyline | Rectangle;

And the possible values for e.layerType are (according to the typescript definition file)

circle, marker, polygon, polyline, rectangle

So you can always get the coordinates with e.layer.toGeoJSON().geometry.coordinates.
But you need to switch between the e.layerType-s, because the circle geojson does not contain the radius, you need to get it with getRadius.
Further note, that getLatLngs returns a LatLng-array of an UNclosed polygon, while toGeoJSON().geometry.coordinates returns a closed polygon with coordinates as LngLat-arrray.

// console.log((<any>e.layer).getLatLngs()); // polyline
// console.log((<any>e.layer).getLatLng()); // circle
// mind the s at the end of the function...


map.on('draw:created', function(e:L.DrawEvents.Created) 
{
    console.log('On draw:created', e.target);
    console.log(e.type, e);


    console.log(e.layerType);
    // console.log((<any>e.layer).getLatLngs()); // polyline
    // console.log((<any>e.layer).getLatLng()); // circle

    // e.layerType // polygon, circle, etc. 

    // polygon 
    // e.layer.getLatLngs()

    // circle
    // e.layer.getLatLng()
    // e.layer.getRadius()


    // e.layer.toGeoJSON().geometry.type // is point if circle 
    // e.layer.toGeoJSON().geometry.coordinates

    let type = e.layerType,
        layer = e.layer;
    drawnItems.addLayer(layer);
});

Coordinates of Leaflet.Draw rectangle

4 Answers4