Hello! MapKit JS sample code is now available at https://maps.developer.apple.com/sample-code. Here's a list of the samples that are currently available: Embedded Map Demonstrates simply displaying a map with minimal code. Annotations & Reverse Geocoding Demonstrates adding/removing annotations, using the Reverse Geocoding API to find place data. Annotations with a Custom Callout Demonstrates how to add custom styles to annotation callouts. US Population By State Overlays Demonstrates displaying, transforming, and interacting with GeoJSON-based map overlays. Callout Accessory Views Demonstrates displaying additional customized elements within a callout. Region and Zoom Limits Demonstrates limiting a map's viewport's zoom levels and latitude/longitude constraints. Animated Polyline Overlays Demonstrates animating an overlay property in a request animation frame loop.

Hi, I am building a Next.js app on top of Mapkit JS but I keep getting this error randomly. The map works most of the time but this error triggers randomly sometimes when the map loads even though I have not used the fillOpacity parameter at all. Even defining the parameter still causes the error. mapkit.js:2 Uncaught TypeError: [MapKit] Expected a number value for Style.fillOpacity, but got NaN instead. at Object.checkType (mapkit.js:2:205350) at set fillOpacity (mapkit.js:2:670243) at set fillOpacity (mapkit.js:2:673537) at _.performScheduledUpdate (mapkit.js:2:643649) at mapkit.js:2:221322 at m (mapkit.js:2:221358) Code: import React, { useEffect, useRef } from "react" import { useTheme } from "next-themes" declare global { interface Window { mapkit: any } } interface MapKitProps { latitude: number longitude: number zoom: number } const MapKit: React.FC = ({ latitude, longitude, zoom }) => { const mapRef = useRef(null) const mapInstanceRef = useRef(null) const { setTheme, theme } = useTheme() useEffect(() => { if (window.mapkit && mapRef.current) { window.mapkit.init({ authorizationCallback: (done: (token: string) => void) => { const token = process.env.NEXT_PUBLIC_APPLE_MAPKIT_TOKEN if (token) { done(token) } else { console.error("MapKit JS token is not set") } }, }) // Clean up the previous map instance if it exists if (mapInstanceRef.current) { mapInstanceRef.current.destroy() } // Create a new map instance mapInstanceRef.current = new window.mapkit.Map(mapRef.current, { center: new window.mapkit.Coordinate(latitude, longitude), zoom: zoom, colorScheme: theme, _allowWheelToZoom: true, }) } // Cleanup function to destroy the map instance when the component unmounts return () => { if (mapInstanceRef.current) { mapInstanceRef.current.destroy() } } }, [latitude, longitude, zoom]) return <div ref={mapRef} style={{ width: "100%", height: "100%" }} /> } export default MapKit

When I create a polyline and add it to the map, it will disappear if the map is moved. If I add a polygon or annotation, it remains on the map if the map is moved: const polyline = new mapkit.PolylineOverlay(path, { style: new mapkit.Style({ lineWidth: 5, strokeColor: '#007AFF', lineJoin: 'round', lineCap: 'round' }) }) map.addOverlay(polyline) // disappears if the map moves or zoom changes const polygon = new mapkit.PolygonOverlay(shapes, { style: new mapkit.Style({ fillRule: 'evenodd' }), enabled: false }) map.addOverlay(polygon) // remains on map when map moves or zoom changes Why is it inconsistent? How can I make the polyline stay until I explicitly remove it?

Hello, I am building a web app using Mapkit JS, and have something up an running where I can add markers and annotate places with Place ID (I followed along with the WWDC24 video). However occasionally, while I'm doing nothing on the browser, I get an runtime error with the following error trace (from developer tools in Chrome). === Uncaught TypeError: Cannot read properties of null (reading 'tint') at get tint (mapkit.core.annotations.d43c86.js:2:97102) at get colorScheme (mapkit.core.annotations.d43c86.js:2:81602) at e.exports.PlaceCardController._renderPlaceIframe (mapkit.core.map.536988.js:2:214785) at e.exports.PlaceCardController.update (mapkit.core.map.536988.js:2:212978) at e.exports.PlaceCardController._handleConfigChanged (mapkit.core.map.536988.js:2:213284) at _handleConfigChangedListener (mapkit.core.map.536988.js:2:212679) at n.dispatchEvent (mapkit.core.js:2:16624) at mapkit.core.js:2:10799 === It is completely random, and not a result of any browser / Map interaction. Seems to be an issue in mapkit.core, and related to Place IDs. Can anyone help with this?

I am trying to use MapKit JS in Tauri and Flutter desktop apps but I can‘t because if I want the key not to expire I have to whitelist a domain but my apps don't run on the web and therefore don't have a valid domain.

I might be being really ******, but I'm struggling to find a way to update the map kit token when it expires. We have a display that shows a map for a long time and for some reason the map stops loading and I think it's cause the token expires however I can't work out away to tell it to load a new token.

My query might return 20,000 coordinates. Does MapKit JS try to load all the coordinates at once into the map or does it only load what’s in the viewport of the map if we were to load 20,000 annotations into the say something like “landmark data” const? We have 900,000 coordinates to load into Los Angeles and are planning how we will do this. Obviously we can’t load 900,000 coordinates at once without performance issues, but some query’s return 20,000 results. Can someone point me to some information about large datasets and MapKit js or let me know if it’s handled and already built in to not try to load that many locations at once?

I own a website (timeguessr.com) that uses the apple mapkit js api. I have had a number of reports in the last few weeks of users having the map not loading. Since I have not been able to recreate the problem I have asked people to send screenshots of what is logged to their developer tools console. In each case a ERR_HTTP2_PROTOCOL_ERROR 200 (OK) error is being logged when the user is trying to fetch from cdn.apple-mapkit.com endpoints. What is strange is this happens halfway through their games when they have already successfully loaded the map in previous rounds. Can anyone help? Thanks

const lookup = new mapkit.PlaceLookup() lookup.getPlace(input?.id, (error, place) => { console.log("place", place) ... gives me for example { "id": "I65A54A72CE9E45D6", "alternateIds": [ "IB86C41DA005E0D9B" ], "muid": "7324342225941186006", "_styleAttributes": "4:226,6:16,10:0,82:12,85:12,89:1,164:1,193:1", "name": "The Museum of Modern Art", "region": { "center": { "latitude": 40.7612829, "longitude": -73.9768677 }, "span": { "latitudeDelta": 0.008983199999995861, "longitudeDelta": 0.01186000000001286 } }, "coordinate": { "latitude": 40.7617238, "longitude": -73.9777654 }, "formattedAddress": "11 W 53rd St, New York, NY 10019, United States", "countryCode": "US", "telephone": "+12127089400", "urls": [ "http://www.moma.org" ], "country": "United States", "administrativeArea": "New York", "administrativeAreaCode": "NY", "locality": "New York", "postCode": "10019", "subLocality": "Manhattan", "thoroughfare": "W 53rd St", "subThoroughfare": "11", "fullThoroughfare": "11 W 53rd St", "areasOfInterest": [ "Manhattan" ], "dependentLocalities": [ "Midtown Center", "Midtown East", "Midtown Manhattan", "Midtown", "North Hudson" ], "timezone": "America/New_York", "timezoneSecondsFromGmt": -14400 } Note there is no pointOfInterestCategory. but const place_search = new mapkit.Search() place_search.search( input, (error, result) => { console.log("result_places_0", result?.places?.[0]) ... i get { "id": "I65A54A72CE9E45D6", "alternateIds": [ "IB86C41DA005E0D9B" ], "muid": "7324342225941186006", "_wpURL": "https://maps.apple.com/place?q=The%20Museum%20of%20Modern%20Art&auid=7324342225941186006&address=11%20W%2053rd%20St,%20New%20York,%20NY%20%2010019,%20United%20States&ll=40.7617238,-73.9777654", "_styleAttributes": "4:226,6:16,10:0,82:12,85:12,89:1,164:1,193:1", "pointOfInterestCategory": "Museum", "name": "The Museum of Modern Art", "region": { "center": { "latitude": 40.7612829, "longitude": -73.9768677 }, "span": { "latitudeDelta": 0.008983199999995861, "longitudeDelta": 0.01186000000001286 } }, "coordinate": { "latitude": 40.7617238, "longitude": -73.9777654 }, "formattedAddress": "11 W 53rd St, New York, NY 10019, United States", "countryCode": "US", "telephone": "+12127089400", "urls": [ "http://www.moma.org" ], "country": "United States", "administrativeArea": "New York", "administrativeAreaCode": "NY", "locality": "New York", "postCode": "10019", "subLocality": "Manhattan", "thoroughfare": "W 53rd St", "subThoroughfare": "11", "fullThoroughfare": "11 W 53rd St", "areasOfInterest": [ "Manhattan" ], "dependentLocalities": [ "Midtown Center", "Midtown East", "Midtown Manhattan", "Midtown", "North Hudson" ], "timezone": "America/New_York", "timezoneSecondsFromGmt": -14400 } which gives me "pointOfInterestCategory": "Museum" I think pointOfInterestCategory should also be returned in the placeLookup and might be a mapkit error that its not it would also be cool if search autocomplete gave me the poi so i could tag the search result previews (mapbox does this). Unrelated from this topic but coming from mapbox where everything had a mapbox_id i feel like some things like localities like "columbus, Ohio" should still have a place id but maybe the muid serves that purpose idk and just something i should account for. Lastly on my mind is how to manage rate limiting since im just giving the same mapbox js token to all the clients. Of course for server api I can manage my own system for rate limiting logged in users a bit easier but not sure about mapkit js though I can only dream my project is big enough i need to even worry about that lol.

Hello, There are some countries, with political conflicts on borders, does MapKit JS support displaying the map depending on the point of view of the region ? if yes, how technically is done (like adding an attribute region on request params or something else) ? Thanks

Hello, As you stated that "MapKit JS provides a free daily limit of 250,000 map views and 25,000 service calls per Apple Developer Program membership." , I have two questions : are user interactions (zooming, panning, and switching theme) included in the billed map views ? is this limits similar for the enterprise account ? if not, please give us more details. Thanks

Edit: The issue was resolved. It's back up. I was streaming the new MapKit Places video, and it suddenly stopped. It's now missing from the Developer app and website. Is this intentional?

I'm using MapKit JS to plot markers on a Map - so far so good. I've noticed that it doesn't always show the Suburb name for the location of the marker . Here's an example: The marker is located in Hornsby which isn't showing on the map. If I move the market to an adjacent suburb Wahroonga I get the following: Now Wahroonga isn't showing but Hornsby is showing. I'm trying to find if there's a control that determines when the suburb for the marker is shown or not but haven't been able to find anything so far. I would also like to know if I can control the visibility of suburb names at different zoom levels. If you look at this map you can see the names of various suburbs (Bondi, Bondi Beach, North Bondi etc): but when I zoom in one level these all disappear and I cannot easily locate which suburb the market is in: Is there a way to always show the suburb names so users can easily locate themselves on the map in reference to the suburbs that they might not be familiar with?

I have generated a key for MapKit and it gave me a private key (p8), a Key ID and a MapKit JS key. I am trying to use MapKit in Delphi TMS FNC Maps but it does not seem to render the maps. The same code works with Google Map Key, but not Apple MapKit. I was told to use the MapKit JS key in TMS by the vendor, but neither the Key ID or the MapKit JS key worked. Any help on this is greatly appreciated. Thank you

Dear Community, After logging into my Developer Account, I am unable to access MapKit JS link under Additional resources. Each time I try to access https://maps.developer.apple.com/ or specifically https://maps.developer.apple.com/token-maker the browser returns 403 forbidden error. I have tried to use different browser an device and I get the same error. My MapKit JS Authorization token has expired and I need to reissue fresh token ASAP. Kindly advice. Regards, Swapneel Shah

'init(coordinateRegion:interactionModes:showsUserLocation:userTrackingMode:)' was deprecated in iOS 17.0: Use Map initializers that take a MapContentBuilder instead. struct EmMapView: View { @State private var region = MKCoordinateRegion( center: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194), span: MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1) ) var body: some View { ZStack { Map(coordinateRegion: .constant(region), interactionModes: .all, showsUserLocation: false, userTrackingMode: .none) .edgesIgnoringSafeArea(.all) .navigationTitle("Emmap") } } }

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!

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.

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.

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?

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.