I have created CSS to style the menu's color and make the buttons change color based on different actions. However, I also want the buttons to match the colors of the points on the map. To achieve this, I set the background color in JavaScript when generating the buttons. The issue is that the background color of the buttons remains static, regardless of whether the points are visible or not. How can I make the menu buttons white when the points are hidden?
var toggleableLayerIds = ['Restaurants', 'Food', 'Shopping', 'Travel', 'Leisure', 'Night Life', 'Beauty & Health', 'Local Services'];
var LayerColors = ['#F44336', '#FF9800', '#FFEB3B', '#4CAF50', '#03A9F4', '#3F51B5', '#9C27B0', '#607D8B'];
for (var i = 0; i < toggleableLayerIds.length; i++) {
var id = toggleableLayerIds[i];
var color = LayerColors[i]
var link = document.createElement('a');
link.href = '#';
link.className = 'active';
link.textContent = id;
link.style.backgroundColor = color;
link.onclick = function(e) {
var clickedLayer = this.textContent;
e.preventDefault();
e.stopPropagation();
var visibility = map.getLayoutProperty(clickedLayer, 'visibility');
if (visibility === 'visible') {
map.setLayoutProperty(clickedLayer, 'visibility', 'none');
this.className = '';
} else {
this.className = 'active';
map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
}
};
var layers = document.getElementById('menu');
layers.appendChild(link);
}#menu {
background: #fff;
position: absolute;
z-index: 1;
top: 20px;
right: 40px;
border-radius: 3px;
width: 120px;
border: 1px solid rgba(255, 255, 255, 0.4);
font-family: 'Open Sans', sans-serif;
}
#menu a {
font-size: 12px;
color: #404040;
display: block;
margin: 0;
padding: 0;
padding: 3px;
text-decoration: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.4);
text-align: center;
}
#menu a:last-child {
border: none;
}
#menu a:hover {
background-color: #f8f8f8;
color: #404040;
box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.10)
}
#menu a.active {
background-color: #FBC02D;
color: #ffffff;
}
#menu a.active:hover {
background: #9E9E9E;
box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.10)
}<nav id="menu"></nav>