Hi,
The below script shows in the location plugin the tooltip permanently and give them colors to sort them according to their type(events, venues, etc), I’m working on a legend and maybe a filter.
The situation is that It does work, but only after I refresh the page, it does not work when landing on the page from the url.
There is no differences in the errors in the console in both cases and adding a higher delay to the function does not change a thing.
Has anyone ever experienced this when adding js to the header from the edit theme menu and found a solution?
Here is a picture of the result
the errors here appear with or without the code so they are not related to it
<script>
document.addEventListener('DOMContentLoaded', function() {
// Apply CSS to change the alt text style
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `
/* Ensure alt text is bold, underlined, and has conditional color */
.leaflet-marker-pane img[alt] {
font-weight: bold !important; /* Make text bold */
text-decoration: underline !important; /* Underline the text */
white-space: nowrap; /* Prevent the text from wrapping to a new line */
}
`;
document.head.appendChild(style);
// Give the page a moment to load and the images to be rendered
setTimeout(function() {
var images = document.querySelectorAll('.leaflet-marker-pane img');
images.forEach(function(img) {
var title = img.getAttribute('title');
if (title) {
title = title.length > 10 ? title.substring(0, 10) + '..' : title;
img.setAttribute('alt', title);
img.setAttribute('title', title);
if (title.includes('/')) {
img.style.color = 'white';
} else {
img.style.color = 'black';
}
}
img.setAttribute('src', '');
});
}, 1000); // Delay execution by 1 second (1000 ms)
});
</script>