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.

I can read that If you are doing web app development with MapKit JS, you get a daily limit of 250,000 map views and 25,000 service calls per Apple Developer Program membership. This is documented at the bottom of this page, as part of the MapKit JS Dashboard section. However it is not clear to me about the quotas for company account. My company has registered an Apple Developer Program as a company. We can create multiple users and each user have their own key/token for using Apple Maps in our different application. Are the quotas of 250k/25k per day for each user or for the whole company in this account?

On iOS, we could get the 'subAdministrativeArea' in CLPlacemark when doing a reverse geocode via MapKit, which, in the US, gives us the county name. How do we get the equivalent county name when using MapKit JS? The Place object that is returned doesn't have a subAdministrativeArea and doesn't seem to have any other property for county name?

does mapkit JS support 3D view mode? I was trying to use it on web browser on my website thank you !

I am trying to prevent the default mouse-click markerAnnotation animation, in which a clicked Balloon expands to a larger size. You can see a demo link of the behavior I wish to prevent at the following link (apple wouldn't let me embed it) gifyu(DOT)com/image/Smhl1 Lets say the code is something like... // helper vars let coordinate = new mapkit.Coordinate(37.33182, -122.03118) let options = { title: "My Custom Title", subtitle: "Anno's Address", color: "#0000FF" } // create the annotation let annotation = new mapkit.MarkerAnnotation(coordinate, options) // add custom click behavior in the eventListener callback annotation.addEventListener("select", (e) => { let clickedAnnotation = e.target clickedAnnotation.color = "#FF0000" // red }) // add to map map.showItems(annotation) After reviewing the mapkitjs annotation documentation I have tried: Adding enabled: false to options which does not work -- It does prevents the animation, but it also prevents ALL user interactivity, so no custom eventListeners() can be created or fired. adding e.stopPropagation() or e.preventDefault() to the eventListener callback which does not work adding e.target.selected = false to the eventListener callback which does not work... I'm surprised this didn't work. My guess its due to attempting to override the ~1 second animation after it already has started asyncronously(?) see docs here. TLDR: How do you prevent mouse-click animations on markerAnnotations?

Hello everyone, I am learning swift and learning the MapKit API. I have done a little research but the App I am attempting to build is complicated (But will save my work money). I am creating a Bus Stop Manager for the school I work at. My best logic is I have the map overlay with a menu bar where you can add locations, those locations are saved either to an Array or an SQLite database. The map pulls all (between 8-15) locations and gives turn-by-turn directions for Sub Bus Drivers. So my question is well is it possible for my logic to become reality and if so does anyone have any tutorials or suggestions on how to go about it? Thank you!

Hi do you have any idea if there was something to do to costume the maps in grey at different color not the standard black and white tnks

Hi all, I'm wondering if it is possible to make any adjustments for the label density of road signage and points of interest on the map. I am creating a custom map with markers and the additional signage and road markings are really distracting from what I want to display. Can't seem to find anything in the documentation that refers to density only being able to customise the specific styling of icons or marker shapes for example. Thanks!

How to become authorized Apple maps guides provider? Our application have audio tours in 40 countries so we want to add some of them in Apple Maps and create our branded page there. Is there any API to export guides from application to Apple maps?

hello im a beginner developer to use UIkit. and i want to make product with map. i could learn MKAnottationView( custom pin) but MKUserLocation has no call out!! i want to make MKUserLocation to being tap to display half modal screen. And changing "NO NAME" image to other image. (however i like blueball) Please Tell me how to solve it....!!! thank you for reading my bad english sentence.

I cannot see the javascrpt alert in webview. I would like to solve this in info.plist or something. I don't want to use delegate to display alerts on the swift side. Can anyone help me solve this? Or do I need to wait for Apple's response?

Hi. We are developing a native mobile app using a React Native, and we are wondering if Apple's Mapkit JS can be used for this native mobile app. We once thought about using Apple's Mapkit (not Mapkit JS), but it seems like this is only compatible with iOS and not with Android (please correct me if I am wrong). Please let me know. :)

I’m currently working on a taxi aggregator application (PWA). Within this application, users can order rides from multiple providers like Uber, Bolt or Freenow for instance. Using Mapkit js, I’m implementing a feature that consists of “showing the movement, the direction and the path of the driver” after a user has ordered a ride and the driver is coming to pick him up. I have access to the position of the driver (latitude and longitude) via the APIs from taxi providers, but when I place the coordinate on Mapkit js, it appears next to the road instead of the middle of it (please find attached some screenshots). Example I have this position from an API : latitude: 48.844837, longitude: 2.371858. On Google Maps, it shows well on the middle, but it appears next to the road on Mapkit js. How do you explain this behaviour and do you know how to fix this issue ? How to get (calculate) the direction of the driver since he doesn't use our application ? Thank you very much ! Looking forward to hearing from you soon!

So my question is regarding mapkitJS and if there is any way that i can use it in my backend just for it's directions API. The URL it makes requests on is https://api.apple-mapkit.com/v1/directions Generating a signed JWT token for authorisation is fine, but the part where that token needs to be used to initialise mapkitJS is where i am having difficulty Can you please let me know if there is a way i can make requests on that url above and how to go on about the initialization using that bearer token?