none
Azure maps not loading in IE 11 RRS feed

  • Question

  • Azure maps doesn't seem to be loading in IE11 but is working in chrome and safari. Not sure if there is a CORS or auth issue when making a call to the API. Below is the code of how I'm initializing the map. Didn't look like there was specific documentation regarding initializing maps in IE. Has there been any updates to the API in the past couple months? The map will load on all other browsers (chrome, edge, safari, and firefox).

    code:

      let map = new window.atlas.Map("map", {
          center: listingsMapLocation,
          zoom:
            search_location === undefined || search_location === ""
              ? US_ZOOM_LEVEL
              : 8,
          authOptions: {
            authType: "subscriptionKey",
            subscriptionKey: AZURE_MAPS_API_KEY
          }
        });



    • Edited by rwcrwc Wednesday, June 12, 2019 10:37 PM
    Wednesday, June 12, 2019 7:47 PM

All replies

  • @rwcrwc

    Have you had a chance to see the above response?

    Monday, June 17, 2019 8:29 AM
    Moderator
  • I have a similar problem on IE11. I've gone through the suggestions and have not been able to make much progress on rendering the map. The map works fine on Chrome, FireFox, Edge.

    1. The following messages appear:
      • SEC7118: XMLHttpRequest for https://atlas.microsoft.com/locs/mapcontrol/2019-3-12/en/resource.json required Cross Origin Resource Sharing (CORS).
      • SEC7118: XMLHttpRequest for https://atlas.microsoft.com/styles/definitions/2019-05-24.json required Cross Origin Resource Sharing (CORS).
    2. We've set a fixed height on the div. While inspecting in IE11, most of the markup that Azure maps generates for the Map div is there, but the canvas seems to not render. The Microsoft logo renders but the TomTom logo does not
    3. We are not loading the map behind a hidden div, but we are using React as a framework with Azure Maps
    4. The samples also give a similar CORS message listed in item 1. Could these CORS errors be the issue?
    Thursday, September 19, 2019 10:06 PM
  • IE11 is not a supported browser. The list of supported browsers can be found here: https://docs.microsoft.com/en-us/azure/azure-maps/supported-browsers

    There is guidance on how to target older browsers in that document as well. 

    The main Azure Maps web SDK makes heavy use of Web GL so that it can render large data sets that update frequently. IE11 has poor Web GL support.

    Friday, September 20, 2019 6:56 AM
  • Just wanted to add that you can check programmatically if the browser supports Azure Maps:

    if (!atlas.isSupported()) {
        alert('Your browser is not supported by Azure Maps');
    } else if (!atlas.isSupported(true)) {
        alert('Your browser is supported by Azure Maps, but may have major performance caveats.');
    } else {
        // Your browser is supported. Add your map code here.
    }

    *source: https://docs.microsoft.com/en-us/azure/azure-maps/supported-browsers

     
    Tuesday, September 24, 2019 9:13 PM
    Moderator