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.