23

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

4 Answers 4

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().

3
  • 3
    Please show the bounds semantic, my input is {ne:{lat: -23.5601806640625lon: -46.64794921875}, sw:{lat: -23.565673828125,lon: -46.658935546875}}. Dec 20, 2018 at 10:16
  • 1
    Thank you. This helped me years later :) Dec 30, 2020 at 5: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 Apr 5, 2021 at 18:57
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);
});
4
  • Do you know why layer.toGeoJSON().geometry.coordinates will add another coordinate.
    – Spir
    Jul 7, 2015 at 8: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) May 20, 2020 at 8: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. May 20, 2020 at 8:33
  • nice answer bro! Jul 25 at 0:02
1
map.on(L.Draw.Event.CREATED, function (e) {

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

    console.log(layer.getLatLngs())

});
1

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);
});

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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