Rectangle
Quick answer
L.rectangle draws a rectangular polygon from a bounds object, deriving its four corners from the south-west and north-east extremes. It is a Polygon subclass used for extents, selection boxes and bounding area highlights on the map. Styling comes from the usual Path options such as color, weight and fillOpacity.
L.rectangle( bounds , options ) → Rectangle
Key points
- setBounds rebuilds the corner points while keeping the layer and its listeners intact.
- getBounds returns the current extent, ready for map.fitBounds.
- toGeoJSON exports a Polygon geometry rather than a bounding box.
Example
var bounds = [[39.890, 116.370], [39.925, 116.425]];
var rect = L.rectangle(bounds, {
color: '#c2410c',
weight: 2,
fillColor: '#f97316',
fillOpacity: 0.12,
dashArray: '6 4'
}).addTo(map);
rect.bindTooltip('覆盖范围 4.2 km²', { direction: 'top' });
map.on('click', function (e) {
rect.setBounds([e.latlng, L.latLng(e.latlng.lat + 0.01, e.latlng.lng + 0.012)]);
});Notes
- There is no width or height option and no rotation, so rotated boxes need manual corners.
- Bounds crossing the antimeridian render as a band spanning the entire globe.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Rectangle. https://www.jingweizhi.com/en/leaflet/api/rectangle.html (accessed 2026-11-03).