Rectangles and circles

Circles and rectangles are common polygons that have built-in classes in Leaflet. You can also draw them manually using polygon and by specifying all of the line segments, but that would be a difficult route to take.

Rectangles

To create a rectangle, you need an instance of the class L.rectangle() with the latitude and longitude pair for the upper-left corner and lower-right corner as a parameter. The class extends L.polygon(), so you have access to the same options, methods, and events:

var myRectangle = L.rectangle([[35.19738, -106.875],[35.10418, -106.62987]], {color: "red", weight: 8,fillColor:"blue"}).addTo(map);

The preceding code uses the first two points in the polyline and triangle, but in reverse order (upper left and lower right). The options are the same as the polygon, but with opacity removed. The following screenshot shows the rectangle added to the map:

Circles

To create a circle, you need an instance of L.circle() with the center point and a radius (in meters) as parameters. You can specify the same options as you used in your rectangle because the circle class extends the path class. This is shown in the following code:

L.circle([35.10418, -106.62987], 8046.72,{color: "red", weight: 8,fillColor:"blue"}).addTo(map);

The preceding code specifies the center point, a radius of 5 miles (8046.72 meters), and the same options as the rectangle in the previous example. The following screenshot shows the circle added to the map: