Azure Maps Show's white screen

Question

Been fighting with this for 2 days now and i'm not sure what Todo.... and its very simple im trying to add a map to my website just the basic one nothing fancy and the only thing that show's is NOTHING lol a blank screen. can someone give me some tips on what to look for?

here is my simple yet frustrating code ---

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


$(document).ready(function() {
   InitMap();


});

function InitMap() {

    //Initialize a map instance.
    var map = new atlas.Map('field', {
        
        style: 'satellite',
        authOptions: {
            authType: 'subscriptionKey',
            subscriptionKey: '<Primary KEY>'
        }
    });
}

any help would be appreciated. Thanks guys/gals :)

i've tried the following

Checked the compatibility made sure im using tier G2. im using my correct key number the div container is correct with the code when i right click and look through the code all the data for the map is there and when i hover over that code it lights up on the page as if it were there ( Its Just White ).

Answer 1

There are three main causes for the map showing a white screen:

1. In correct authentication details provided.
2. When using "Satellite" ensure your Azure Maps accounts Pricing Tier is not set to "Gen1 (S0)". S0 does is a low price tier that does not provide access to Satellite imagery. It is recommended to switch to Gen2 pricing which provides access to all Azure Maps services and is cheaper than "Gen1 (S1)" tier.
3. The map has no dimensions and is not taking up any space on the screen (CSS issue). In this case you wouldn't see any logo or copyrights. To correct, ensure that the map div has a size on the screen.

To debug these issues further do the following:

1. Open developer tools in the browser (F12). Check the console for errors. Check network log to see if any tile requests are failing, if so, look at the error.
2. Inspect the map div and see if it takes up any screen space. If not, modify the CSS assigned to it to give it some dimensions. If you modify the div on the fly, the map may not appear still as it hasn't triggered a rerender. You can call map.resize() to trigger a rerender of the map.