Question 103340 in Azure Question posted in
The official documentation to get you started can be found here.

Azure Maps Show's white screen

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

Tags:

2

Answers


  1. 0

    To add a map to your website using the Azure Maps Web SDK.

    To help you resolve the issue, I would like to suggest you follow the Azure Maps Web SDK best practices.

    Thanks to steve munk for the documentation.

    Html Code

    <html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <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"></script>

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

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-73.985, 40.747],  //Format coordinates as longitude, latitude.
                zoom: 11,   

   authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

   map.events.add('ready', function () {
                //Add zoom controls to bottom right of map.
                map.controls.add(new atlas.control.ZoomControl(), {
                    position: 'bottom-right'
                });

                //Add map style control in top left corner of map.
                map.controls.add(new atlas.control.StyleControl(), {
                    position: 'top-left'
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

    Sample maps

    enter image description here

    enter image description here

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

    If the map data is present in the code and the div container is correct, then the next step would be to check the console in the browser’s developer tools for errors.

    Steps to check the browser’s developer tools.

    1. Right-click on the blank map and select "Inspect" or "Inspect Element".

    2. The browser’s developer tools will open.

    3. Go to the "Console" tab.

    4. Check for any errors that may be causing the map not to render.

    For more information, refer to the MSDoc1 and MSDoc2.

    Login or Signup to reply.
  2. 0

    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.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search