@independo/leaflet.mapkitmutant
v1.0.4
Published
Leaflet plugin to use Apple MapKit JS as a map provider
Downloads
29
Readme
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.
Usage
Get Mapkit API Key
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.
Minimal Example
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.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Leaflet MapKit Playground</title>
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>
<script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
<script src="https://unpkg.com/@independo/leaflet.mapkitmutant@latest"></script>
<style>
#map {
height: 1000px;
width: 1000px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map("map").setView([48.20849, 16.37208], 16);
var mapkitLayer = L.mapkitMutant({
authorizationCallback: (done) => {
done("Your authorization token goes here");
},
}).addTo(map);
</script>
</body>
</html>Advanced Example
Loading Optimization
For better control over the version of the plugin and faster loading times it is recommended to use links to specific versions:
<script src="https://cdn.apple-mapkit.com/mk/5.32.x/mapkit.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/@independo/[email protected]/dist/Leaflet.MapkitMutant.js"></script>MapKit JS Options
You can pass options to configure the mapkit map. For example, you can set the map type to satellite:
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:
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 | |