Is there a better way to group markers on a map for improved readability?
I have markers labeled ''Private Cloud - XXX'' that I want to display when specific buttons are clicked, like the button ''Private Cloud Regions''. Currently, these markers are displayed by default when the map is opened.
To see an example of this in action, check out my codepen: https://codepen.io/paul-k/full/gOmXZxE
Here is an example of one of my markers:
var markerFrance = new L.marker([45.777222 , 3.087025], {
opacity: 0.01
});
markerFrance.bindTooltip("Public Cloud - France ", {
interactive: true,
permanent: true,
className: "zone-marker marker-border salmonu-border",
direction: 'center'
});
markerFrance.addTo(map);
markerFrance.on('click', function(e)
And here is an example of a button I want to use to show the markers:
<button id="regionspublic" class="btn-square salmonu-border grow" data-target="#square5">Public Cloud Locations</button>
<div class="square-info salmon-border" id="square5">
<a href="#" class="close-classic"></a>
<div class="content">
<h3><strong><span style="font-size: 20px;"><span style="font-family: Montserrat;">Public Cloud Locations</span></span></strong></h3>
<p><span style="font-size: 12px;"><strong><span style="font-family: Montserrat;">GTS provides a range of services to enable the group Business Units to consume Amazon AWS and Microsoft AZURE public cloud services in a governed and secure manner and to take advantage of best-of-breed hybrid and cloud native solutions. </span></strong></span></p>
<strong><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2w.....;