react-apple-mapkitjs
Installation
npm install react-apple-mapkitjs
Add the script file in your reacts public index.html file
Getting an access token to use Apple's mapkitjs
Getting your token to get mapkitjs to work is not the most simple of tasks, I recommend watching this video in full to understand how to do this. https://developer.apple.com/videos/play/wwdc2018/508
If you want a simpler explanation and dont mind giving your private key to some other app to create your access token then the following link is a great resource. https://mapkitjs.rubeng.nl/#/
Once you have your access token
Import the AppleMaps component into your project
import AppleMaps from 'react-apple-mapkitjs'
The only prop that is required is the token prop, without this you will get a "initialization failed" in the console
<AppleMaps ="your access token here" />
If the access token is correct then the map will default to Leeds, UK
Additional props and components
The AppleMaps component takes additional props to adjust the map view and zoom level, you can also specify a map width and height. It currently defaults to view height and width.
<AppleMaps ="your access token here" = = = ='100px' ='100px' />
You can also use additional Annotation components to put customizable drop pins on your apple map. The Annotation Components must be child components of AppleMaps.
First import both the AppleMaps and the Annotation component
import AppleMaps Annotation ImageAnnotation from 'react-apple-mapkitjs'
then add to your react application
<AppleMaps ="your access token here" = = => <Annotation = = ="#969696" ="Apple" ="work" = ="" /> <Annotation = = ="#349576" ="New Annotation" ="work" = /> <ImageAnnotation = = ="Cat Cafe" ="scholes" = ='./assets/cat.jpeg' = /></AppleMaps>
Most of the props to the Annotation component are self explanatory
Common Issues
Map not visible but no console errors - Set the width and height of the map as it may be rendering at 0px x 0px
Future Development
I'm going to carry on developing this component as it currently only has basic functionality, if there are any requests or you need any anymore help than that provided above then feel free to get in touch