I’m showing the scale on my MapKit JS map using:

map.showsScale = mapkit.FeatureVisibility.Visible;

This is defaulting to showing the scale in miles not km which is what I’m after. I’ve found a reference to mapkit.Map.Distances.Metric which looks like it should change this to km but I’m struggling to work out the correct syntax here.

For example I’ve tried:

map.setDistance = mapkit.Map.Distances.Metric;

but that doesn’t alter the scale which still shows in miles.

Here’s my current script:

    <script type="module">
/**
 * Wait for MapKit JS to be loaded by the script tag,
 * calls `mapkit.init` to set authorizationCallback with your JWT.
 */
const setupMapKitJs = async() => {
    if (!window.mapkit || window.mapkit.loadedLibraries.length === 0) {
        // mapkit.core.js or the libraries are not loaded yet.
        // Set up the callback and wait for it to be called.
        await new Promise(resolve => { window.initMapKit = resolve });

        // Clean up
        delete window.initMapKit;
    }

    // TODO: For production use, the JWT should not be hard-coded into JS.
    const jwt = "Insert Your JWT Here";
    mapkit.init({
        authorizationCallback: done => { done(jwt); }
    });
};

/**
 * Script Entry Point
 */
const main = async() => {
    await setupMapKitJs();
    
    // Create the Map and Geocoder
    const map = new mapkit.Map("map-container");
    const geocoder = new mapkit.Geocoder({ language: "en-US" });
    
    
    // Create the "Marker" annotation, setting properties in the constructor.
    const event = new mapkit.Coordinate(-27.536432, 153.0671578);
    const eventAnnotation = new mapkit.MarkerAnnotation(event, {
        color: "red",
        title: "",
        glyphText: "" 
    });
    
    // Add and show both annotations on the map
    map.showItems([eventAnnotation]);
    
    // Set Distances to Metric
    map.setDistance = mapkit.Map.Distances.Metric;
    
    // Show/Hide Scale
    map.showsScale = mapkit.FeatureVisibility.Visible;



};

main();

</script>