Hi everyone, I've created a custom SPFx webpart with React which allows me to display multiple locations using Bing Maps (the out-of-the-box Bing Maps webpart only accepts a single location).
I'm using the Bing Maps V8 web control where you specify a callback function as part of the URL to the script, which gets called when the Bing resources have finished loading. This then allows you to construct the map and render it on the page. Show in the Microsoft docs here…
It's working almost perfectly but I've come up against an issue when my custom webpart is placed on the same page as Microsoft's Bing Maps webpart. The Microsoft webpart appears to be overriding my callback, meaning it never gets called and doesn't load. See below the CallbackOnLoad property of Window.Microsoft.Maps.
For some context here is my function which adds the Bing maps script. I have a couple of global variables which help me ensure it's only loaded once even if there's multiple custom webparts on the page. The callback iterates through each instance of my custom webpart, updating its state and causing it to re-render.
private loadBingMaps(): void {
webpartsWaitingForBingMapsToLoad.push(this);
if (!bingMapsIsLoading) {
bingMapsIsLoading = true;
this.loadScript(scriptUrl);
let browserWindow = window as any;
browserWindow.customMapBingMapsCallback = (() => {
MicrosoftBingMapsWebControl = browserWindow.Microsoft;
webpartsWaitingForBingMapsToLoad.forEach((webpart: React.Component<ICustomMapProps, ICustomMapState>) => {
webpart.setState({
bingScriptLoaded: true
});
});
bingMapsIsLoading = false;
});
}
}
private loadScript(url: string): void {
const script = document.createElement("script");
script.type = "text/javascript";
script.async = true;
script.defer = true;
script.src=url;
document.getElementsByTagName("head")[0].appendChild(script);
}
Can anyone think of a solution to this? I don't really want to tell my users they can't use the two webparts together :)
Thank you, Adam.
