How to achieve the following Map functionality using leaflet.js (screenshot attached)? : <p>I want achieve the following map functionality in my maps.
When i am zoomed out the properties appear something like this -></p>

<p>[<img src="https://i.stack.imgur.com/4OfjI.png" alt="Zoomed out map [1]"></p>

<p>But when i zoom in map changes to following -></p>

<p><a href="https://i.stack.imgur.com/9gB5N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9gB5N.png" alt="zoomed in map"></a></p>

<p>I want to achieve this using leaflet.js but i dont have ant idea how to achieve this?
I have lat-long data for the properties and i want to achieve this for properties all over the world.</p>

<p>so when map is maxed zoomed out it look something like this -></p>

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

<p>you can visit actual website for Demo :- <a href="https://elocations.com/retail-location" rel="nofollow noreferrer">https://elocations.com/retail-location</a></p>
