azure-maps

Is it possible to remove labels from Azure maps?

I want to render a static map (as image) using Azure Maps that only shows the basic world view and a couple of pins I will drop on it. I do not want the labels layer that shows the ocean and country names.

Looking through the Azure Maps Code samples (https://azuremapscodesamples.azurewebsites.net/) I just can't seem to find anything that would allow us to simplify the map.

Google maps supports this by setting visibility for the labels to false. The old Microsoft Maps supported this by setting the labelOverlay to hidden. I'd like to produce something like this: https://snazzymaps.com/style/209544/no-labels

How can all labels be hidden in an Azure Map (or Bing map for that matter) so I can get a simple image with my pins set with my labels, and all other labels removed?

Solution

  • There isn't a documented API for this, but there is an unsupported way to do this. The base maps in Azure Maps use the Mapbox Vector Tile style schema which is a open standard. Its possible to access the base map layers and hide any label layers you want. Here is a code sample that hides all the labels in the base map:

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />

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

    <script type='text/javascript'>
        var map;

        function GetMap() {

            map = new atlas.Map('myMap', {
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<YOUR AZURE MAPS KEY>'
                }
            });

            map.events.add('ready', function () {
                var layers = map.map.getStyle().layers;

                for (var i = 0; i < layers.length; i++) {
                    if (layers[i].type == 'symbol' && layers[i].source == 'bing-mvt' && layers[i].layout && layers[i].layout['text-field'] && layers[i].layout['text-field'] !== '') {
                        map.map.setLayoutProperty(layers[i].id, 'visibility', 'none');
                    }
                }

                //Add any your post map load code here.
            });
        }
    </script>
</head>
<body onload="GetMap()">
    <div id="myMap" style="height:100vh"></div>
</body>
</html>