Azure Maps not displaying on .NET Framework MVC Web app

Question

I've posted this question to the Azure Community but gotten no response. Here's the problem:

I just created a subscription for Azure Maps. I'm using Visual Studio 2022 for my web application using .Net Framework 4.8, MVC.

My references in the layout web page are:

The function to initialize the Azure Maps is:

var map;

// Your Azure Maps client id for accessing your Azure Maps account.
function getMap(azureKey) {

    //Create a map instance
    map = new atlas.Map('divMap',
        {

            view: 'Auto',
            center: [-98.484247, 39.011902],  //Format coordinates as longitude, latitude
            zoom: 5,
            language: 'en-US',
            //Add authentication details for connecting to Azure Maps.
            authOptions: {
                // Use an Azure Maps key.
                // Get an Azure Maps key at https://azure.com/maps.
                // NOTE: The primary key should be used as the key.
                authType: 'subscriptionKey',
                subscriptionKey: azureKey
            }
        });

    map.setStyle({
        style: 'satellite_road_labels'
    });
}

Why is the map not showing? I just want to display a satellite imagery of the US as background map.

Appreciate any help.

Answer

A few things to check:

Make sure you have something calling the getMap function when you want the map to be loaded. This could be as part of the pages onload event or in response to some action (e.g. click a button and load the map).
Make sure you have a
with some width/height in your HTML that has ID divMap.
The call to map.setStyle is likely going to throw an error as you are calling the map before it is ready. Listen for the maps ready event before making calls to map functions. Note, you can just set the style when the map is being loaded instead of setting it after the map initially loads (initializing it with the style you want is much more efficient). For example

map = new atlas.Map('divMap',
{
	style: 'satellite_road_labels',
	view: 'Auto',
	center: [-98.484247, 39.011902],  //Format coordinates as longitude, latitude
	zoom: 5,
	language: 'en-US',
	
	authOptions: {
		authType: 'subscriptionKey',
		subscriptionKey: azureKey
	}
});

// Wait until the map resources are ready
map.events.add("ready", function () {

	//Add any code you want to run once the map is ready.
	
});

Check the developer console of your browser for errors (press F12 when in the browser).

Share via

Azure Maps not displaying on .NET Framework MVC Web app

1 answer

Your answer