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.

When using Search.autocomplete and getting the results, each search result object has coordinate which have 13 decimal places. When you use Geocoder.reverseLookup for these coordinates, it returns the wrong address and different coordinates (6 decimal places and different as well). What works is using Geocoder.lookup (with getsUserLocation as true) and putting in the Search.autocomplete displayLines (as a string) for the query. Am I doing something wrong or is this a bug? Code: const exampleQuery = '<example address>'; const search = new mapkit.Search({ getsUserLocation: true, }); search.autocomplete( exampleQuery, (error, data) => { if (error) { console.error('Search error:', error); return; } const { coordinate } = data.results[0]; console.log("Autocomplete coordinate", coordinate); // Lat and lng are both have 13 decimal places const geoCoder = new mapkit.Geocoder({}); geoCoder.reverseLookup( new mapkit.Coordinate(coordinate.latitude, coordinate.longitude), (error, data) => { const { formattedAddress, coordinate } = data.results[0]; console.log(formattedAddress, coordinate); // Not the same address from example query and from the search autocomplete, also the coordinate has 7 decimal places } ); }, {} );

I created a PointsOfInterestSearch (https://developer.apple.com/documentation/mapkitjs/pointsofinterestsearch) on the frontend using MapKit JS: const poiSearch = new window.mapkit.PointsOfInterestSearch({ center: new mapkit.Coordinate(userLocation.lat, userLocation.lng), radius: 10000, }); poiSearch.search((error, results) => { console.log("Length of poiSearch:", results.places.length); results.places.forEach((place) => { console.log("Name:", place.name); }); }); The length of results.places is 20. Trying it with a bigger radius also still results in 20. The docs for PointsOfInterestSearchResponse shows only a places (https://developer.apple.com/documentation/mapkitjs/pointsofinterestsearchresponse) and no options for pagination. How can I paginate the rest of the results?

https://developer.apple.com/documentation/applemapsserverapi/creating-and-using-tokens-with-maps-server-api This doesn't really say what to do with .p8 private key. I know I am a noob but I really don't understand Apple Doc at all. There is no example or anything like that. const appleMapKit = await fetch("https://maps-api.apple.com/v1/token", { headers: { Authorization: `Bearer ${server_api_token}`, }, }); This is what I did but because I created the token on website, server_api_token only lasts 7 days. So, I tried to use Profile - Key to replace that. I have .p8 file and how can I use this to create the token for the server api?

When trying the request "hotels" on MapKitJS with searchRegionPriority=default, it will return an hotel in Ramallah even if the searchRegion is very far from there. It can happen if your search region is very broad in most place (above Europe if you zoom out a lot, over Turkey and Middle East even if the bounding box is narrower), but on specific places it happens even with a small search region (like in Tripoli, Lebanon, whatever the zoom level). With searchRegionPriority=required, many hotels can be found in the same area. Reproduce with: https://maps-api.apple.com/v1/search?q=hotels&searchRegion=34.45512816097114,35.849070061159864,34.428418939926146,35.80795182731595&lang=en&searchRegionPriority=default

Hi, Have been trying to work with MapkitJS for a website, but I'm stumped on once basic capability: I want to be able to click on a point of interest, and perform some actions such as: Get its coordinates Attach an annotation to it (e.g. a callout) In my code, PointOfInterest's are selectable: map.selectableMapFeatures = [ mapkit.MapFeatureType.PointOfInterest, ]; But when I click on one, I do see the marker pop up but nothing else (which is not much help since there is no additional information in the marker itself). I see no event getting triggered that I can do something with. I am using an event listener as follows: map.addEventListener('single-tap', (event) => { const coordinate = map.convertPointOnPageToCoordinate(event.pointOnPage); console.log('Map tapped at:', coordinate); console.log('Map tapped event:', event); ... I guess I have to grab the Place ID somehow but I don't know how to. Thanks for any help.

I have been using the following python library to generate apple map snapshots. has worked fine until about ~12 hours ago - now all I'm getting is "bad request" for any snapshot with overlays. if it's just a snapshot with a defined center and no polyline overlays, it still works. perhaps something has changed with the api's way of parsing percent encoded parameters? it's super irritating that there's no changelog or source code to view. what the heck??? https://pypi.org/project/mapsnap/

I'm using apple maps to build a feature so users can create and save running/cycling/hiking routes. Currently the map only shows trails and similar local paths after zooming in to what is basically an extreme level. I want the trails and local paths to be more visible on a further, broader level of zoom. APPLE MAPS JS EX: https://trkbucket.s3.amazonaws.com/media/shoe_images/Screenshot_2024-10-23_at_10.52.17AM.png https://trkbucket.s3.amazonaws.com/media/shoe_images/Screenshot_2024-10-23_at_10.52.04AM.png APPLE MAPS iOS EX: https://trkbucket.s3.amazonaws.com/media/shoe_images/IMG_9DDF5C9A320D-1.jpeg Also strange that on iOS the path is visible while more zoomed out whereas JS does not. Please advise how to show these map items at a broader zoom.

I am using the code provided on the website https://developer.apple.com/maps/sample-code/embedded-map/index.html, replacing it with my own MapKit JS Token. When accessing it using a network in mainland China, a 401 error occurs with the message [Initialization failed because the authorization token is invalid]. However, it works normally when using a network in Japan. Does this service not work in mainland China?

Hi, in MapKit JS the hybrid view appears to have lost the street names overlay in the last few days. Does anyone know if this is an issue/error or a changed feature? Thanks.

Hi, I'm building a nextjs app based on of MapkitJS. I tried to pass a new value to cameraZoomRange like the code below. As long as I put in this part map.cameraZoomRange, the error shows up. Not sure it's my fault, or the bug of MapkitJS. const map = new window.mapkit.Map(element, { colorScheme: mqMatchLightTheme ? window.mapkit.Map.ColorSchemes.Light : window.mapkit.Map.ColorSchemes.Dark, showsCompass: window.mapkit.FeatureVisibility.Hidden, showsMapTypeControl: false, showsZoomControl: false, showsUserLocation: true, tracksUserLocation: true, isRotationEnabled: true, isZoomEnabled: true, }); map.cameraZoomRange = new window.mapkit.CameraZoomRange({ minCameraDistance: 14, maxCameraDistance: Infinity, });

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