diff options
| -rw-r--r-- | src/client/views/nodes/MapBox/MapBox.tsx | 101 |
1 files changed, 49 insertions, 52 deletions
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index 242611135..bd631f942 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -2,6 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { GoogleMapProps, Marker } from '@react-google-maps/api'; import BingMapsReact from 'bingmaps-react'; import { EditableText, IconButton, Toggle, Type } from 'browndash-components'; +import { tickStep } from 'd3'; import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; @@ -737,35 +738,38 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps }, { fireImmediately: true } ); - // this._disposer.pins = reaction(() => ({pinList:this.dataDoc[this.annotationKey]}), - // (pinsObject) => { - // this._bingMap.current.entities.clear(); - // pinsObject.pinList.map((pushpin: Doc) => ( - // <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} - // docFilters={returnEmptyDoclist} - // docRangeFilters={returnEmptyDoclist} - // searchFilterDocs={returnEmptyDoclist} - // isDocumentActive={returnFalse} - // isContentActive={returnFalse} - // addDocTab={returnFalse} - // ScreenToLocalTransform={()=>new Transform(0,0,0)} - // fitContentsToBox={undefined} - // focus={returnOne} - // />)); - - // }, {fireImmediately: false}); }; + + // Keeps track of when dragging a pin onto map + draggingPin = false; + dragToggle(){ + console.log("DRAGGING TOGGLE") + document.addEventListener('pointerup', this.dropPin) + } + dropPin = (e:PointerEvent) => { + // document.removeChild(ele); + + + let target = document.elementFromPoint(e.x, e.y); + + while (target != null){ + if (target === this._ref.current){ + const location = this.MicrosoftMaps.tryPixelToLocation(new this.MicrosoftMaps.Point(e.clientX,e.clientY)) + +console.log(location) + this.createPushpin(location.latitude, location.longitude); + + + + break; + } + target = target.parentElement + } + document.removeEventListener('pointerup', this.dropPin) + } + + + searchbarKeyDown = (e: any) => { if (e.key === 'Enter') { this.bingSearch(); @@ -799,6 +803,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps // editing setVal={(newText: string | number) => typeof newText === 'string' && this.searchbarOnEdit(newText)} placeholder="Boston" + // text="text" /> <IconButton @@ -823,37 +828,29 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps <label htmlFor="switch" className="toggle"> <p>{this.placePinOn ? 'Place Pin ON' : 'Place Pin OFF'}</p> </label> - <Toggle + <div draggable={true} onPointerDown={this.dragToggle} + > + <FontAwesomeIcon className="right" icon="angle-double-left" size="lg" /> + {/* <Toggle toggleStatus = {this.placePinOn} onClick={this.togglePlacePin} iconPlacement={"right"} - text="amongus" - - /> + text="amongus" /> */} + </div> </div> - <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} />} - <Toggle - onClick={this.togglePlacePin} - onPointerDown={function noRefCheck(){}} - onPointerDownCapture={function noRefCheck(){}} - onPointerMove={function noRefCheck(){}} - onPointerMoveCapture={function noRefCheck(){}} - onPointerUp={function noRefCheck(){}} - text="Place Pin" - toggleType = "checkbox" - 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} + onPointerUp{...()=>this.draggingPin=false} + + ></BingMapsReact> <div> {!this._mapReady ? null |