Need to style a mapkit JS marker annotation

Question

I have a Mapkit JS map and the marker annotations are interactive, but do not have cursor: pointer style, so I need to add it. The marker annotations are inside a custom element and are in a shadow DOM that cannot be directly styled. I tried:

    const markerContainer = document.querySelector('.mk-annotation-container')
    const style = document.createElement('style')
    style.textContent = `
      .mk-annotations > div {
        cursor: pointer;
        border: 1px red solid; /* for debugging */
      }
    `
    console.log('marker container', markerContainer)
    if (markerContainer && markerContainer.shadowRoot) {
      console.log('success')
      markerContainer.shadowRoot.appendChild(style)
    }

The marker container log shows #shadow-root (closed) inside the container when I expand it, but "success" never logs. This aligns with what I've read, that you cannot access or modify a closed shadow root. Additionally, the Mapkit marker documentation does not provide any way to add styles to this type of annotation. Are there any other options available to me here?

Answer 1

I posted feedback to Apple, and I got a response. Using the map reference, you can get references to the annotation elements and style them. Their example:

map.annotations[0].element.style.width = "100%";
map.annotations[0].element.style.height = "100%";
map.annotations[0].element.style.cursor = "pointer";

My implementation:

function styleAnnotations() {
    map.annotations.forEach((annotation) => {
      annotation.element.style.cursor = 'pointer'
      annotation.element.style.width = '30px'
      annotation.element.style.height = '40px'
      annotation.element.style.margin = '0 auto'
    })
  }