Post-bob

1 files changed, 32 insertions, 61 deletions

diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 902aa2d13..2298ddc60 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -5,6 +5,7 @@ import { EditableText } from 'browndash-components';
 import { action, computed, IReactionDisposer, observable, ObservableMap, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
 import { Doc, DocListCast, Opt, WidthSym } from '../../../../fields/Doc';
 import { Id } from '../../../../fields/FieldSymbols';
 import { InkTool } from '../../../../fields/InkField';
@@ -628,7 +629,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         
         const mapMarker = Docs.Create.MapMarkerDocument(NumCast(latitude), NumCast(longitude), false, [], {});
         this.addDocument(mapMarker, this.annotationKey);
-        // mapMarker.infoWindowOpen = true;
+        mapMarker.infoWindowOpen = true;
     }
 
 
@@ -645,18 +646,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             });
         }
     }
-    onHover = (e: { target: { metadata: { title: any; description: any; }; getLocation: () => any; }; }) => {
-        //Make sure the infobox has metadata to display.
-        if (e.target.metadata) {
-            //Set the infobox options with the metadata of the pushpin. // HOW DO I GET THE CORRECT INFOBOX FOR THIS PIN? CAN I use this e?
-            this.infobox.setOptions({
-                location: e.target.getLocation(),
-                title: e.target.metadata.title,
-                description: e.target.metadata.description,
-                visible: true
-            });
-        }
-    }
 
     //PushpinClicked using MapBoxInfoWindow
     private pushpinClicked2 = (e: { target: { metadata: { title: any; description: any; }; getLocation: () => any; }; }, pin: Doc) => {
@@ -716,11 +705,11 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             
         
 
-            console.log(this.allMapPushpins
-                .filter(marker => marker.infoWindowOpen)
-                .length)
-            console.log(this.allMapPushpins
-                .map(marker => console.log(marker.infoWindowOpen)))
+            // console.log(this.allMapPushpins
+            //     .filter(marker => marker.infoWindowOpen)
+            //     .length)
+            // console.log(this.allMapPushpins
+            //     .map(marker => console.log(marker.infoWindowOpen)))
     }
 
     /**
@@ -744,11 +733,22 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             // text: '1'
         });
         this._bingMap.current.entities.push(pushPin);
+        
 
+        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}/>'
         //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"/>`,
             visible: false
         });
+        const root = ReactDOM.createRoot(document.getElementById(id)!);
+        root.render(<div style={{width:100, height:100, background:"blue"}}>omg</div>);
+
+
         //Assign the infobox to a map instance.
         this.infobox.setMap(this._bingMap.current);
         //Store some metadata with the pushpin.
@@ -763,8 +763,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         // this.MicrosoftMaps.Events.addHandler(pushPin, 'click', this.pushpinClicked);
 
         // For our infowindow
-        this.MicrosoftMaps.Events.addHandler(pushPin, 'click', (e:any) => this.pushpinClicked2(e, pushPin));
-        this.MicrosoftMaps.Events.addHandler(pushPin, 'mouseover', (e:any) => this.onHover(e));
+        this.MicrosoftMaps.Events.addHandler(pushPin, 'click', (e:any) => this.pushpinClicked(e));
+        // this.MicrosoftMaps.Events.addHandler(pushPin, 'mouseover', (e:any) => this.onHover(e));
 
     }
 
@@ -829,7 +829,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     {this.annotationLayer}
 
 
-
                     {!MapBox.UseBing ? null : 
                     <EditableText editing 
                         onEdit={(newText: string) => this.bingSearchBarContents = newText}
@@ -858,21 +857,20 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         {this.allMapPushpins
                             .filter(marker => marker.infoWindowOpen)
                             .map(marker => (
-                                console.log('this is a marker window')
-                                // <MapBoxInfoWindow
-                                //     key={marker[Id]}
-                                //     {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit}
-                                //     place={marker}
-                                //     markerMap={this.markerMap}
-                                //     PanelWidth={this.infoWidth}
-                                //     PanelHeight={this.infoHeight}
-                                //     moveDocument={this.moveDocument}
-                                //     isAnyChildContentActive={this.isAnyChildContentActive}
-                                //     whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
-                                // />
+                                // console.log('this is a marker window')
+                                <MapBoxInfoWindow
+                                    key={marker[Id]}
+                                    {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit}
+                                    place={marker}
+                                    markerMap={this.markerMap}
+                                    PanelWidth={this.infoWidth}
+                                    PanelHeight={this.infoHeight}
+                                    moveDocument={this.moveDocument}
+                                    isAnyChildContentActive={this.isAnyChildContentActive}
+                                    whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
+                                />
                             ))}
                     </BingMapsReact>
-                    
                     }
                     {/* <MapBoxInfoWindow
                                     key={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})[Id]}
@@ -887,33 +885,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                                 /> */}
                     
 
-
-                    <div style={{ display: MapBox.UseBing ? 'none' : undefined }}>
-                        <GoogleMap mapContainerStyle={mapContainerStyle} onZoomChanged={this.zoomChanged} onCenterChanged={this.centered} onLoad={this.loadHandler} options={mapOptions}>
-                            <Autocomplete onLoad={this.setSearchBox} onPlaceChanged={this.handlePlaceChanged}>
-                                <input className="mapBox-input" ref={this.inputRef} type="text" onKeyDown={e => e.stopPropagation()} placeholder="Enter location" />
-                            </Autocomplete>
-
-                            {this.renderMarkers()}
-                            {this.allMapMarkers
-                                .filter(marker => marker.infoWindowOpen)
-                                .map(marker => (
-                                    <MapBoxInfoWindow
-                                        key={marker[Id]}
-                                        {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit}
-                                        place={marker}
-                                        markerMap={this.markerMap}
-                                        PanelWidth={this.infoWidth}
-                                        PanelHeight={this.infoHeight}
-                                        moveDocument={this.moveDocument}
-                                        isAnyChildContentActive={this.isAnyChildContentActive}
-                                        whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
-                                    />
-                                ))}
-                            {/* {this.handleMapCenter(this._map)} */}
-                        </GoogleMap>
-                    </div>
-
                     {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? null : (
                         <MarqueeAnnotator
                             rootDoc={this.rootDoc}