diff options
Diffstat (limited to 'src/client/views/nodes/MapBox')
| -rw-r--r-- | src/client/views/nodes/MapBox/MapBox.scss | 8 | ||||
| -rw-r--r-- | src/client/views/nodes/MapBox/MapBox.tsx | 142 |
2 files changed, 68 insertions, 82 deletions
diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss index e329af15c..4fae8d8ff 100644 --- a/src/client/views/nodes/MapBox/MapBox.scss +++ b/src/client/views/nodes/MapBox/MapBox.scss @@ -1,11 +1,4 @@ .mapBox { - width: 100%; - height: 100%; - overflow: hidden; - display: flex; - - - .mapBox-contents { width: 100%; height: 100%; overflow: hidden; @@ -44,5 +37,4 @@ border-radius: 20px; cursor:grabbing; } - } } diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index 2d53116f3..2b3bcb0a2 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -255,88 +255,82 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps } render() { - return <div className="mapBox" ref={this._ref}> - {/* HELLO WORLD! */} - <div className={"mapBox-contents"} - style={{ - pointerEvents: this.isContentActive() ? undefined : "none" - }} - onWheel={e => e.stopPropagation()} - onPointerDown={e => (e.button === 0 && !e.ctrlKey) && e.stopPropagation()} > - {/* // {/* <LoadScript + return <div className="mapBox" ref={this._ref} + style={{ pointerEvents: this.isContentActive() ? undefined : "none" }} > + {/* // {/* <LoadScript // googleMapsApiKey={process.env.GOOGLE_MAPS!} // libraries={['places', 'drawing']} // > */} - <div className="mapBox-wrapper" style={{ - width: `calc(100% - ${this.sidebarWidthPercent})` - }}> - <GoogleMap - mapContainerStyle={mapContainerStyle} - zoom={this.zoom} - center={this.center} - onLoad={map => this.loadHandler(map)} - options={mapOptions} - > - <Autocomplete - onLoad={this.setSearchBox} - onPlaceChanged={this.handlePlaceChanged}> - <input ref={this.inputRef} className="searchbox" type="text" placeholder="Search anywhere:" /> - </Autocomplete> - - {this.childDocs.map(place => ( - <Marker - key={place._markerId} - position={place._latlngLocation} - onLoad={marker => this.markerLoadHandler(marker, place)} - onClick={e => this.markerClickHandler(e, place)} - /> - ))} - {this.infoWindowOpen && this.selectedPlace && ( - <InfoWindow - anchor={this.markerMap[this.selectedPlace._markerId!]} - onCloseClick={this.handleInfoWindowClose} - > - <div style={{ backgroundColor: 'white', opacity: 0.75, padding: 12 }}> - <div style={{ fontSize: 16 }}> + <div className="mapBox-wrapper" + onWheel={e => e.stopPropagation()} + onPointerDown={e => (e.button === 0 && !e.ctrlKey) && e.stopPropagation()} + style={{ width: `calc(100% - ${this.sidebarWidthPercent})` }}> + <GoogleMap + mapContainerStyle={mapContainerStyle} + zoom={this.zoom} + center={this.center} + onLoad={map => this.loadHandler(map)} + options={mapOptions} + > + <Autocomplete + onLoad={this.setSearchBox} + onPlaceChanged={this.handlePlaceChanged}> + <input ref={this.inputRef} className="searchbox" type="text" placeholder="Search anywhere:" /> + </Autocomplete> + + {this.childDocs.map(place => ( + <Marker + key={place._markerId} + position={place._latlngLocation} + onLoad={marker => this.markerLoadHandler(marker, place)} + onClick={e => this.markerClickHandler(e, place)} + /> + ))} + {this.infoWindowOpen && this.selectedPlace && ( + <InfoWindow + anchor={this.markerMap[this.selectedPlace._markerId!]} + onCloseClick={this.handleInfoWindowClose} + > + <div style={{ backgroundColor: 'white', opacity: 0.75, padding: 12 }}> + <div style={{ fontSize: 16 }}> + <div> + <img src="http://placekitten.com/200/300" /> + <hr /> + <form> + <label>Title: </label><br /> + <input type="text" id="fname" name="fname"></input><br /> + <label>Desription: </label><br /> + <textarea style={{ height: 150 }} id="lname" name="lname" placeholder="Notes, a short description of this location, a brief comment, etc."></textarea> + </form> + <hr /> <div> - <img src="http://placekitten.com/200/300" /> - <hr /> - <form> - <label>Title: </label><br /> - <input type="text" id="fname" name="fname"></input><br /> - <label>Desription: </label><br /> - <textarea style={{ height: 150 }} id="lname" name="lname" placeholder="Notes, a short description of this location, a brief comment, etc."></textarea> - </form> - <hr /> - <div> - <button>New link+</button> - </div> + <button>New link+</button> </div> </div> </div> - </InfoWindow> - )} - </GoogleMap> - </div> - {/* {/* </LoadScript > */} - <div className={"mapBox-sidebar"} - style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}> - <SidebarAnnos ref={this._sidebarRef} - {...this.props} - fieldKey={this.annotationKey} - rootDoc={this.rootDoc} - layoutDoc={this.layoutDoc} - dataDoc={this.dataDoc} - usePanelWidth={true} - PanelWidth={this.sidebarWidth} - sidebarAddDocument={this.sidebarAddDocument} - moveDocument={this.moveDocument} - removeDocument={this.removeDocument} - isContentActive={this.isContentActive} - /> - </div> - {this.sidebarHandle} + </div> + </InfoWindow> + )} + </GoogleMap> + </div> + {/* {/* </LoadScript > */} + <div className="mapBox-sidebar" + style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}> + <SidebarAnnos ref={this._sidebarRef} + {...this.props} + fieldKey={this.annotationKey} + rootDoc={this.rootDoc} + layoutDoc={this.layoutDoc} + dataDoc={this.dataDoc} + usePanelWidth={true} + PanelWidth={this.sidebarWidth} + sidebarAddDocument={this.sidebarAddDocument} + moveDocument={this.moveDocument} + removeDocument={this.removeDocument} + isContentActive={this.isContentActive} + /> </div> + {this.sidebarHandle} </div>; } }
\ No newline at end of file |