MapKit JS

RSS for tag

Embed interactive Apple maps on your website, annotate points of interest, and perform geo-related searches using MapKit JS.

MapKit JS Documentation

Pinned Posts

Posts under MapKit JS tag

27 Posts
Sort by:
Post not yet marked as solved
2 Replies
619 Views
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.
Posted
by art_deco.
Last updated
.
Post not yet marked as solved
2 Replies
1.5k Views
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?
Posted Last updated
.
Post not yet marked as solved
0 Replies
546 Views
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?
Posted
by zkarj735.
Last updated
.
Post not yet marked as solved
1 Replies
757 Views
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+
Posted
by escullz.
Last updated
.
Post not yet marked as solved
1 Replies
641 Views
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?"
Posted
by Websawyer.
Last updated
.
Post not yet marked as solved
2 Replies
707 Views
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.
Posted
by Websawyer.
Last updated
.
Post not yet marked as solved
0 Replies
960 Views
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?
Posted Last updated
.
Post not yet marked as solved
0 Replies
594 Views
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
Posted Last updated
.