Weather overlays on microsoft atlas maps

I can't seem to get atlas maps weather overlays to work on my map.

I have tried api versions 2.0, 2.1, and 2022-08-01 and I keep getting the same error: enter image description here

My code (from the example https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Weather/Show%20weather%20overlays%20on%20a%20map/Show%20weather%20overlays%20on%20a%20map.html#L16):

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

<div>
    <div id="map" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
</div>

@section Scripts{
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.min.js"></script>
<script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>

<script>
    $(function() {
        var map, tileLayer;

        var weatherTileUrl = 'https://atlas.microsoft.com/map/tile?api-version=2022-08-01&tilesetId=microsoft.weather.radar.main&zoom=2&x=2&y=1'; 

        map = new atlas.Map('map', {
        style: 'satellite_road_labels',
        center: [-99.47, 40.75],
        zoom: 2,
        language: 'en-US',
        view: 'Auto',
            authOptions: {
            authType: 'subscriptionKey',
            subscriptionKey: 'key'
            }
        });

        map.events.add('ready', function () {
            map.controls.add(new atlas.control.StyleControl({
                mapStyles: 'all'
            }), {
                position: 'top-right'
            });

            updateTileLayer();
        });

        function updateTileLayer() {
            if (!tileLayer) {
                tileLayer = new atlas.layer.TileLayer({
                    tileUrl: weatherTileUrl,
                    opacity: 0.9,
                    tileSize: 256
                });

                map.layers.add(tileLayer, 'labels');
            } else {
                tileLayer.setOptions({
                    tileUrl: weatherTileUrl 
                });
            }
        }

    })

</script>
    }

Solution

I suspect an error is happening when that tile URL is being called and JSON response is being returned or something along those lines which would result in the error you are seeing.

A couple of issues I see in your code:

You hard coded the zoom/x/y values, this means every tile will be the same tile. Keep the placeholders as &zoom={z}&x={x}&y={y}.
You have not added any authentication information to the URL, so a 402 error is likely being thrown by the server. If you replace the domain of the URL from atlas.microsoft.com to {azMapsDomain} the map control will automatically set the domain of the request to the same as the map and also use the same authentication information.

Basically, replace the weather URL with the following:

var weatherTileUrl = 'https://{azMapsDomain}/map/tile?api-version=2022-08-01&tilesetId=microsoft.weather.radar.main&zoom={z}&x={x}&y={y}';