last chance at fixing maps startup.

3 files changed, 10 insertions, 6 deletions

diff --git a/deploy/index.html b/deploy/index.html
index c23deabd3..b345e193f 100644
--- a/deploy/index.html
+++ b/deploy/index.html
@@ -10,7 +10,6 @@
         <link rel="shortcut icon" type="image/jpg" href="./assets/favicon.png" />
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
         <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/3.3.1/typescript.min.js"></script>
-        <script type="text/javascript" src="http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[YOUR_BING_MAPS_KEY]" async defer></script>
 
         <script>
             function getCookie(cname) {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 957ff4fb5..707cf3a34 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -144,6 +144,12 @@ export class MainView extends React.Component {
     mainDocViewHeight = () => this._dashUIHeight - this.headerBarDocHeight();
 
     componentDidMount() {
+        const scriptTag = document.createElement('script');
+        scriptTag.setAttribute('type', 'text/javascript');
+        scriptTag.setAttribute('src', 'https://www.bing.com/api/maps/mapcontrol?callback=makeMap');
+        scriptTag.async = true;
+        scriptTag.defer = true;
+        document.body.appendChild(scriptTag);
         document.getElementById('root')?.addEventListener('scroll', e => (ele => (ele.scrollLeft = ele.scrollTop = 0))(document.getElementById('root')!));
         const ele = document.getElementById('loader');
         const prog = document.getElementById('dash-progress');
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 0842485ee..b54157593 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -106,6 +106,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     componentWillUnmount(): void {
         this._unmounting = true;
         this.deselectPin();
+        this._rerenderTimeout && clearTimeout(this._rerenderTimeout);
         Object.keys(this._disposers).forEach(key => this._disposers[key]?.());
     }
 
@@ -690,22 +691,20 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     searchbarKeyDown = (e: any) => e.key === 'Enter' && this.bingSearch();
 
     static _firstRender = true;
-    static _rerenderDelay = 0;
+    static _rerenderDelay = 500;
     _rerenderTimeout: any;
     render() {
         // bcz:  no idea what's going on here, but bings maps have some kind of bug
         // such that we need to delay rendering a second map on startup until the first map is rendered.
         this.rootDoc[DocCss];
-        if (MapBox._firstRender) {
-            MapBox._firstRender = false;
-            MapBox._rerenderDelay = 500;
-        } else if (MapBox._rerenderDelay) {
+        if (MapBox._rerenderDelay) {
             // prettier-ignore
             this._rerenderTimeout = this._rerenderTimeout ??
                 setTimeout(action(() => {
                     if ((window as any).Microsoft?.Maps) {
                         MapBox._rerenderDelay = 0;
                     }
+                    this._rerenderTimeout = undefined;
                     this.rootDoc[DocCss] = this.rootDoc[DocCss] + 1;
                 }), MapBox._rerenderDelay);
             return null;