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

29 Posts
Sort by:
Post not yet marked as solved
0 Replies
40 Views
We're recently requested a Mapkit JS / Mapkit Server api limit increase request and are waiting to hear back before we push an important update to our app which switches to mapkit via server apis. We don't often go over the 25k daily limit, but there can be spikes where the app goes very viral and we'll need well over 25k – likely above 50k based on historic usage. I was wondering if there's any way to expedite our limit request? Or how do we get notified if our limit has been approved, is there any way to check? Would using one of our Code-level support requests (TSIs) be a good idea here? Thanks!
Posted Last updated
.
Post not yet marked as solved
0 Replies
41 Views
Hello there, Mainland china user(s) have trouble accessing MapKitJS, keeps returning HTTP 401 unauthorized for https://cdn.apple-mapkit.com/ma/bootstrap?apiVersion=2&mkjsVersion=5.77.35. The same valid JWT perfectly works for users rest of the world. May i know is there any special handling needed for accessing mapkitJS on web from mainland china compared to rest of the world. Advises are highly appreciated.
Posted
by nrkj.
Last updated
.
Post not yet marked as solved
0 Replies
67 Views
I would love to know if there is a way to manipulate how the scene size is set initially. I see that we have mapkit.MapSize(width, height) at our disposal but there isn't any clear documentation on its use case in the MapKit docs. I had to do some hacky workaround where I had to set the size like this. ` size = new mapkit.MapSize(1000, 600) map = new mapkit.Map("map"); map._impl._scene._size = size ` Is there a better way to handle this? On safari it is not setting correctly.
Posted Last updated
.
Post not yet marked as solved
0 Replies
185 Views
I am creating a mobile app based around city tours. I want to include a "download" function that would allow the user to tour offline using GPS/Apple maps. Is this possible?
Posted
by Andy342.
Last updated
.
Post not yet marked as solved
0 Replies
285 Views
Regardless of how much information is provided to the Maps searchAutoComplete API, the response field structuredAddress is always null. This means I have to call the completionUrl afterwards to get a structured address. This consumes our quota and causes unnecessary Maps traffic. Example request, autocompleting "450 Post St, San Francisco": https://maps-api.apple.com/v1/searchAutocomplete? q=450%20Post%20St%2C%20San%20Francisco &resultTypeFilter=Address &limitToCountries=US &lang=en-US responds 2 results with the actual address found, but each having only these fields: - completionUrl - displayLines - location Example: { "results": [ { "completionUrl": "/v1/search?q=450%20Post%20St%20San%20Francisco%2C%20CA%2C%20United%20States&metadata=Ch8KCzQ1MCBQb3N0IFN0EgQIABADEgQIBBAEEgQICRACEjQKIFNhbiBGcmFuY2lzY28sIENBLCBVbml0ZWQgU3RhdGVzEgQIGhACEgQIABADEgQIBBAJGAIyRgoSCQAAAEDg5EJAEQAAAOA9ml7AEM6h0aK1wfKqciA5KQAAAAAAAHlAgvEEAzQ1MIjxBDGa8QQCVVOg8QQAsvEEALrxBABiHAoaNDUwIFBvc3QgU3QsIFNhbiBGcmFuY2lzY2%2BC8QQaNDUwIFBvc3QgU3QsIFNhbiBGcmFuY2lzY2%2BI8QQA2vEEFgkAAABAEf3IQBkAAAAAAAAAACABKAPq8QQAkPIEAQ%3D%3D", "displayLines": [ "450 Post St", "San Francisco, CA, United States" ], "location": { "latitude": 37.78809356689453, "longitude": -122.41002655029297 } }, { "completionUrl": "/v1/search?q=450%20Post%20St%20Napa%2C%20CA%2C%20United%20States&metadata=****", "displayLines": [ "450 Post St", "Napa, CA, United States" ], "location": { "latitude": 38.30093002319336, "longitude": -122.27799224853516 } } ] } Anyone figured this out? Seems buggy to me.
Posted
by steluhh.
Last updated
.
Post not yet marked as solved
0 Replies
223 Views
Hi, based on https://developer.apple.com/help/account/configure-app-capabilities/create-a-maps-identifier-and-private-key described, I need to create an Identifier before I can create JWT for MapKit JS. However, I cannot find Maps Ids checkbox when I attempt to set up first MapKit JS access.
Posted Last updated
.
Post marked as solved
2 Replies
316 Views
Hello, I am facing an issue with mapkit JS map when it is accessed from China. From other regions maps render and display fine, but when user from China tries it, it throws 401. Signed JWT token is shared for all regions (without origin field) and is still valid and verified on JWT.io (and it works on other regions so it should not be the problem). Does mapkit js work for China users as it is stated that it does? Thanks in advance, Marko
Posted Last updated
.
Post not yet marked as solved
0 Replies
225 Views
Right now my map is littered with road annotations (interstate and highway markers) that are quite distracting and not at all relevant to my application. Is there a way to turn them off? I already tried mapkit.pointOfInterestFilter but the categories do not include the road annotations. I can't find anything else. Does anyone know?
Posted
by inorganik.
Last updated
.
Post not yet marked as solved
4 Replies
1.5k Views
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.
Posted
by ma1ted.
Last updated
.
Post not yet marked as solved
1 Replies
317 Views
One time title was showing below the MarkerAnnotation and I noticed, that once it disappeared and now it is showing inside the marker if you click on it. Is it possible to move it back and show it below the marker? The field, that I am using for this purpose is called "title" navigator.userAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36
Posted Last updated
.
Post not yet marked as solved
1 Replies
369 Views
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?
Posted
by CaneApp.
Last updated
.
Post not yet marked as solved
0 Replies
431 Views
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.
Posted
by Praise99.
Last updated
.
Post not yet marked as solved
0 Replies
517 Views
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>
Posted
by kaantas.
Last updated
.
Post not yet marked as solved
1 Replies
403 Views
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.
Posted
by databuzz.
Last updated
.
Post not yet marked as solved
1 Replies
955 Views
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.
Posted
by g-arth.
Last updated
.
Post not yet marked as solved
2 Replies
933 Views
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)
Posted
by Jpegtobbe.
Last updated
.
Post not yet marked as solved
2 Replies
552 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.3k 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
.