Apple Maps in LeafletJS

Apple launched its desktop mapping API, Mapkit.js, two weeks ago. You can view documentation, demo maps and sample code of Mapkit on Apple's developer page. What Mapkit's developer page doesn't tell you is how to add third party map layers to a Mapkit powered map. It also doesn't tell you how you can use Mapkit's own basemap layers with other popular mapping libraries.

Mapkit's developer page is a little basic at the moment. I've found geo.ebp.ch useful when trying to build a map with Mapkit. Their blog post A New Map in Town includes a demo map using Mapkit's driving directions service. This demo map also shows you how to add another map tile layer to a Mapkit powered map. The map loads a WMTS layer from ArcGIS Online. The demo map uses Codepen so it is easy to see how you can use the example to load any other WMTS layer into a Mapkit powered map.

You can of course also use Mapkit's basemaps in other mapping libraries. For example you could use Apple's map layers in a Leaflet powered map. You can use map tiles from Apple Maps in LeafletJS by using the MapkitMutant plugin for LeafletJS. MapkitMutant is a LeafletJS plugin which allows you to use Apple Map's basemaps. Mapkit's basemaps are a road-map, a satellite (aerial) map and satellite with labels.

Although LeafletJS is an open-source JavaScript library which is free to use Apple's Mapkit is neither of these things. This means that if you want to use Mapkit's basemaps within a Leaflet powered map you will still need an Apple authorization token and will still need to be aware of Apple's charges. A note at the very bottom of the Mapkit developer page says that "MapKit JS beta provides a free daily limit of 250,000 map initializations and 25,000 service calls."