View in English

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<style>

#container {
    width: 100%;
    height: 600px;
    font-family: "Helvetica Neue", sans-serif;
}

#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/6/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();

    // Build a MapRect directly from coordinate corners. Pass MapRect to
    // `cameraBoundary` (preferred over CoordinateRegion in v6).
    const boundaryFromCorners = (sw, ne) => {
        const swPoint = sw.toMapPoint();
        const nePoint = ne.toMapPoint();
        return new mapkit.MapRect(
            Math.min(swPoint.x, nePoint.x),
            Math.min(swPoint.y, nePoint.y),
            Math.abs(nePoint.x - swPoint.x),
            Math.abs(nePoint.y - swPoint.y)
        );
    };

    // Region and Zoom variables for San Francisco and Toronto
    const boundarySanFrancisco = boundaryFromCorners(
        new mapkit.Coordinate(37.7312, -122.50255),
        new mapkit.Coordinate(37.8312, -122.39255)
    );
    const boundaryToronto = boundaryFromCorners(
        new mapkit.Coordinate(43.6201, -79.43005),
        new mapkit.Coordinate(43.6701, -79.32005)
    );
    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 = boundarySanFrancisco;
    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(boundarySanFrancisco);
                map.setCameraDistanceAnimated(12000);
            }
        },

        toronto: {
            selected: () => {
                map.setCameraZoomRangeAnimated(zoomRangeToronto);
                map.setCameraBoundaryAnimated(boundaryToronto);
                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>