diff options
| -rw-r--r-- | src/client/views/nodes/MapBox/MapBox.tsx | 293 |
1 files changed, 135 insertions, 158 deletions
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index 9adae0a6e..f93126e04 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -116,7 +116,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps @observable private _marqueeing: number[] | undefined; @observable private inputRef = React.createRef<HTMLInputElement>(); @observable private searchMarkers: google.maps.Marker[] = []; - @observable private searchBox = undefined as any; // new window.google.maps.places.Autocomplete(this.inputRef.current!, options); + @observable private searchBox = undefined as any; // new window.google.maps.places.Autocomplete(this.inputRef.current!, options); @observable private _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>(); @computed get allSidebarDocs() { return DocListCast(this.dataDoc[this.SidebarKey]); @@ -136,14 +136,11 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps static _hadSelection: boolean = false; private _sidebarRef = React.createRef<SidebarAnnos>(); private _ref: React.RefObject<HTMLDivElement> = React.createRef(); - private _disposer: {[key:string]:IReactionDisposer} = {} - componentDidMount() { - - - } + private _disposer: { [key: string]: IReactionDisposer } = {}; + componentDidMount() {} componentWillUnmount(): void { - Object.keys(this._disposer).forEach(key => this._disposer[key]?.()) + Object.keys(this._disposer).forEach(key => this._disposer[key]?.()); } // iterate allMarkers to size, center, and zoom map to contain all markers private fitBounds = (map: google.maps.Map) => { @@ -606,7 +603,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps entityType: 'PopulatedPlace', }; - // incrementer: number = 0; /* * Creates Pushpin doc and adds it to the list of annotations @@ -614,8 +610,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps @action createPushpin = (latitude: number, longitude: number) => { // Stores the pushpin as a MapMarkerDocument - const mapMarker = Docs.Create.PushpinDocument(NumCast(latitude), NumCast(longitude), false, [], {} - // ,'pushpinIDamongus'+ this.incrementer++ + const mapMarker = Docs.Create.PushpinDocument( + NumCast(latitude), + NumCast(longitude), + false, + [], + {} + // ,'pushpinIDamongus'+ this.incrementer++ ); this.addDocument(mapMarker, this.annotationKey); @@ -626,17 +627,15 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps * Pushpin dblclick */ @action - pushpinDblClicked = (pin:any, pinDoc?:Doc) => { - if(pinDoc) - this.removePushpin(pinDoc,pin); - else - this._bingMap.current.entities.remove(pin); + pushpinDblClicked = (pin: any, pinDoc?: Doc) => { + if (pinDoc) this.removePushpin(pinDoc, pin); + else this._bingMap.current.entities.remove(pin); }; /* * Pushpin onclick */ @action - pushpinClicked = (pinDoc:Doc) => { + pushpinClicked = (pinDoc: Doc) => { // TODO: // if (sidebarannos is not open) open sidebarannos // creates button onclick removes the doc from annotations @@ -644,8 +643,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps // pan to pushpin location this.dataDoc.latitude = pinDoc.lat; this.dataDoc.longitude = pinDoc.lng; - - }; /** @@ -667,32 +664,27 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps } }; - - - /* * Updates values of layout doc to match the current map */ @action updateLayout = () => { - this.dataDoc.latitude = this._bingMap.current.getCenter().latitude; - this.dataDoc.longitude = this._bingMap.current.getCenter().longitude; - this.dataDoc.zoom = this._bingMap.current.getZoom(); - // if(this.dataDoc.mapType == 'x'){ - // this.dataDoc.locationToLookAt - // } - // this.dataDoc.mapType = new this.MicrosoftMaps.MapTypeId(); + this.dataDoc.latitude = this._bingMap.current.getCenter().latitude; + this.dataDoc.longitude = this._bingMap.current.getCenter().longitude; + this.dataDoc.mapZoom = this._bingMap.current.getZoom(); + // if(this.dataDoc.mapType == 'x'){ + // this.dataDoc.locationToLookAt + // } + // this.dataDoc.mapType = new this.MicrosoftMaps.MapTypeId(); }; /* * Updates maptype */ @action updateMapType = () => { - this.dataDoc.mapType = this._bingMap.current.getMapTypeId(); - + this.dataDoc.mapType = this._bingMap.current.getMapTypeId(); }; - searched_pin: any; /* * For Bing Maps @@ -704,7 +696,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps const location = await this.bingGeocode(this._bingMap, this.bingSearchBarContents); this.dataDoc.latitude = location.latitude; this.dataDoc.longitude = location.longitude; - this.dataDoc.zoom = this._bingMap.current.getZoom(); + this.dataDoc.mapZoom = this._bingMap.current.getZoom(); // this.dataDoc.mapType = this._bingMap.current.getMapTypeId(); // this.bingSearchBarContents=location.name; @@ -714,21 +706,17 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps // this._bingMap.current.setView({ // center: new this.MicrosoftMaps.Location(this.dataDoc.latitude, this.dataDoc.longitude), // }); - - - // Creates a temporary pin but does not add it to the dataDoc var temp = new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(location.latitude, location.longitude), { color: 'blue', }); - + this.MicrosoftMaps.Events.addHandler(temp, 'dblclick', (e: any) => this.pushpinDblClicked(temp)); if (temp != this.searched_pin || this.searched_pin == null) { this._bingMap.current.entities.push(temp); this.searched_pin = temp; } - }; /** @@ -745,18 +733,17 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps * Returns doc w/ relevant info */ getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => { - const anchor = - Docs.Create.MapanchorDocument({ - title: 'MapAnchor:' + this.rootDoc.title, - presLat: NumCast(this.dataDoc.latitude), - presLong: NumCast(this.dataDoc.longitude), - presZoom: NumCast(this.dataDoc.zoom), - presMapType: StrCast(this.dataDoc.mapType), - // preslocationToLookAt:this.dataDoc.locationToLookAt, - // presType: - layout_unrendered: true, - annotationOn: this.rootDoc, - }); + const anchor = Docs.Create.MapanchorDocument({ + title: 'MapAnchor:' + this.rootDoc.title, + config_latitude: NumCast(this.dataDoc.latitude), + config_longitude: NumCast(this.dataDoc.longitude), + config_zoom: NumCast(this.dataDoc.mapZoom), + config_mapType: StrCast(this.dataDoc.mapType), + // preslocationToLookAt:this.dataDoc.locationToLookAt, + // presType: + layout_unrendered: true, + annotationOn: this.rootDoc, + }); if (anchor) { if (!addAsAnnotation) anchor.backgroundColor = 'transparent'; /* addAsAnnotation &&*/ this.addDocument(anchor); @@ -767,33 +754,33 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps }; /* - * Input: pin doc - * Adds MicrosoftMaps Pushpin to the map (render) - */ + * Input: pin doc + * Adds MicrosoftMaps Pushpin to the map (render) + */ @action addPushpin = (pin: Doc) => { - const pushPin = pin.infoWindowOpen ? new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(pin.lat, pin.lng), {}): new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(pin.lat, pin.lng), - // {icon: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/24/Map-Marker-Marker-Outside-Chartreuse-icon.png'} - ); + const pushPin = pin.infoWindowOpen + ? new this.MicrosoftMaps.Pushpin(new this.MicrosoftMaps.Location(pin.latitude, pin.longitude), {}) + : new this.MicrosoftMaps.Pushpin( + new this.MicrosoftMaps.Location(pin.latitude, pin.longitude) + // {icon: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/24/Map-Marker-Marker-Outside-Chartreuse-icon.png'} + ); - this._bingMap.current.entities.push(pushPin); this.MicrosoftMaps.Events.addHandler(pushPin, 'click', (e: any) => this.pushpinClicked(pin)); this.MicrosoftMaps.Events.addHandler(pushPin, 'dblclick', (e: any) => this.pushpinDblClicked(pushPin, pin)); - } - - + }; @observable - pinIsSelected_TEMPORARY:boolean=false; // toggles if remove pin button appears + pinIsSelected_TEMPORARY: boolean = false; // toggles if remove pin button appears /* - * Input: pin doc - * Removes MicrosoftMaps Pushpin to the map (render) - */ + * Input: pin doc + * Removes MicrosoftMaps Pushpin to the map (render) + */ @action - removePushpin = (pinDoc:Doc,pin:any)=>{ + removePushpin = (pinDoc: Doc, pin: any) => { // this.allMapPushpins // this.allMapPushpins.map(pin => this.addPushpin(pin)); // this._bingMap.current.entities.clear(); @@ -801,7 +788,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps this.removeDocument(pinDoc, this.annotationKey); // this.dataDoc[this.annotationKey] - } + }; /** * View options for bing maps @@ -819,14 +806,14 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps navigationBarMode: 'square', backgroundColor: '#f1f3f4', enableInertia: true, - supportedMapTypes:['grayscale', 'canvasLight'], - disableMapTypeSelectorMouseOver :true, + supportedMapTypes: ['grayscale', 'canvasLight'], + disableMapTypeSelectorMouseOver: true, // showScalebar:true // disableRoadView:true, // disableBirdseye:true - streetsideOptions:{ - showProblemReporting:false, - showCurrentAddress:false, + streetsideOptions: { + showProblemReporting: false, + showCurrentAddress: false, }, }; @@ -842,36 +829,38 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps }; @action - searchbarOnEdit=(newText:string)=>{ - this.bingSearchBarContents = newText - } + searchbarOnEdit = (newText: string) => { + this.bingSearchBarContents = newText; + }; /* - * Called when BingMap is first rendered + * Called when BingMap is first rendered * Initializes starting values */ bingMapReady = (map: any) => { this._bingMap = map.map; if (!this._bingMap.current) { - alert("NO Map!?") + alert('NO Map!?'); } - this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'click', undoable(this.mapOnClick, "Added Pin to Map")); - this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'viewchangeend', undoable(this.updateLayout, "Map Layout Change")); - this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'maptypechanged', undoable(this.updateMapType, "Map ViewType Change")); + this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'click', undoable(this.mapOnClick, 'Added Pin to Map')); + this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'viewchangeend', undoable(this.updateLayout, 'Map Layout Change')); + this.MicrosoftMaps.Events.addHandler(this._bingMap.current, 'maptypechanged', undoable(this.updateMapType, 'Map ViewType Change')); //this.updateLayout(); - // this.updateMapType(); + // this.updateMapType(); this.props.setContentView?.(this); - this._disposer.location = reaction(() => ({lat:this.rootDoc.latitude, lng:this.rootDoc.longitude, zoom:this.rootDoc.zoom,mapType:this.rootDoc.mapType}), - (locationObject) => { - // if (this._bingMap.current) + this._disposer.location = reaction( + () => ({ lat: this.rootDoc.latitude, lng: this.rootDoc.longitude, zoom: this.rootDoc.mapZoom, mapType: this.rootDoc.mapType }), + locationObject => { + // if (this._bingMap.current) this._bingMap.current?.setView({ mapTypeId: locationObject.mapType, - zoom:locationObject.zoom, + zoom: locationObject.zoom, center: new this.MicrosoftMaps.Location(locationObject.lat, locationObject.lng), }); - - }, {fireImmediately: true}); - // this._disposer.pins = reaction(() => ({pinList:this.dataDoc[this.annotationKey]}), + }, + { fireImmediately: true } + ); + // this._disposer.pins = reaction(() => ({pinList:this.dataDoc[this.annotationKey]}), // (pinsObject) => { // this._bingMap.current.entities.clear(); // pinsObject.pinList.map((pushpin: Doc) => ( @@ -881,7 +870,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps // DataDoc={undefined} // PanelWidth={returnOne} // PanelHeight={returnOne} - // NativeWidth={returnOne} + // NativeWidth={returnOne} // NativeHeight={returnOne} // onClick={()=>new ScriptField(undefined)} // onKey={undefined} @@ -899,13 +888,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps // />)); // }, {fireImmediately: false}); - } - searchbarKeyDown = (e:any)=>{ + }; + searchbarKeyDown = (e: any) => { if (e.key === 'Enter') { - this.bingSearch() - } - - } + this.bingSearch(); + } + }; render() { const renderAnnotations = (childFilters?: () => string[]) => null; return ( @@ -929,44 +917,39 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps {SnappingManager.GetIsDragging() ? null : renderAnnotations()} {this.annotationLayer} - - <div className='mapBox-searchbar'> - <EditableText - // editing - setVal={(newText:string|number) => typeof newText === "string" && this.searchbarOnEdit(newText)} - placeholder="Boston" - // text="text" - /> + <div className="mapBox-searchbar"> + <EditableText + // editing + setVal={(newText: string | number) => typeof newText === 'string' && this.searchbarOnEdit(newText)} + placeholder="Boston" + // text="text" + /> <IconButton - icon={<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="magnifying-glass" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" color="#DFDFDF"><path fill="currentColor" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path></svg>} - onClick={this.bingSearch} - onDoubleClick={function noRefCheck(){}} - onPointerDown={function noRefCheck(){}} - onPointerDownCapture={function noRefCheck(){}} - onPointerMove={function noRefCheck(){}} - onPointerMoveCapture={function noRefCheck(){}} - onPointerUp={function noRefCheck(){}} - type={Type.TERT} + icon={ + <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="magnifying-glass" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" color="#DFDFDF"> + <path + fill="currentColor" + d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path> + </svg> + } + onClick={this.bingSearch} + onDoubleClick={function noRefCheck() {}} + onPointerDown={function noRefCheck() {}} + onPointerDownCapture={function noRefCheck() {}} + onPointerMove={function noRefCheck() {}} + onPointerMoveCapture={function noRefCheck() {}} + onPointerUp={function noRefCheck() {}} + type={Type.TERT} /> - <input type="checkbox" - id="switch" - className="checkbox" - checked={this.placePinOn} - onChange={this.togglePlacePin} - /> - - <label htmlFor="switch" - className="toggle"> - <p> - {this.placePinOn ? 'Place Pin ON' : 'Place Pin OFF'} - </p> - </label> + <input type="checkbox" id="switch" className="checkbox" checked={this.placePinOn} onChange={this.togglePlacePin} /> + + <label htmlFor="switch" className="toggle"> + <p>{this.placePinOn ? 'Place Pin ON' : 'Place Pin OFF'}</p> + </label> </div> - - - <div className='mapBox-topbar'> + + <div className="mapBox-topbar"> {/* <input type="button" value="Search" onClick={this.bingSearch} /> */} - {/* {this.placePinOn ? <input type="button" value="Place Pin Mode On" onClick={this.togglePlacePin} /> : <input type="button" value="Place Pin Mode Off" onClick={this.togglePlacePin} />} */} {/* {this.placePinOn ? <input type="button" value="Place Pin Mode On" onClick={this.togglePlacePin} /> : <input type="button" value="Place Pin Mode Off" onClick={this.togglePlacePin} />} @@ -983,41 +966,35 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps toggleStatus= {false} type="secondary" /> */} - - </div> - {/* {this.pinIsSelected_TEMPORARY? <input type="button" value="Delete Pin" onClick={this.removeSelectedPin} /> : null} */} - <BingMapsReact onMapReady={this.bingMapReady} bingMapsKey={bingApiKey} height="100%" mapOptions={this.bingMapOptions} width="100%" viewOptions={this.bingViewOptions}> - </BingMapsReact> + <BingMapsReact onMapReady={this.bingMapReady} bingMapsKey={bingApiKey} height="100%" mapOptions={this.bingMapOptions} width="100%" viewOptions={this.bingViewOptions}></BingMapsReact> <div> - - {this.allMapPushpins - .map(pushpin => ( - <DocumentView - {...this.props} - Document={pushpin} - DataDoc={undefined} - PanelWidth={returnOne} - PanelHeight={returnOne} - NativeWidth={returnOne} - NativeHeight={returnOne} - onClick={()=>new ScriptField(undefined)} - onKey={undefined} - onDoubleClick={undefined} - onBrowseClick={undefined} - childFilters={returnEmptyFilter} - childFiltersByRanges={returnEmptyFilter} - searchFilterDocs={returnEmptyDoclist} - isDocumentActive={returnFalse} - isContentActive={returnFalse} - addDocTab={returnFalse} - ScreenToLocalTransform={()=>new Transform(0,0,0)} - fitContentsToBox={undefined} - focus={returnOne} - /> - ))} + {this.allMapPushpins.map(pushpin => ( + <DocumentView + {...this.props} + Document={pushpin} + DataDoc={undefined} + PanelWidth={returnOne} + PanelHeight={returnOne} + NativeWidth={returnOne} + NativeHeight={returnOne} + onClick={() => new ScriptField(undefined)} + onKey={undefined} + onDoubleClick={undefined} + onBrowseClick={undefined} + childFilters={returnEmptyFilter} + childFiltersByRanges={returnEmptyFilter} + searchFilterDocs={returnEmptyDoclist} + isDocumentActive={returnFalse} + isContentActive={returnFalse} + addDocTab={returnFalse} + ScreenToLocalTransform={() => new Transform(0, 0, 0)} + fitContentsToBox={undefined} + focus={returnOne} + /> + ))} </div> {/* <MapBoxInfoWindow key={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})[Id]} |