Leaflet JS (react-leaflet) - Bounds Box Filled With Transparent Color

Question

I'm working with react-leaflet package, however, if you can answer the question in plain leaflet that would be helpful as well.

I am successfully panning to the bounds of a polygon that I supply like so:

<Map center={position}
                 zoom={13}
                 bounds={this.state.bounds}
                 className="campaignimagery-map">
                 <TileLayer
                    url="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    attribution=""
                 />

However, I would like the entire polygon boundary box to be some transparent color so they can see exactly where the boundary box lies on the map. Is this possible?

Answer 1

Short answer

Use the bounds to draw a colored rectangle like this L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map); . See related documentation for more information.

Explanation

I don't think it's possible to color bounds as is, but you can use bounds for drawing a polygon. Then the polygon itself can be colored and managed as you wish.