Is there a MapKit JS event to detect when the map has finished loading?

Question

Is there a MapKit JS event to detect when the map has finished loading?

The documentation does not show anything on how this is possible. Does anyone have a workaround that does not involve a setTimeout? https://developer.apple.com/documentation/mapkitjs

My need for this is so I can fire an Annotation on the map after the map has finished loading. I have been able to achieve this with a setTimout method however, sometimes the map does not finish loading before the action fires.

Answer 1

So until I get a documented answer on this I'm going to share with you my solution for my case. I need to load a map with an image annotation, and after the map and pin load I want the annotation(popup) to appear. This is how I achieved it.

You'll notice when your Apple Map loads and an image annotation is added to the map it produces a specific style for the size of the image annotation. So I wait for that inline style to appear on the page before I fire my function to make the annotation appear.

function handleImageAnnotationLoaded() {
    console.log('Image annotation has been loaded');
    map.selectedAnnotation = landmarkToShowCallout;
}

// Define the MutationObserver callback function
function observerCallback(mutationsList, observer) {
    for (const mutation of mutationsList) {
        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
            for (const node of mutation.addedNodes) {
                if (
                    node.nodeType === Node.ELEMENT_NODE &&
                    node.tagName === 'DIV' &&
                    node.style.width === '49.5px' &&
                    node.style.height === '61.5px'
                ) {
                    handleImageAnnotationLoaded();
                    observer.disconnect(); // Disconnect the observer when the annotation is found
                    break;
                }
            }
        }
    }
}

// Create a MutationObserver instance and configure it with the callback function
const observer = new MutationObserver(observerCallback);

// Start observing the map element for changes
observer.observe(document.getElementById('map'), {
    childList: true,
    subtree: true,
});

Not the most elegant solution but I dare someone to post another working example that worked for them :)