Placeholder div is destroyed and recreated when scrolling into view
We have an issue using iframemanager for a Mapbox map that is initialized using JavaScript.
Our template is set up like this (Twig code, the geojson attribute is a JSON string for the map):
<div class="location-map__placeholder" data-service="mapbox" data-widget>
<div {{ attr({
class: ['location-map__mount'],
'data-placeholder': true,
'data-map-mount': true,
'data-map-geojson': geojson|json_encode,
}) }}></div>
</div>
In the service definition, we trigger an event once consent has been given, and show the placeholder as discussed in #10:
onAccept: async div => {
triggerConsentManagerEvent('mapbox', true);
div.classList.add('show-ph');
},
triggerConsentManagerEvent just triggers a custom event with the category and status for other JS components to listen to to react to status changes.
In our JS file that creates the event, we check if the iframemanager service has already been accepted. If not, we listen to those consent manager events to initialize the map once the consent has been given:
const mapboxConsent = window.im.getState().acceptedServices.includes('mapbox');
if (mapboxConsent) {
mapContainers.forEach(initializeMap);
} else {
window.addEventListener('consentmanager', e => {
if (e.detail.service !== 'mapbox' || !e.detail.accepted) {
return;
}
mapContainers.forEach(initializeMap);
});
}
This was working fine some versions ago. However, in a current project this is causing an issue. Once permanent consent has been granted, the map loads as soon as the page loads. If the map is visible in the viewport when the page is loaded, everything works. If it is outside the map, I can see that the map initializes correctly in the inspector in the devtools. However, as soon as the map scrolls into view, the div with the data-placeholder is apparently recreated by iframemanager with the attributes it had when the page loaded, wiping out the Mapbox map.
Not sure what feature is causing this or why iframemanager is doing this. Are we doing something wrong? How can we fix this?