Region and Zoom Limits
This sample demonstrates zoom and region limits to restrict a map to two cities. Click the city name above to limit the viewport appropriately, and try zooming and panning on the map itself to see how the limits are enforced.
This sample demonstrates zoom and region limits to restrict a map to two cities. Click the city name above to limit the viewport appropriately, and try zooming and panning on the map itself to see how the limits are enforced.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
width: 100%;
padding: 0;
margin: 0;
font-family: "-apple-system-font", Futura, "Helvetica Neue", "Helvetica",
"Arial", "sans-serif";
}
#container {
width: 100%;
height: 600px;
}
#map-container {
width: 100%;
height: 560px;
}
#city-regions {
width: 100%;
height: 40px;
}
#city-regions > label {
float: left;
width: 50%;
height: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
}
#city-regions > input {
display: none;
}
#city-regions > input + label {
background-color: #fff;
}
#city-regions > input:checked + label {
background-color: #08f;
color: #f8f9f0;
}
</style>
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.core.js"
crossorigin async
data-callback="initMapKit"
data-libraries="map"
data-token="IMPORTANT: ADD YOUR TOKEN HERE">
</script>
<script type="module">
// Wait for MapKit JS to be ready to use.
const setupMapKitJs = async() => {
// If MapKit JS is not yet loaded...
if (!window.mapkit || window.mapkit.loadedLibraries.length === 0) {
// ...await <script>'s data-callback (window.initMapKit).
await new Promise(resolve => { window.initMapKit = resolve });
// Clean up.
delete window.initMapKit;
}
};
const domCityRegions = document.getElementById("city-regions");
const main = async() => {
await setupMapKitJs();
// Region and Zoom variables for San Francisco and Toronto
const regionSanFrancisco = new mapkit.CoordinateRegion(
new mapkit.Coordinate(37.7812, -122.44755),
new mapkit.CoordinateSpan(0.10, 0.11)
);
const regionToronto = new mapkit.CoordinateRegion(
new mapkit.Coordinate(43.6451, -79.37505),
new mapkit.CoordinateSpan(0.05, 0.11)
);
const zoomRangeSanFrancisco = new mapkit.CameraZoomRange(7500, 12000);
const zoomRangeToronto = new mapkit.CameraZoomRange(5000, 12000);
// Create map, set the initial view to San Francisco.
const map = new mapkit.Map("map-container");
map.cameraZoomRange = zoomRangeSanFrancisco;
map.cameraBoundary = regionSanFrancisco.toMapRect();
map.center = new mapkit.Coordinate(37.7812, -122.44755);
map.cameraDistance = 12000;
// Current City
let currentCityName = "sanfrancisco";
// Define the cities.
const cities = {
sanfrancisco: {
selected: () => {
map.setCameraZoomRangeAnimated(zoomRangeSanFrancisco);
map.setCameraBoundaryAnimated(regionSanFrancisco.toMapRect());
map.setCameraDistanceAnimated(12000);
}
},
toronto: {
selected: () => {
map.setCameraZoomRangeAnimated(zoomRangeToronto);
map.setCameraBoundaryAnimated(regionToronto.toMapRect());
map.setCameraDistanceAnimated(12000);
}
}
}
// Listen to click events to change city.
domCityRegions.addEventListener("change", event => {
const cityName = event.target.value;
const cityData = cities[cityName];
if (currentCityName === cityName) {
return;
}
currentCityName = cityName;
cityData.selected();
});
};
main();
</script>
</head>
<body>
<div id="container">
<div id="city-regions">
<input id="city-sanfrancisco" type="radio"
value="sanfrancisco" name="city" checked="checked" />
<label for="city-sanfrancisco">San Francisco</label>
<input id="city-toronto" type="radio"
value="toronto" name="city" />
<label for="city-toronto">Toronto</label>
</div>
<div id="map-container"></div>
</div>
</body>
</html>