Leaflet.MapkitMutant

A LeafletJS plugin to
use Apple's MapKit JS maps as a base layer.

This plugin is a fork of the original Leaflet.MapkitMutant by
Ivan Sanchez Ortega.
The name comes from GoogleMutant. It's catchy, even if
MapkitMutant doesn't use DOM mutation observers.

!Leaflet showing the three different mapkitjs map types

Usage

$3

To use this plugin you need to get an API key from Apple. You can get one by signing up for the Apple Developer Program
and creating a new key in the Certificates, Identifiers & Profiles section of the Apple Developer portal
under Services > Maps.
For more information, see
the Apple Developer Documentation.

$3

This is the minimal example to get a MapKit map up and running. It loads the MapKit and Leaflet libraries from the CDN,
and then the plugin itself. Replace Your authorization token goes here with your actual token.

``html














`

$3

Loading Optimization

For better control over the version of the plugin and faster loading times it is recommended to use links to specific
versions:

`html





`

MapKit JS Options

You can pass options to configure the mapkit map. For example, you can set the map type to satellite:

`javascript
var mapkit = L.mapkitMutant({
authorizationCallback: (done) => {
done("Your authorization token goes here");
},
mapkitOptions: {
mapType: mapkit.Map.MapTypes.Satellite,
},
}).addTo(map);
`

or show only specific points of interest:

`javascript
var mapkit = L.mapkitMutant({
authorizationCallback: (done) => {
done("Your authorization token goes here");
},
mapkitOptions: {
pointOfInterestFilter: mapkit.PointOfInterestFilter.including(
[
mapkit.PointOfInterestCategory.Restaurant,
mapkit.PointOfInterestCategory.PostOffice,
]
),
},
}).addTo(map);
`

The full list of options can be found in
the Apple documentation.
_Be aware that some of the options might not work as expected, as the plugin is still in development._

Known issues

* "I only see a rectangle when zooming out"

This happens because MapkitJS has a very particular behaviour for very low
zoom levels: it will refuse to use the given CoordinateSpan if that would
mean displaying over 180 degrees of longitude or so.

The current workaround is to scale down the size of the MapkitMutant so it overlaps
the region it reports to cover.

In practical terms, this means that users should add minZoom: 3 to their maps
(or set the maxBounds` of the map to something less than 180 degrees of longitude,
or any other similar approach). Else, users will not see parts of the map as grey.

* "I want routing, and placename search, and traffic, and streetview"

Nope. this plugin is only for the mapkitjs basemaps. It doesn't provide
routing, nor search, nor POIs. If you want that, consider implementing it
yourself.

Legalese

Licensed under LGPL3. Because why not. See the LICENSE file for details.

Contributors

| | Name | |
|-----------------|--------------------------------------------------------------------|----------------------------------------------------------------------|
| Original Author | Ivan Sanchez Ortega | Original Repo |
| TypeScript port | Konstantin Strümpf for Independo GmbH | |