I'm seeing a strange situation where my MapKit JS page is stuck in dark mode. I'm trying to implement a custom version of the sample code "Callout Accessory Views" from here: https://maps.developer.apple.com/sample-code/accessory-views/
I have 2 simple examples of my implementation of this. I like the simple look of the annotation. I can customize the left and right accessory. Here are 2 samples of my map:
https://zrl.me/debug1.html
https://zrl.me/debug2.html
I really want something that looks like debug1.html, but it is ALWAYS shown in dark mode. When I inspect the element where the annotation says "Washington, DC", there is a CSS class ".mk-dark-mode".
My Mac does not use Dark mode, or Auto, but somehow this page always shows Dark. It happens at night and during the day. Researching this further, I saw that there area a couple ways of fixing this. In MapKit JS, you should be able to assign:
colorScheme: mapkit.Map.ColorSchemes.Light
In the Map constructor. This does not force the map into Light mode for me..
More research shows that this should force the entire page into light mode, but it does not work here:
<meta name="color-scheme" content="light only">
The difference between debug1.html and debug2.html is that debug1.html sets:
accessoryViewLeft.className = "left-accessory-view";
When this class is set, since the callout is actually a bit like a speech bubble, it creates a SVG shape behind the annotation. It looks like when either the left or right sides of the callout have a background-color applied, MapKit JS tries to smartly adjust the coloration of the bubble, and forces the right-side to have a WHITE background, instead of a contrasting dark background.
I have a few simple questions, any one of these could help resolve this issue?
Does anyone know why my instance of this is being forced into dark mode? This does not happen in the sample code.
Does anyone know how to force the map into light mode?
Is there a way to stylize the main section of the annotation callout?
Is there a way to change/force the stylizing of the speech bubble to have something other than a white background-color on the second half of the gradient on the SVG?
