When using the MapKit JS map on with satellite map type, the map is initially loaded properly. All the tiles are downloaded successfully (can confirm this from the Network tab) and these tiles are rendered on the map at first. However, then one or more of these tiles disappear from the map, leaving an empty space on the map and the grid background is seen on the tile(s). When the map is dragged even one pixel, the tile(s) reappear (even when no new tiles are downloaded, they are retrieved from memory). This error occurs only on the satellite map and it occurs consistently in my project and in my demo, with my own token or by using a public token (as seen in the demo below). Did anyone come up with this issue and if they did, how did they solve it?
Here is the sample output:
Demo Code :
<head>
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>
<style>
#map {
width: 1000px;
height: 600px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
function getToken() {
return $.get("https://jkap-mapkitjs-demo.glitch.me/token").then(function (
data
) {
return {
token: data
};
});
}
getToken().then(function (data) {
mapkit.init({
authorizationCallback: function (done) {
done(data.token);
}
});
var map = new mapkit.Map("map", {
mapType: "satellite",
});
});
</script>
</body>
