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?

I am able to see this issue even in https://developer.apple.com/maps/web/ When I zoom out, some tiles are not rendering. I am using latest chrome version

Hi everyone, I just implemented MapKitJS into my Ionic Vue app. At the same time I noticed a disproportionate amount of service calls (see image) without implementing dedicated calls to the Apple Maps Server API for example for autocompletion. Therefore the question arrised: Are those service calls mentioned in the MapKitJS Dashboard something differenent to the Apple Maps Server API, due to both disclaimed with 25k service calls free per month. Added to that, what causes those services calls in the MapKitJS implementation and how can it be made more efficent to make optimal use of the Apple Maps Server API calls? Thanks for clarifing and helping out.

Hi, At the bottom of https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.core.js there is a sourcemap comment: //# sourceMappingURL=https://mw-ci1-mapkitjs.geo.apple.com/admin/source-maps/5.75.4/source-maps/mapkit.core.min.js.map. https://mw-ci1-mapkitjs.geo.apple.com does not resolve. Nor does https://geo.apple.com. Is there a link to the sourcemap for mapkit.core.js, as well as the bundles at /libs that work? Many thanks.

When using the MapKit JS map on with satellite map type, the map is initially loaded properly. All the tiles are downloaded successfully (can confirm this from the Network tab) and these tiles are rendered on the map at first. However, then one or more of these tiles disappear from the map, leaving an empty space on the map and the grid background is seen on the tile(s). When the map is dragged even one pixel, the tile(s) reappear (even when no new tiles are downloaded, they are retrieved from memory). This error occurs only on the satellite map and it occurs consistently in my project and in my demo, with my own token or by using a public token (as seen in the demo below). Did anyone come up with this issue and if they did, how did they solve it? Here is the sample output: Demo Code : <head> <script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script> <style> #map { width: 1000px; height: 600px; } </style> </head> <body> <div id="map"></div> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> function getToken() { return $.get("https://jkap-mapkitjs-demo.glitch.me/token").then(function ( data ) { return { token: data }; }); } getToken().then(function (data) { mapkit.init({ authorizationCallback: function (done) { done(data.token); } }); var map = new mapkit.Map("map", { mapType: "satellite", }); }); </script> </body>

Is it possible to replace the default balloon marker with our own image that we store on a URL? I've played around with changing the glyphText but would like to use our own images instead of the balloon if this possible.

Pre-planning a project to use multiple 360 cameras setup un a grid to generate an immersive experience, hoping to use photogrammetry to generate 3D images of objects inside the grid. beeconcern.ca wants to expand their bee gardens, and theconcern.ca wants to use it to make a live immersive apiary experience. Still working out the best method for compiling, editing, rendering; have been leaning towards UE5, but still seeking advice.

I want to use Apple maps on a site instead of Google maps. Do i need to enroll as a Apple Developer to get access to the MapKit JS? (100 dollars/year)

I'd like to change the appearance of the map to the dark colors however it's not possible with the swift's WKMapView from MapKit framework. Some people said it was possible with viewDidLoad and overrideUserInterfaceStyle = .dark but that doesn't work for me. If I change the .hueRotation and apply .colorInvert of the parent view like so MapParentView() .hueRotation(.degrees(79)) .colorInvert() to make it look like so would that be a violation of the app store guidelines as it's hacking onto apple's app aesthetics? I haven't tried submitting yet but I'd like to know in advance.

I've got a working JWT token for MapKit JS. However, when the user's IP shows them in China, the console says "Initialization failed because the authorization token is invalid". The pins work and show correctly, but the map images do not appear. I know that Apple Maps work in China, which is why I chose Apple as the vendor. Is there something I need to do to allow my Chinese audience to view my maps or use my JWT token?

I've been working on a MapKit JS map on my Mac for a while with no problems but just tried viewing it on my phone and it is unusable because the label sizes are way too small. Scaling in general is a problem because at this scale my annotations do not even show in portrait mode on my iPhone 11 Pro. My brother's iPhone 12 Pro has a very slightly larger screen (96 pixels taller and 45 pixels wider) and he does see them. On my 11 Pro I have to rotate to landscape before they appear. I cannot find a way to influence the label (or annotation) sizes which implies MapKit JS will "take care of it" for me, but it's doing a terrible job in this case. Am I missing anything?

Hello, Playing around with the MapJs Snapshot API. How many individual Overlays can it support? The docs say max for Images is 10 but not listing number of Overlays/Annotations it can support. Trying to generate a gradient path like so: But it seems the Apple Snapshot api only allows for 10 unique Overlay objects, is that true? Also, what's the max size of a Snapshot query url? Seems to stop working around 5,000 characters but Google allows for 8000+

I have created a script to return a valid jwt token for mapkitjs. I have attempted to use both the fetch and xhr methods to call the script, and both methods receive the token, which I can display using a javascript alert call. I know the token is a good token because I can copy the token from the alert and brute force it into the code and the map is displayed. However, I cannot figure out what is wrong with the token in terms of the "expected pattern." I receive this error in the javascript console: "Unhandled Promise Rejection: SyntaxError: The string did not match the expected pattern." I return a simple string that is only the token itself. I have tried returning a json object like {"jwt":"the token"} or {"JWT":"thetoken"}. I tried changing res.test() to res.json(), although probably not at the some time as when I returned the json object. But then, I don't think that is the real problem, because Apple's description on using the token would not be ... then(res => res.text()). Naturally, I assumed that a text string exactly like is quoted using ... 'const jwt = "thetoken"' was what I was supposed to return to the fetch call. Can someone please tell me what I don't understand about the "expected pattern?"

I am trying to use mapkitjs. I have used mapkit on ios extensively, but would like to use mapkitjs, as well. When I load a simple webpage, the page generated by the dashboard when I generated a token on the dashboard, the javascript console shows that the resources are not loading because the webpages cannot be found by Safari. One page, for instance, is: https://mw-ci1-mapkitjs.geo.apple.com/admin/source-maps/5.75.101/source-maps/libs/mapkit.core.f5d12d.js.map There are several others, as well. The map does display correctly, I am able to declare a coordinate and region and have the map display the map showing that region. However, attempting to add an annotation does not work, as the variable MarkerAnnotation can not found. The error is: [Error] Unhandled Promise Rejection: ReferenceError: Can't find variable: MarkerAnnotation I have tried changing the library from "map" to "full-map" and that does not seem to help. I do not understand why all the mapkitjs libs cannot be found by Safari. Is it because at this early stage I am just hardcoding the token in the page? Nothing indicates this is a problem.

I have an angular 13 leaflet application that can display OpenStreetMap, google, bing and apple maps. I have a function which uses DomToImage.toPng to generate an image of the currently displayed map. This works as expected with OpenStreetMap, google and bing. However, with apple maps, the maps are rendered as a solid grey. There are no exceptions shown in the console as one might expect from a tainted canvas. Loading the map: if ( this.appleMapsApiKey !== 'n/a' ) { ml.layer = (L as any).mapkitMutant ({ type: 'hybrid', // valid 'type' are 'standard', 'satellite', 'hybrid', 'muted' authorizationCallback: function(done) { // console.log ( 'Apple Maps Authorization Callback with ' + outerThis.appleMapsApiKey ); done ( outerThis.appleMapsApiKey ); }, language: 'en', attribution: '© ' + ml.name, debugRectangle: false, opacity: 1, minzoom: 3, maxzoom: 23 }); } Saving the map as a .png this.swlDataUrl = null; const node = document.getElementById('map'); if ( node != null ) { const container = this.map.getContainer(); const options = { width: container.clientWidth, height: container.clientHeight }; try { const dataUrl = await domToImage.toPng(node, options); if ( dataUrl != null ) { this.swlDataUrl = dataUrl; } return this.swlDataUrl; } catch (error) { console.error('ERROR: swlGetMapViewDomToImageInt error ' + error); } } else { console.error ( 'ERROR: swlGetMapViewDomToImageInt - no document node with id "map"' ); } Any ideas?

I am using apple maps with leaflet and mapkitmutant. The apple maps appear to be displayed correctly, but the browser console gets flooded with these error messages. "503 servie not available". Any ideas on how to fix or suppress the error messages? Could not read source map for https://cdn.apple-mapkit.com/mk/5.75.107/libs/mapkit.core.f63534.js: Unexpected 503 response from https://mw-ci1-mapkitjs.geo.apple.com/admin/source-maps/5.75.107/source-maps/libs/mapkit.core.f63534.js.map: getaddrinfo ENOTFOUND mw-ci1-mapkitjs.geo.apple.com

Hello! I would like to ask if there is a way to get your Apple Private Key and Maps ID needed for the Mapkit JS if you're not enrolled in a paid developer/developer enterprise program?

I have enabled scroll zooming using map._allowWheelToZoom = true; However the scroll speed is very slow, and I can't find any way to increase the sensitivity like you can on Google Maps API. Can anyone help?

Native maps applications have road mark up when zooming in closely in large cities. Is this feature available for Javascript library? If not, is there any chance that Apple would add the support in the future?

I'm working with MapKit JS for the first time. I'm using the 'Annotations With a Custom Callout' sample code as my starting point as my map will need to work in a similar way to this one. I've got the basics working but I would now like to specify the center coordinates for the map but can't get this to work and not sure of the correct syntax. For example if I wanted that map to centre around these coordinates: (37.8184493, -122.478409) I'm not sure where/how to specify these. I've tried adding: var center = new mapkit.Coordinate(37.8184493, -122.478409); after: const map = new mapkit.Map("map"); but this doesn't change how the map is displayed. Appreciate if someone can show me where/how to specify the center coordinates for this type of map.