diff --git a/src/components/Map.tsx b/src/components/Map.tsx index 0469286..cff8b3d 100644 --- a/src/components/Map.tsx +++ b/src/components/Map.tsx @@ -43,6 +43,7 @@ function forwardMapkitEvent( const Map = React.forwardRef>(({ children = undefined, + load: customLoad, token, colorScheme = ColorScheme.Light, @@ -94,7 +95,8 @@ const Map = React.forwardRef { - load(token).then(() => { + const loadMap = typeof customLoad === 'function' ? customLoad : load; + loadMap(token).then(() => { if (exists.current) return; const options = initialRegion ? { region: toMapKitCoordinateRegion(initialRegion) } diff --git a/src/components/MapProps.tsx b/src/components/MapProps.tsx index f0854e1..2eca36f 100644 --- a/src/components/MapProps.tsx +++ b/src/components/MapProps.tsx @@ -5,6 +5,11 @@ import { } from '../util/parameters'; export default interface MapProps { + /** + * Custom load method for MapKit JS. + */ + load?: (token: string) => Promise; + /** * The token provided by MapKit JS. */ diff --git a/src/stories/Map.stories.tsx b/src/stories/Map.stories.tsx index 36332e6..f7bd3da 100644 --- a/src/stories/Map.stories.tsx +++ b/src/stories/Map.stories.tsx @@ -205,3 +205,43 @@ export const PointOfInterestFilters = () => { ); }; PointOfInterestFilters.storyName = 'Point of Interest Filter'; + +export const CustomLoadFunction = () => { + const initialRegion: CoordinateRegion = useMemo(() => ({ + centerLatitude: 40.7538, + centerLongitude: -73.986, + latitudeDelta: 0.03, + longitudeDelta: 0.03, + }), []); + + return ( + ( + new Promise((resolve) => { + const element = document.createElement('script'); + // @ts-ignore-next-line + window.initMapKit = () => { + // @ts-ignore-next-line + delete window.initMapKit; + window.mapkit.init({ + authorizationCallback: (done) => { + done(customLoadToken); + }, + }); + resolve(); + }; + element.src = 'https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.core.js'; + element.dataset.callback = 'initMapKit'; + element.dataset.initialToken = customLoadToken; + element.dataset.libraries = 'map'; + element.crossOrigin = 'anonymous'; + document.head.appendChild(element); + }) + )} + token={token} + initialRegion={initialRegion} + showsMapTypeControl={false} + /> + ); +}; +CustomLoadFunction.storyName = 'Custom `load` Function';