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/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>