Share via

Azure Map does not zoom out completely

Pawel Block 0 Reputation points
2024-12-29T14:00:03.8+00:00

I'm working on a WordPress plugin and I needed to migrate from Bing Maps API to Azure Maps.

I noticed that it is not possible to zoom out to the maximum on a map created with the Azure maps API when it is restricted to a smaller portion of a screen. The more noticeable it is, the smaller the map gets. 

Example:

This is the maximum zoom-out available.

Comparison with the Bing Maps similar size:

Maximum zoom-out for a Bing Map

Of course, I tested this with minZoom options like:

map

 

As you can see the maximum zoom out is drastically reduced.

This WordPress plugin allows you to show albums with photos from all over the world and smaller maps may not show all of them.

 

Internet search showed me only one other post about this issue 

https://community.fabric.microsoft.com/t5/Issues/Azure-Maps-will-not-completely-zoom-out/idi-p/3446379#feedback-success

and similar but probably not correctly described here:

The new Azure Maps seems to zoom in too far - Microsoft Q&A

 

Is there a solution to this problem or have I missed something?

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

2 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Sinny Pan 185 Reputation points Microsoft Employee
    2025-01-07T08:07:03.4466667+00:00

    Could you please share the code snippet or the size of the container that you are currently using for the map element? This issue might be caused by a smaller container size. Azure Maps control is powered by Maplibre GL JS, which has a native mechanism to fetch fewer map tiles when it detects smaller containers.

    Here is a possible solution you could try:

    Please refer to the sample code below. By using the CSS transform function, we can scale the map canvas to a larger size. This will allow the map control to request more map tiles. We recommend setting the scale to 0.5, but it can be fine-tuned based on your specific scenario.

    For example, if the original map container is set to a height of 300px and a width of 400px, you can expand the container size to twice the original size (height: 600px and width: 800px) and set the scale function to 0.5.

    Note: you might need to adjust other html related components on top of map if any since it is CSS adjustment.

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>Azure Maps Web SDK Samples</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
        <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

        <style>
            #map {
                height: 600px;
                width: 800px;
                transform: scale(0.5);
                transform-origin: left top;
            }
        </style>

        <script>
            var map;

            function GetMap() {
                map = new atlas.Map("map", {
                    authOptions: {
                        authType: "subscriptionKey",
                        subscriptionKey: ""
                    }
                });

                map.controls.add(
                    [
                        new atlas.control.ZoomControl(),
                        new atlas.control.PitchControl(),
                        new atlas.control.CompassControl(),
                        new atlas.control.StyleControl({
                            mapStyles: "all"
                        })
                    ],
                    { position: "top-right" }
                );
            }
        </script>
    </head>
    <body onload="GetMap()">
        <div id="map"></div>
    </body>
</html>
    1 person found this answer helpful.
    0 comments
  2. Sinny Pan 185 Reputation points Microsoft Employee
    2025-01-07T08:10:21.5433333+00:00

    Could you please share the code snippet or the size of the container that you are currently using for the map element? This issue might be caused by a smaller container size. Azure Maps control is powered by Maplibre GL JS, which has a native mechanism to fetch fewer map tiles when it detects smaller containers.

    Here is a possible solution you could try:

    Please refer to the sample code below. By using the CSS transform function, we can scale the map canvas to a larger size. This will allow the map control to request more map tiles. We recommend setting the scale to 0.5, but it can be fine-tuned based on your specific scenario.

    For example, if the original map container is set to a height of 300px and a width of 400px, you can expand the container size to twice the original size (height: 600px and width: 800px) and set the scale function to 0.5.
    Note: You might need to adjust other html related components on top of map since it is CSS adjustment.

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>Azure Maps Web SDK Samples</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
        <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

        <style>
            #map {
                height: 600px;
                width: 800px;
                transform: scale(0.5);
                transform-origin: left top;
            }
        </style>

        <script>
            var map;

            function GetMap() {
                map = new atlas.Map("map", {
                    authOptions: {
                        authType: "subscriptionKey",
                        subscriptionKey: ""
                    }
                });

                map.controls.add(
                    [
                        new atlas.control.ZoomControl(),
                        new atlas.control.PitchControl(),
                        new atlas.control.CompassControl(),
                        new atlas.control.StyleControl({
                            mapStyles: "all"
                        })
                    ],
                    { position: "top-right" }
                );
            }
        </script>
    </head>
    <body onload="GetMap()">
        <div id="map"></div>
    </body>
</html>
    1 person found this answer helpful.
    0 comments

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.