Is it possible to get the coordinates of the rectangle on mouseClick, so I have all the corners of the rectangle?
4 Answers
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()
.
-
3Please 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
-
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
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);
});
-
Do you know why layer.toGeoJSON().geometry.coordinates will add another coordinate.– SpirJul 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
-
1Also, 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
-
map.on(L.Draw.Event.CREATED, function (e) {
var layer = e.layer;
drawnItems.addLayer(layer);
console.log(layer.getLatLngs())
});
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);
});