diff options
Diffstat (limited to 'src/client/views/nodes/MapBox/MapBox.tsx')
| -rw-r--r-- | src/client/views/nodes/MapBox/MapBox.tsx | 227 |
1 files changed, 91 insertions, 136 deletions
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index fed4535cb..c44f5765a 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -1,16 +1,15 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Autocomplete, GoogleMap, GoogleMapProps, Marker } from '@react-google-maps/api'; +import { GoogleMapProps, Marker } from '@react-google-maps/api'; import BingMapsReact from 'bingmaps-react'; 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'; import { NumCast, StrCast } from '../../../../fields/Types'; -import { emptyFunction, OmitKeys, returnEmptyString, returnFalse, returnOne, setupMoveUpEvents, Utils } from '../../../../Utils'; +import { emptyFunction, returnEmptyString, returnFalse, returnOne, setupMoveUpEvents, Utils } from '../../../../Utils'; import { Docs } from '../../../documents/Documents'; import { DragManager } from '../../../util/DragManager'; import { SnappingManager } from '../../../util/SnappingManager'; @@ -26,7 +25,6 @@ import { FieldView, FieldViewProps } from '../FieldView'; import { PinProps } from '../trails'; import './MapBox.scss'; import { MapBoxInfoWindow } from './MapBoxInfoWindow'; -import { ReactDOMServer } from "react"; // amongus /** * MapBox architecture: @@ -203,7 +201,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps markerIcon.style.position = 'absolute'; markerIcon.innerHTML = 'Add'; controlUI.appendChild(markerIcon); - // Setup the click event listeners controlUI.addEventListener('click', () => { @@ -368,7 +365,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps ); }; - /** * Called when dragging documents into map sidebar or directly into infowindow; to create a map marker, ref to MapMarkerDocument in Documents.ts * @param doc @@ -584,7 +580,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps res(this.bingGeocode(map, query)); }); } else { - this._bingSearchManager.geocode({ + this._bingSearchManager.geocode({ where: query, callback: action((r: any) => { res(r.results[0].location); @@ -595,46 +591,39 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps }); }; - - - /** * - * + * * ERIC'S BING MAP CODE BELOW - * - * - * - **/ - + * + * + * + **/ - bingSearchBarContents: any = "Boston, MA"; // For Bing Maps: The contents of the Bing search bar (string) + bingSearchBarContents: any = 'Boston, MA'; // For Bing Maps: The contents of the Bing search bar (string) geoDataRequestOptions = { - entityType: 'PopulatedPlace' + entityType: 'PopulatedPlace', }; @action - updateView = ()=> { + updateView = () => { this._bingMap.current.setView({ center: new this.MicrosoftMaps.Location(this.dataDoc.latitude, this.dataDoc.longitude), - // zoom: location - }); - } - + // zoom: location + }); + }; - @action - createPushpin = (latitude:number, longitude:number) =>{ + 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; - } - + }; - infobox:any; - pushpinClicked = (e: { target: { metadata: { title: any; description: any; }; getLocation: () => any; }; }) => { + infobox: any; + pushpinClicked = (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? @@ -642,18 +631,18 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps location: e.target.getLocation(), title: e.target.metadata.title, description: e.target.metadata.description, - visible: true + visible: true, }); } - } + }; //PushpinClicked using MapBoxInfoWindow - private pushpinClicked2 = (e: { target: { metadata: { title: any; description: any; }; getLocation: () => any; }; }, pin: Doc) => { + private pushpinClicked2 = (e: { target: { metadata: { title: any; description: any }; getLocation: () => any } }, pin: Doc) => { // // set which place was clicked // this.selectedPlace = place; pin.infoWindowOpen = true; // console.log("later:" + pin.infoWindowOpen) - } + }; /** * Returns a list of MapMarkerDocument @@ -665,24 +654,23 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps * Map OnClick create pushpin */ @action - mapOnClick=(e: { location: { latitude: any; longitude: any;}; })=>{ - if(this.placePinOn){ + mapOnClick = (e: { location: { latitude: any; longitude: any } }) => { + if (this.placePinOn) { this.createPushpin(e.location.latitude, e.location.longitude); this.addAllPins(); this.placePinOn = false; - console.log("PUSHPIN CREATED") + console.log('PUSHPIN CREATED'); } - } - + }; - searched_pin:any; + searched_pin: any; /* * For Bing Maps - * Called by search button's onClick + * Called by search button's onClick * Finds the geocode of the searched contents and sets location to that location - **/ + **/ @action - bingSearch = async() =>{ + bingSearch = async () => { this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'click', this.mapOnClick); this.addAllPins(); @@ -697,70 +685,62 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps // title: this.bingSearchBarContents, // subTitle: 'subtitle here', // text: '1', - color: 'blue' + color: 'blue', }); - if (temp!=this.searched_pin || this.searched_pin==null){ + if (temp != this.searched_pin || this.searched_pin == null) { this._bingMap.current.entities.push(this.searched_pin); this.searched_pin = temp; } - - - - // 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))) + }; /** - * Adds all pushpins in dataDoc onto the map - */ + * Adds all pushpins in dataDoc onto the map + */ @action - addAllPins = () =>{ - this._bingMap.current.entities.clear(); + addAllPins = () => { + this._bingMap.current.entities.clear(); //TODO: clear all infoboxes - if(this.searched_pin) - this._bingMap.current.entities.push(this.searched_pin); - this.allMapPushpins.map(pin => this.createInfobox(pin)); + if (this.searched_pin) this._bingMap.current.entities.push(this.searched_pin); + this.allMapPushpins.map(pin => this.createInfobox(pin)); this.allMapPushpins.map(pin => this._bingMap.current.entities.push(pin)); - } + }; @action - createInfobox = (pin:any) =>{ + createInfobox = (pin: any) => { var pushPin = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(pin.lat, pin.lng), { // title: this.bingSearchBarContents, // subTitle: 'subtitle here', // 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}/>' - + // 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: infoboxTemplate, // style="width:100; height:100; background:blue" - visible: false + visible: false, }); - try{ + 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); } - catch(e){ - console.log(e) - } - - //Assign the infobox to a map instance. this.infobox.setMap(this._bingMap.current); @@ -776,17 +756,15 @@ 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.pushpinClicked(e)); + this.MicrosoftMaps.Events.addHandler(pushPin, 'click', (e: any) => this.pushpinClicked(e)); // this.MicrosoftMaps.Events.addHandler(pushPin, 'mouseover', (e:any) => this.onHover(e)); + }; - } - - - /** + /** * View options for bing maps - */ + */ bingViewOptions = { - center: { latitude: this.dataDoc.latitude ?? defaultCenter.lat , longitude: this.dataDoc.longitude ?? defaultCenter.lng}, + center: { latitude: this.dataDoc.latitude ?? defaultCenter.lat, longitude: this.dataDoc.longitude ?? defaultCenter.lng }, zoom: this.dataDoc.latitude ?? 10, mapTypeId: 'grayscale', }; @@ -796,24 +774,20 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps */ bingMapOptions = { navigationBarMode: 'square', - backgroundColor:'#f1f3f4', - enableInertia:true, + backgroundColor: '#f1f3f4', + enableInertia: true, }; - - /** * Toggles mode for placing a pin down on map */ @observable placePinOn: boolean | undefined; @action - togglePlacePin = ()=>{ - if (this.placePinOn) - this.placePinOn = false; + togglePlacePin = () => { + if (this.placePinOn) this.placePinOn = false; else this.placePinOn = true; - } - + }; bingMapReady = (map: any) => (this._bingMap = map.map); render() { @@ -833,58 +807,39 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps // zoom: 15, // }); }} - style={{ width: `calc(100% - ${this.sidebarWidthPercent})` }}> - - + style={{ width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}> <div style={{ mixBlendMode: 'multiply' }}>{renderAnnotations(this.transparentFilter)}</div> {renderAnnotations(this.opaqueFilter)} {SnappingManager.GetIsDragging() ? null : renderAnnotations()} {this.annotationLayer} - - {!MapBox.UseBing ? null : - <EditableText editing - onEdit={(newText: string) => this.bingSearchBarContents = newText} - placeholder="..." - size="medium" - text="Boston, MA" - onKeyPress={(e: { key: any; }) => console.log(e.key)} - />} - - {!MapBox.UseBing ? null : - <input type="button" value="Search" - onClick={this.bingSearch}/>} - - {!MapBox.UseBing ? null : - this.placePinOn ? - <input type="button" value="Place Pin Mode On" - onClick={this.togglePlacePin}/> - : - <input type="button" value="Place Pin Mode Off" - onClick={this.togglePlacePin}/> - } - - - {!MapBox.UseBing ? null : - <BingMapsReact onMapReady={this.bingMapReady} bingMapsKey={bingApiKey} height="100%" mapOptions={this.bingMapOptions} width="100%" viewOptions={this.bingViewOptions} > - {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} - /> - ))} - </BingMapsReact> - } + {!MapBox.UseBing ? null : <EditableText editing onEdit={(newText: string) => (this.bingSearchBarContents = newText)} placeholder="..." size="medium" text="Boston, MA" onKeyPress={(e: { key: any }) => console.log(e.key)} />} + + {!MapBox.UseBing ? null : <input type="button" value="Search" onClick={this.bingSearch} />} + + {!MapBox.UseBing ? null : this.placePinOn ? <input type="button" value="Place Pin Mode On" onClick={this.togglePlacePin} /> : <input type="button" value="Place Pin Mode Off" onClick={this.togglePlacePin} />} + + {!MapBox.UseBing ? null : ( + <BingMapsReact onMapReady={this.bingMapReady} bingMapsKey={bingApiKey} height="100%" mapOptions={this.bingMapOptions} width="100%" viewOptions={this.bingViewOptions}> + {this.allMapPushpins + .filter(marker => marker.infoWindowOpen) + .map(marker => ( + // console.log('this is a marker window') + <MapBoxInfoWindow + key={marker[Id]} + {...this.props} + setContentView={emptyFunction} + 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]} {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit} @@ -896,7 +851,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps isAnyChildContentActive={this.isAnyChildContentActive} whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} /> */} - {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? null : ( <MarqueeAnnotator @@ -924,6 +878,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps rootDoc={this.rootDoc} layoutDoc={this.layoutDoc} dataDoc={this.dataDoc} + usePanelWidth={true} showSidebar={this.SidebarShown} nativeWidth={NumCast(this.layoutDoc._nativeWidth)} whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} |