Getting Started with MapKit JS
Apple announced MapKit JS at WWDC 2018 which enabled developers to display Apple maps inside a browser. This means you can bring the same level of richness and interactivity that you are familiar with on an iOS device to the browser. In this post I will explain how you can get started with MapKit JS and how you can display Apple maps in your web application.
Obtaining MapKit JS Key
Before you start implementing your application, you need to request and obtain the MapKit JS key. This can be done on Apple Developer Portal. Click on “Certificates, Identifiers and Profiles” and then select Maps IDs as shown in the screenshot below:
Create a new Map ID using the add button on the top right as shown below:
Once you have created the Map ID, next step is to generate a key for that Map ID. This is done on the keys page as shown in the screenshot below:
Create a key for your Map ID and then download the key. Do not loose the key, you will not be able to get the key back. Once again do not loose the key.
That’s pretty much it for registering the MapKit JS key. In the next section I will cover how to get started with displaying maps on a webpage.
Implementing Node Server
Apple provides two ways of displaying maps on the web page. We will look at the recommended approach which also involves generating the token on our server which is later validated by Apple.
If you are not interested in generating the token yourself then you can use this amazing website MapKit JS Helper which will generate the token for you, provided that you enter all the necessary details.
The token consists of header and payload structures as shown below:
You can also read more about the specifications here. As mentioned previously, for this to work we will need to implement and configure our server.
Our first task is to create an endpoint which will return us the required token. The code below creates an endpoint at “/services/jwt” which is responsible for creating the token. Make sure your private key, the one you downloaded from Apple Developer website is part of your node project. We will need that key to sign the token as shown in the implementation below. For signing the token we have used NPM package “jsonwebtoken”. Once the token is signed we return it as part of the JSON response.
The response is shown below:
Sweet! The next step is to use the token to validate our requests for MapKit JS.
Displaying Maps
Apple provides several examples that you can use to display and customize the appearance of the maps. We are going to display the map and also add an annotation on the map to point to a particular point of interest. Here is the complete HTML and JavaScript code.
The validation of the token happens inside the mapkit.init function. This is where we call our web API endpoint and get the token. After getting the token we pass it to the done function which validates the token. If the token is not validated then maps are not displayed on the screen.
Rest of the code is used to create annotations and display annotations. The result is shown below:
I hope you enjoyed the article! If you are interested in learning more about MapKit development then check out my popular Udemy course “Mastering MapKit for iOS”. Thank you very much for your support.
