L.polygon boundings in leafletjs
<p>I have several markers in a map, I want to color the area inside the maps of a different color. I've tried L.multiPolygon , L.polygon, L.rectangle, but nothing does but I want. I guess my only option is to calculate the boundings of all the markers and draw the polygon based on these points, right ?</p>

<p>Here the code</p>

<pre><code>&lt;c:forEach var="marker" items="${markers}" varStatus="rowIndex"&gt;
        var marker${rowIndex.index} = L.marker([${marker.lat},${marker.lng}],{icon: yellowIcon,title: '${marker.title}'}).addTo(mymap)
        .bindPopup( "${marker.HTMLMarkerPopupCode}").openPopup();
        storeCoordinate(${marker.lat}, ${marker.lng}, polygonPoints);
&lt;/c:forEach&gt;

 var polygon = L.polygon(polygonPoints);

polygon.setStyle({fillColor: '#0000FF'});
polygon.setStyle({color: 'red'});
polygon.setStyle({weight:1});   
polygon.setStyle({fillOpacity: 0.5});
mymap.addLayer(polygon); 
</code></pre>

<p><a href="https://i.stack.imgur.com/64R97.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/64R97.jpg" alt="enter image description here"></a></p>

<p>I would like to achieve something similar to this picture:</p>

<p><a href="https://i.stack.imgur.com/BnbBz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BnbBz.png" alt="enter image description here"></a></p>