Apple MapKit JS (web) - Max Camera Zoom

Question

Apple's MapKit JS (for the web) is in beta.

I am trying to zoom out the camera so that the entire world is visible without needing to scroll or zoom, but there seems to a cap on the maximum zoom level.

I have tried setting the cameraZoomRange and cameraDistance properties on the map but have had no luck. These values are in meters (according to the documentation), but there is no reference to the maximum value supported. Does anyone know if there is a solution to this?

map.cameraZoomRange = new mapkit.CameraZoomRange(1000000000000, 1000000000000)
// or
map.cameraDistance = 1000000000000

Answer 1

There are couple of things going on here: the size of the tiles served from MapKit + the size of your Map, and the unpublished maximum camera distance (as you noted). I recommend adding extra logging to find what the computed Camera Distance for your map is (as it is related to where you center coordinate is).

1. MapKit JS serves up tiles that are 512x512 (for Retina/hDPI devices), so the number of tiles served for a particular zoom depends on the pixel dimensions of your map <div> and the capabilities of your device. Through testing, MapKit JS does not appear to serve tiles below Zoom Level 1. You can find this by inspecting the images served via Inspect Element > Network > Images.

2. You can use the MapKit JS docs on Handling Map Events to print out empirical Camera Distance values to the Javascript console.

map.addEventListener("region-change-end", function(event)    {
  console.log("cameraDistance = " +
    mapkit.maps[0].cameraDistance.toFixed(3)
  );
});

---

Example data for a 600x600 px #map, centered at Sydney, NSW. Through empirical tests, I have estimated the relation between camera distance and a zoom level you would find in Mapbox or Leaflet SDK for JavaScript.

estimated Zoom Level = 25 - Floor(log₂(cameraDistance))

cameraDistance in meters Centered around Australia	Estimated Zoom 25 - Floor(log2(cameraDistance))
18,817,301.985	1
1,176,081.374	5
36,752.543	10
1,148.517	15
35.891	20
4.486	23