Azure Maps - Javascript script error when creating map

Question

I'm getting the following Javascript error when creating an Azure Map.

Uncaught TypeError: r[t].indexOf is not a function
    at Dt (atlas.min.js:55)
    at t.Vt.on (atlas.min.js:55)
    at t.on (atlas.min.js:55)
    at new t (atlas.min.js:55)
    at new sv (atlas.min.js:55)
    at GetMap (Maps.js?v=lM_CblvOkwj6DcuCQr8DIa0BiL0oTcqyIVINzcIWbKM:69)

My JS function:

function GetMap(lat, lon) {
    map = new atlas.Map('Map', {
        center: [lon, lat],
        zoom: 14,
        view: 'Auto',
        authOptions: {
            authType: 'subscriptionKey',
            subscriptionKey: subscriptionKey,
            getToken: function (resolve, reject, map) {
                var tokenServiceUrl = "https://azuremapscodesamples.azurewebsites.net/Common/TokenService.ashx";
                fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
            }
        }
    });
    marker = new atlas.HtmlMarker({
        htmlContent: '<div class="pulseIcon"></div>',
        position: [lon, lat],
        draggable: true
});
    map.markers.add(marker);
}

The issue on the creation of the map object

 map = new atlas.Map('Map', {

Any ideas why this is happening?

Answer 1

I found what the problem was, a js file within my project was conflicting with atlas.min.js.

Answer 2

Two things to try.

1. Remove the "getToken" code from the authOptions. That is only used for Azure Active Directory auth, not key based auth. This likely isn't the issue, but not needed and one less possible point of issue.
2. All code that accesses the map should wait for the "ready" event to fire before accessing the map. Wrap your marker code with a callback for the ready event. For example: function GetMap(lat, lon) {
   map = new atlas.Map('Map', {
   center: [lon, lat],
   zoom: 14,
   view: 'Auto',
   authOptions: {
   authType: 'subscriptionKey',
   subscriptionKey: subscriptionKey
   }
   });

    map.events.add('ready', function () {
       marker = new atlas.HtmlMarker({
           htmlContent: '<div class="pulseIcon"></div>',
           position: [lon, lat],
           draggable: true
       });
   
       map.markers.add(marker);
   });
   

   }

Answer 3

Hi Iain,

Can you try using the very basic sample here: https://learn.microsoft.com/en-us/azure/azure-maps/how-to-use-map-control? This may be to do with your parameter passing or the var definition missing in your code. We don't see the full picture of how this is being called so it is hard to tell why you are getting the "index of" error.

<script type="text/javascript">  
   function InitMap()  
   {  
       **var** map = new atlas.Map('myMap', {  
           center: **[-122.33, 47.6]**,  
           zoom: 12,  
           language: 'en-US',  
           authOptions: {  
               authType: 'subscriptionKey',  
               subscriptionKey: '<Your Azure Maps Key>'  
           }  
       });  
  }  
</script>  

Sincerely, IoTGirl