can't get atlas.control.ScaleControl to work. The scale does not show up on the map

Question

can't get atlas.control.ScaleControl to work. The scale does not show up on the map

Mike Pettis 20

This will not display the scale on the map. Any ideas??

<!DOCTYPE html>

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Azure Maps with Scale</title>

<!-- Load the Azure Maps SDK -->

<script src="https://atlas.microsoft.com/sdk/js/atlas.min.js?api-version=2.0"></script>

<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/css/atlas.min.css?api-version=2.0" />

<style>

    /* Reset page styles */

    * {

        margin: 0;

        padding: 0;

        box-sizing: border-box;

    }

    /* Map container */

    #myMap {

        width: 100vw;

        height: 100vh;

    }

</style>

</head>

<body>

<div id="myMap"></div>

<script>

    // Replace with your Azure Maps subscription key

    const subscriptionKey = 'maps key here';

    // Initialize the map

    const map = new atlas.Map('myMap', {

        center: [-81.5749, 28.5653], // Coordinates for Winter Garden, FL

        zoom: 12,

        authOptions: {

            authType: 'subscriptionKey',

            subscriptionKey: subscriptionKey

        }

    });

    // Add event listener for when the map is ready

    map.events.add('ready', () => {

        console.log('Map is ready.');

        // Add a ScaleControl to the map

        const scaleControl = new atlas.control.ScaleControl({

            style: 'bar', // Options: 'bar' or 'line'

            maxWidth: 200

        });

        // Place the ScaleControl on the bottom-left of the map

        map.controls.add(scaleControl, {

            position: atlas.ControlPosition.BottomLeft

        });

    });

</script>

</body>

</html>

Mike Pettis 20 Reputation points

2025-04-24T13:11:26.8133333+00:00

WOW! Thanks so much! Really appreciate it!

Mike
Manas Mohanty 3,965 Reputation points Microsoft External Staff Moderator

2025-04-24T13:24:32.7366667+00:00

Hi Mike Pettis

Could you take a moment to accept the below answer if you got the desired help.

Thank you.

Accepted answer

1 additional answer

Your answer

Mike Pettis 20 Reputation points

2025-04-24T13:11:26.8133333+00:00

WOW! Thanks so much! Really appreciate it!

Mike
Manas Mohanty 3,965 Reputation points Microsoft External Staff Moderator

2025-04-24T13:24:32.7366667+00:00

Hi Mike Pettis

Could you take a moment to accept the below answer if you got the desired help.

Thank you.

Answer 1

IoTGirl 3,621 Microsoft Employee Moderator

Hi @Mike Pettis ,

If you use the full sample code for the working sample in future you will avoid this. Samples.AzureMaps.com is fully searchable and supported by the Azure Maps Team so should you have an issue, you can provide feedback right in GitHub and it will be reviewed by a team member.

You can also check out our blog at https://techcommunity.microsoft.com/blog/azuremapsblog/why-upgrading-to-the-latest-azure-maps-apis-matters/4395364

Sincerely,

IoTGirl

Mike Pettis 20 Reputation points

2025-04-24T17:30:49.79+00:00

Great! Thanks. I'm not sure where I got that sample code where it was using the older version.
IoTGirl 3,621 Reputation points Microsoft Employee Moderator

2025-04-24T18:34:44.7666667+00:00

Hi @Mike Pettis ,

This feature was not available in prior versions so I would also be surprised that you found a sample with that SDK version and this call.

Sincerely,

IoTGirl

Mike Pettis 20

Thank you. Do you know how to change the map scale to 'line' and 'imperial' ? For some reason it stays on metric and bar style:

        const scaleControl = new atlas.control.ScaleControl({

            style: 'line', // Options: 'bar' or 'line'

            maxWidth: 200,

            units: 'imperial'

        });

        // Place the ScaleControl on the bottom-left of the map

        map.controls.add(scaleControl, {

            position: atlas.ControlPosition.BottomRight

        });

IoTGirl 3,621 Reputation points Microsoft Employee Moderator

2025-04-24T19:26:46.88+00:00

See https://github.com/Azure-Samples/azure-maps-scale-bar-control and look at the settings for units = "miles"
Mike Pettis 20 Reputation points

2025-04-24T19:41:13.5833333+00:00

The sample from that page. It uses version 2 which caused the problem in the beginning.
IoTGirl 3,621 Reputation points Microsoft Employee Moderator

2025-04-24T20:10:46.08+00:00

Please give code feedback in GitHub directly against the code with the issue.
Mike Pettis 20 Reputation points

2025-04-24T20:30:22.55+00:00

There's nothing in github for version 3. All their references are for version 2. Should I just repost the issue? It seems real simple. I just want to change the scale from metric to miles.
IoTGirl 3,621 Reputation points Microsoft Employee Moderator

2025-04-24T20:33:23.0033333+00:00

Sorry, I gave a link to an archives repo...My fault. Please look at https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/6d4cd87a9931447f55e87e5113dd45075a5bcba6/Samples/Controls/Simple%20Scale%20Bar%20Control/Simple%20Scale%20Bar%20Control.html#L11

Mike Pettis 20

Chat GPT said to change it to 'imperial' and that worked: map.events.add('ready', () => {

        console.log('Map is ready.');

        // Create the scale control with imperial units (miles)

        const scaleControl = new atlas.control.ScaleControl({

            style: 'bar', // Options: 'bar' or 'line'

            maxWidth: 200,

            unit: 'imperial'  // This changes the display to miles

        });

        map.controls.add(scaleControl, {

            position: atlas.ControlPosition.BottomRight

        });

Still won't display as a 'line' versus 'bar' though but I can live with that.

Answer 2

Hi Mike Pettis

I have been able to replicate no scale control on above code.

You seem to be using older version of script source (2.0) but as per map control we need 3.0 script source.

I replaced below lines in your code to get scale control on map.

<script src="https://atlas.microsoft.com/sdk/js/atlas.min.js?api-version=2.0"></script> <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/css/atlas.min.css?api-version=2.0" />

with

<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

Attached screenshot with maptcontrol/3 for reference.

with3.0javascript

You can see scale control on bottom left side.

Hope it helps.

Thank you.

Share via

can't get atlas.control.ScaleControl to work. The scale does not show up on the map

1 additional answer

Your answer