post-demo

1 files changed, 20 insertions, 7 deletions

diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index d0eb28f91..fed4535cb 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -26,6 +26,7 @@ import { FieldView, FieldViewProps } from '../FieldView';
 import { PinProps } from '../trails';
 import './MapBox.scss';
 import { MapBoxInfoWindow } from './MapBoxInfoWindow';
+import { ReactDOMServer } from "react";
 // amongus
 /**
  * MapBox architecture:
@@ -626,7 +627,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     @action
     createPushpin = (latitude:number, longitude:number) =>{
         // Stores the pushpin as a MapMarkerDocument
-        
         const mapMarker = Docs.Create.MapMarkerDocument(NumCast(latitude), NumCast(longitude), false, [], {});
         this.addDocument(mapMarker, this.annotationKey);
         mapMarker.infoWindowOpen = true;
@@ -670,6 +670,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             this.createPushpin(e.location.latitude, e.location.longitude);
             this.addAllPins();
             this.placePinOn = false;
+            console.log("PUSHPIN CREATED")
         }
     }
 
@@ -702,7 +703,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             this._bingMap.current.entities.push(this.searched_pin);
             this.searched_pin = temp;
         }
-            
+        
         
 
             // console.log(this.allMapPushpins
@@ -737,16 +738,28 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
         var id = Utils.GenerateGuid();
         document.getElementById(id);
-        
         var infoboxTemplate = '<div class="customInfobox"><div class="title">{title}</div>{description}</div>';
-        var infowindowtemp = '<MapBoxInfoWindow key={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})[Id]}{...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit} place={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})} markerMap={this.markerMap} PanelWidth={this.infoWidth} PanelHeight={this.infoHeight} moveDocument={this.moveDocument} isAnyChildContentActive={this.isAnyChildContentActive} whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}/>'
+        // var infowindowtemp = '<MapBoxInfoWindow key={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})[Id]}{...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit} place={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})} markerMap={this.markerMap} PanelWidth={this.infoWidth} PanelHeight={this.infoHeight} moveDocument={this.moveDocument} isAnyChildContentActive={this.isAnyChildContentActive} whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}/>'
+        
+        // console.log(<div id={id} style={{width:100, height:100, background:"blue"}}/>)
+        // var htmlString = ReactDOMServer.renderToString(<div id={id} style={{width:100, height:100, background:"blue"}}/>);
+        
+
         //Create an infobox at the pin
         this.infobox = new this.MicrosoftMaps.Infobox(new this.MicrosoftMaps.Location(pin.lat, pin.lng), {
-            htmlContent: `<div id=${id} style="width:100; height:100; background:blue"/>`,
+            htmlContent: infoboxTemplate, // style="width:100; height:100; background:blue"
             visible: false
         });
-        // const root = ReactDOM.createRoot(document.getElementById(id)!);
-        // root.render(<div style={{width:100, height:100, background:"blue"}}>omg</div>);
+        try{
+            // console.log(document.getElementById(id))
+            // console.log(this.infobox)
+            // const root = ReactDOM.createRoot(document.getElementById(id)!);
+            // root.render(<div style={{width:100, height:100, background:"blue"}}/>);
+        }
+        catch(e){
+            console.log(e)
+        }
+        
 
 
         //Assign the infobox to a map instance.