question

IainMcKean-6798 avatar image
0 Votes"
IainMcKean-6798 asked IainMcKean-6798 answered

Azure Maps - Javascript script error when creating map

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?



azure-maps
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

IainMcKean-6798 avatar image
0 Votes"
IainMcKean-6798 answered

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

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

IoTGirl avatar image
0 Votes"
IoTGirl answered SatishBoddu-MSFT converted comment to answer

Hi Iain,

Can you try using the very basic sample here: https://docs.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

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

rbrundritt avatar image
0 Votes"
rbrundritt answered IainMcKean-6798 commented

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);
    });
 }





· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thanks for the response.

I've tried both suggestions but unfortunatey I'm still getting the same error message.

0 Votes 0 ·