Tips for ensuring that BingMaps is fully loaded in Aurelia

Question

Tips for ensuring that BingMaps is fully loaded in Aurelia

I have been attempting to integrate BingMaps into an Aurelia Single Page Application (SPA). My approach involved adding the BingMaps script tag to the Head section of the Index page, like so:

<head>
    <meta charset="utf-8">
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release'></script>
</head>

Additionally, I have created a Map template and Map controller structured as follows:

map.html

<template>
    <div id='mainMap' style='width: 100vw; height: 100vh;'></div>
</template>

map.ts

export class Map
{
    map:Microsoft.Maps.Map;

    attached(){
        this.map = new Microsoft.Maps.Map('#mainMap', {credentials: myKey});
        this.map.setView({center: new Microsoft.Maps.Location(45.093,14.114), zoom:15});
    }
}

Currently, I am utilizing the Aurelia Typescript WebPack Skeleton for my application. Upon running the application and clicking on the Map menu link, everything works correctly and the map is displayed. However, if I refresh the browser, Aurelia throws an exception:

Unhandled rejection TypeError: Cannot read property 'prototype' of null at k () // additional error lines here...

This issue indicates that the Map script may not be fully loaded before the Attached method in the Map controller executes. How can I instruct Aurelia to wait for the map script to load completely before proceeding with the execution of the Attached method?

google-chrome typescript webpack bing-maps aurelia

Answer 1

Answer №1

If you're looking to load a map script, you have a couple of options at your disposal. Firstly, you can simply add a callback parameter to the script URL and specify the name of a function to execute once the map script has finished loading:

<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=LoadMap' async defer></script>

It's important to note that specifying the release branch for the map control is unnecessary as it defaults to that setting.

Alternatively, if you prefer not to use the callback method, another approach involves checking for the availability of the Microsoft.Maps namespace and waiting until it becomes accessible. This can be achieved by implementing timeouts, as demonstrated below:

function LoadMap(){
    if(typeof Microsoft !== undefined && typeof Microsoft.Maps !== undefined){
        //Execute your map loading code here
    } else {
        setTimeout(LoadMap, 100);
    }
}

Answer 2

If you're looking to load a map script, you have a couple of options at your disposal. Firstly, you can simply add a callback parameter to the script URL and specify the name of a function to execute once the map script has finished loading:

<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=LoadMap' async defer></script>

It's important to note that specifying the release branch for the map control is unnecessary as it defaults to that setting.

Alternatively, if you prefer not to use the callback method, another approach involves checking for the availability of the Microsoft.Maps namespace and waiting until it becomes accessible. This can be achieved by implementing timeouts, as demonstrated below:

function LoadMap(){
    if(typeof Microsoft !== undefined && typeof Microsoft.Maps !== undefined){
        //Execute your map loading code here
    } else {
        setTimeout(LoadMap, 100);
    }
}

Answer 3

Answer №2

To ensure proper functionality, it is essential to wait for two key events. Firstly, you must allow the script to load, followed by waiting for the Microsoft script to load its API. This can be achieved using the callback parameter. I suggest utilizing jQuery for the initial task, as it can easily be converted into a promise. Here's an example:

const _BING_MAPS_URL = 'https//www.bing.com/api/maps/mapcontrol?';
const _DEFAULT_CONFIG = $.params({
  key: 'yourkey',
  callback: 'globalScopedCallback'
});

loadBingMaps() {
  const callbackInvoked = new Promise((resolve) => {
     window.globalScopedCallback = resolve;
  });
  const scriptLoaded = new Promise((resolve, reject) => {
    $.getScript(_BING_MAPS_URL + _DEFAULT_CONFIG).done(resolve).fail(reject);
  });
  // Additional promises loading modules and other necessary items can be added here.
  return Promise.all([callbackInvoked, scriptLoaded]);
}
// Once everything is loaded, execute your desired actions
loadBingMaps().then(doYourAwesomeStuff);

Answer 4

To ensure proper functionality, it is essential to wait for two key events. Firstly, you must allow the script to load, followed by waiting for the Microsoft script to load its API. This can be achieved using the callback parameter. I suggest utilizing jQuery for the initial task, as it can easily be converted into a promise. Here's an example:

const _BING_MAPS_URL = 'https//www.bing.com/api/maps/mapcontrol?';
const _DEFAULT_CONFIG = $.params({
  key: 'yourkey',
  callback: 'globalScopedCallback'
});

loadBingMaps() {
  const callbackInvoked = new Promise((resolve) => {
     window.globalScopedCallback = resolve;
  });
  const scriptLoaded = new Promise((resolve, reject) => {
    $.getScript(_BING_MAPS_URL + _DEFAULT_CONFIG).done(resolve).fail(reject);
  });
  // Additional promises loading modules and other necessary items can be added here.
  return Promise.all([callbackInvoked, scriptLoaded]);
}
// Once everything is loaded, execute your desired actions
loadBingMaps().then(doYourAwesomeStuff);

Tips for ensuring that BingMaps is fully loaded in Aurelia

Answer №1

Answer №2

Similar questions

I continue to encounter the same error while attempting to deliver data to this form

Issue with reading the current length of an array object in a while loop in Angular 6

Self-referencing type alias creates a circular reference

Error: Webpack hot module replacement cannot locate the specified file or directory

Spacing Problem with Title Tooltips

Unable to assign to 'routerLinkActiveOptions' as it is not recognized as a valid property

Yet another error: TS2511 - Unable to instantiate an abstract class

Prep yourself for an incoming response from an object in Angular 9

How to make a POST request with custom headers in NestJS

Adding React with TypeScript to an existing ASP.NET Core MVC application: A step-by-step guide

Access the keys of a Flow object type within your codebase

Some elements that fit the criteria of 'number | function' are not callable at all

Exploring Functions in Object Literal Notation in TypeScript: Why is the Context of 'this' Assigned as Type 'any'?

Typescript function incorrectly returns Protractor's "element.all" output as Promise<string> instead of Promise<string[]>

The most effective approach to creating linked observable subscriptions

Highchart in ionic 2 not displaying

Adding a Component in Ionic 3: Step-by-Step Guide

Can Webpack function without npm?

Diving into Angular Typescript: Understanding the [object Object] in HTML

Formik's handleChange function is causing an error stating "TypeError: null is not an object (evaluating '_a.type')" specifically when used in conjunction with the onChange event in DateInput