Share via

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

Mike Pettis 0 Reputation points
2025-04-23T22:59:47.04+00:00

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

<!DOCTYPE html>

<html lang="en">

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

Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
808 questions

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.