aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/client/views/nodes/MapBox/MapAnchorMenu.tsx236
-rw-r--r--src/client/views/nodes/MapBox/MapBox.scss7
-rw-r--r--src/client/views/nodes/MapBox/MapBox.tsx183
3 files changed, 204 insertions, 222 deletions
diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
index b1fb3368c..1b1b74e7c 100644
--- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
+++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
@@ -20,6 +20,7 @@ import { List } from '../../../../fields/List';
import { MarkerIcons } from './MarkerIcons';
import { CirclePicker, ColorResult } from 'react-color';
import { Position } from 'geojson';
+import { CalendarManager } from '../../../util/CalendarManager';
type MapAnchorMenuType = 'standard' | 'routeCreation' | 'calendar' | 'customize' | 'route';
@@ -45,13 +46,15 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
public IsTargetToggler: () => boolean = returnFalse;
public DisplayRoute: (routeInfoMap: Record<TransportationType, any> | undefined, type: TransportationType) => void = unimplementedFunction;
- public HideRoute: () => void = unimplementedFunction;
public AddNewRouteToMap: (coordinates: Position[], origin: string, destination: any, createPinForDestination: boolean) => void = unimplementedFunction;
public CreatePin: (feature: any) => void = unimplementedFunction;
public UpdateMarkerColor: (color: string) => void = unimplementedFunction;
public UpdateMarkerIcon: (iconKey: string) => void = unimplementedFunction;
+
+ public Hide: () => void = unimplementedFunction;
+
public OpenAnimationPanel: (routeDoc: Doc | undefined) => void = unimplementedFunction;
@observable
@@ -70,14 +73,31 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
private title: string | undefined = undefined;
- public setPinDoc(pinDoc: Doc) {
- this.pinDoc = pinDoc;
- this.title = StrCast(pinDoc.title ? pinDoc.title : `${NumCast(pinDoc.longitude)}, ${NumCast(pinDoc.latitude)}`);
+ public setPinDoc(pinDoc: Doc | undefined) {
+ if (pinDoc){
+ this.pinDoc = pinDoc;
+ this.title = StrCast(pinDoc.title ? pinDoc.title : `${NumCast(pinDoc.longitude)}, ${NumCast(pinDoc.latitude)}`);
+ }
+
}
- public setRouteDoc(routeDoc: Doc) {
- this.routeDoc = routeDoc;
- this.title = StrCast(routeDoc.title ?? 'Map route');
+ public setRouteDoc(routeDoc: Doc | undefined) {
+ if (routeDoc){
+ this.routeDoc = routeDoc;
+ this.title = StrCast(routeDoc.title ?? 'Map route');
+ }
+ }
+
+ @action
+ public Reset(){
+ this.destinationSelected = false;
+ this.currentRouteInfoMap = undefined;
+ this.destinationFeatures = [];
+ this.selectedDestinationFeature = undefined;
+ this.allMapPinDocs = [];
+ this.title = undefined;
+ this.routeDoc = undefined;
+ this.pinDoc = undefined;
}
public setAllMapboxPins(pinDocs: Doc[]) {
@@ -263,7 +283,6 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
console.log(coordinates);
console.log(this.selectedDestinationFeature);
this.AddNewRouteToMap(coordinates, this.title ?? '', this.selectedDestinationFeature, this.createPinForDestination);
- this.HideRoute();
}
};
@@ -277,86 +296,155 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
return undefined;
};
+ getDirectionsButton: JSX.Element = (
+ <IconButton
+ tooltip="Get directions"
+ onPointerDown={this.DirectionsClick}
+ icon={<FontAwesomeIcon icon={faDiamondTurnRight as IconLookup} />}
+ color={SettingsManager.userColor} />
+ )
+
+ getAddToCalendarButton = (docType: string): JSX.Element => {
+ return (
+ <IconButton
+ tooltip="Add to calendar"
+ onPointerDown={() => {
+ CalendarManager.Instance.open(undefined, docType === 'pin' ? this.pinDoc : this.routeDoc)
+ }}
+ icon={<FontAwesomeIcon icon={faCalendarDays as IconLookup} />}
+ color={SettingsManager.userColor}
+ />
+ )
+
+ }
+ addToCalendarButton: JSX.Element = (
+ <IconButton
+ tooltip="Add to calendar"
+ onPointerDown={() => CalendarManager.Instance.open(undefined, this.pinDoc)}
+ icon={<FontAwesomeIcon icon={faCalendarDays as IconLookup} />}
+ color={SettingsManager.userColor} />
+ )
+
+ getLinkNoteToDocButton = (docType: string): JSX.Element => {
+ return (
+ <div ref={this._commentRef}>
+ <IconButton
+ tooltip={`Link Note to ${docType === 'pin' ? 'Pin' : 'Route'}`} //
+ onPointerDown={this.notePointerDown}
+ icon={<FontAwesomeIcon icon="sticky-note" />}
+ color={SettingsManager.userColor}
+ />
+ </div>
+ )
+ }
+
+ linkNoteToPinOrRoutenButton: JSX.Element = (
+ <div ref={this._commentRef}>
+ <IconButton
+ tooltip="Link Note to Pin" //
+ onPointerDown={this.notePointerDown}
+ icon={<FontAwesomeIcon icon="sticky-note" />}
+ color={SettingsManager.userColor}
+ />
+ </div>
+ )
+
+ customizePinButton: JSX.Element = (
+ <IconButton
+ tooltip="Customize pin"
+ onPointerDown={this.CustomizeClick}
+ icon={<FontAwesomeIcon icon={faEdit as IconLookup} />}
+ color={SettingsManager.userColor}
+ />
+ )
+
+ centerOnPinButton: JSX.Element = (
+ <IconButton
+ tooltip="Center on pin" //
+ onPointerDown={this.Center}
+ icon={<FontAwesomeIcon icon="compress-arrows-alt" />}
+ color={SettingsManager.userColor}
+ />
+ )
+
+ backButton: JSX.Element = (
+ <IconButton
+ tooltip="Go back" //
+ onPointerDown={this.BackClick}
+ icon={<FontAwesomeIcon icon={faArrowLeft as IconLookup} />}
+ color={SettingsManager.userColor}
+ />
+ )
+
+ addRouteButton: JSX.Element = (
+ <IconButton
+ tooltip="Add route" //
+ onPointerDown={this.HandleAddRouteClick}
+ icon={<FontAwesomeIcon icon={faAdd as IconLookup} />}
+ color={SettingsManager.userColor}
+ />
+ )
+
+ getDeleteButton = (type: string) => {
+ return (
+ <IconButton
+ tooltip={`Delete ${type === 'pin' ? 'Pin' : 'Route'}`} //
+ onPointerDown={this.Delete}
+ icon={<FontAwesomeIcon icon="trash-alt" />}
+ color={SettingsManager.userColor}
+ />
+ )
+ }
+
+ animateRouteButton: JSX.Element = (
+ <IconButton
+ tooltip="Animate route"
+ onPointerDown={() => this.OpenAnimationPanel(this.routeDoc)}
+ icon={<FontAwesomeIcon icon={faRoute as IconLookup} />}
+ color={SettingsManager.userColor}
+ />
+ )
+
+ revertToOriginalMarkerButton = (
+ <IconButton
+ tooltip="Revert to original" //
+ onPointerDown={() => this.revertToOriginalMarker()}
+ icon={<FontAwesomeIcon icon={faArrowsRotate as IconLookup} />}
+ color={SettingsManager.userColor}
+ />
+ )
+
render() {
const buttons = (
<div className="menu-buttons" style={{ display: 'flex' }}>
{this.menuType === 'standard' && (
<>
- <IconButton
- tooltip="Delete Pin" //
- onPointerDown={this.Delete}
- icon={<FontAwesomeIcon icon="trash-alt" />}
- color={SettingsManager.userColor}
- />
- <IconButton tooltip="Get directions" onPointerDown={this.DirectionsClick} /**TODO: fix */ icon={<FontAwesomeIcon icon={faDiamondTurnRight as IconLookup} />} color={SettingsManager.userColor} />
- <IconButton tooltip="Add to calendar" onPointerDown={this.Delete} /**TODO: fix */ icon={<FontAwesomeIcon icon={faCalendarDays as IconLookup} />} color={SettingsManager.userColor} />
- <div ref={this._commentRef}>
- <IconButton
- tooltip="Link Note to Pin" //
- onPointerDown={this.notePointerDown}
- icon={<FontAwesomeIcon icon="sticky-note" />}
- color={SettingsManager.userColor}
- />
- </div>
- <IconButton tooltip="Customize pin" onPointerDown={this.CustomizeClick} icon={<FontAwesomeIcon icon={faEdit as IconLookup} />} color={SettingsManager.userColor} />
- <IconButton
- tooltip="Center on pin" //
- onPointerDown={this.Center}
- icon={<FontAwesomeIcon icon="compress-arrows-alt" />}
- color={SettingsManager.userColor}
- />
+ {this.getDeleteButton('pin')}
+ {this.getDirectionsButton}
+ {this.getAddToCalendarButton('pin')}
+ {this.getLinkNoteToDocButton('pin')}
+ {this.customizePinButton}
+ {this.centerOnPinButton}
</>
)}
{this.menuType === 'routeCreation' && (
<>
- <IconButton
- tooltip="Go back" //
- onPointerDown={this.BackClick}
- icon={<FontAwesomeIcon icon={faArrowLeft as IconLookup} />}
- color={SettingsManager.userColor}
- />
- <IconButton
- tooltip="Add route" //
- onPointerDown={this.HandleAddRouteClick}
- icon={<FontAwesomeIcon icon={faAdd as IconLookup} />}
- color={SettingsManager.userColor}
- />
+ {this.backButton}
+ {this.addRouteButton}
</>
)}
{this.menuType === 'route' && (
<>
- <IconButton
- tooltip="Delete Route" //
- onPointerDown={this.Delete}
- icon={<FontAwesomeIcon icon="trash-alt" />}
- color={SettingsManager.userColor}
- />
- <IconButton tooltip="Animate route" onPointerDown={() => this.OpenAnimationPanel(this.routeDoc)} /**TODO: fix */ icon={<FontAwesomeIcon icon={faRoute as IconLookup} />} color={SettingsManager.userColor} />
- <div ref={this._commentRef}>
- <IconButton
- tooltip="Link Note to Pin" //
- onPointerDown={this.notePointerDown}
- icon={<FontAwesomeIcon icon="sticky-note" />}
- color={SettingsManager.userColor}
- />
- </div>
- <IconButton tooltip="Add to calendar" onPointerDown={this.Delete} /**TODO: fix */ icon={<FontAwesomeIcon icon={faCalendarDays as IconLookup} />} color={SettingsManager.userColor} />
+ {this.getDeleteButton('route')}
+ {this.animateRouteButton}
+ {this.getAddToCalendarButton('route')}
+ {this.getLinkNoteToDocButton('route')}
</>
)}
{this.menuType === 'customize' && (
<>
- <IconButton
- tooltip="Go back" //
- onPointerDown={this.BackClick}
- icon={<FontAwesomeIcon icon={faArrowLeft as IconLookup} />}
- color={SettingsManager.userColor}
- />
- <IconButton
- tooltip="Revert to original" //
- onPointerDown={() => this.revertToOriginalMarker()}
- icon={<FontAwesomeIcon icon={faArrowsRotate as IconLookup} />}
- color={SettingsManager.userColor}
- />
+ {this.backButton}
+ {this.revertToOriginalMarkerButton}
</>
)}
@@ -373,12 +461,6 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
)} */}
</div>
);
- // return (
- // <div ref={MapAnchorMenu.top} style={{zIndex: 30000, width: '100%', height: '100px'}}>
- // HELLO THIS IS ANCHOR MENU
- // {this.getElement(buttons)}
- // </div>
- // )
return this.getElement(
<div ref={MapAnchorMenu.top} className="map-anchor-menu-container">
diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index b3ce55786..25b4587a5 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -109,20 +109,15 @@
display: flex;
justify-content: flex-start;
align-items: center;
- gap: 7px;
+ width: 100%;
.animation-suboptions {
display: flex;
justify-content: flex-start;
- flex-wrap: wrap;
align-items: center;
gap: 7px;
width: 100%;
- .first-person-label {
- width: '130px' !important;
- }
-
label {
margin-bottom: 0;
}
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 44afb8e7b..562cb63d1 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -650,6 +650,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
@action
deleteSelectedPinOrRoute = undoable(() => {
+ console.log('deleting')
if (this.selectedPinOrRoute) {
// Removes filter
Doc.setDocFilter(this.Document, 'latitude', this.selectedPinOrRoute.latitude, 'remove');
@@ -672,9 +673,19 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
e.stopPropagation();
e.preventDefault();
MapAnchorMenu.Instance.fadeOut(true);
+ runInAction(() => {
+ this.temporaryRouteSource = {
+ type: 'FeatureCollection',
+ features: [],
+ }
+ })
+
+
document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
};
+
+
@action
centerOnSelectedPin = () => {
if (this.selectedPinOrRoute) {
@@ -869,6 +880,11 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
if (createPinForDestination) {
this.createPushpin(destination.center[1], destination.center[0], destination.place_name);
}
+ this.temporaryRouteSource = {
+ type: 'FeatureCollection',
+ features: []
+ }
+ MapAnchorMenu.Instance.fadeOut(true);
return mapRoute;
}
// TODO: Display error that can't create route to same location
@@ -931,6 +947,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
@action
handleMapClick = (e: MapLayerMouseEvent) => {
this.featuresFromGeocodeResults = [];
+ this.settingsOpen = false;
if (this._mapRef.current) {
const features = this._mapRef.current.queryRenderedFeatures(e.point, {
layers: ['map-routes-layer'],
@@ -953,13 +970,14 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
MapAnchorMenu.Instance.OnClick = this.createNoteAnnotation;
MapAnchorMenu.Instance.StartDrag = this.startAnchorDrag;
+ MapAnchorMenu.Instance.Reset();
+
MapAnchorMenu.Instance.setRouteDoc(routeDoc);
// TODO: Subject to change
MapAnchorMenu.Instance.setAllMapboxPins(this.allAnnotations.filter(anno => !anno.layout_unrendered));
MapAnchorMenu.Instance.DisplayRoute = this.displayRoute;
- MapAnchorMenu.Instance.HideRoute = this.hideRoute;
MapAnchorMenu.Instance.AddNewRouteToMap = this.createMapRoute;
MapAnchorMenu.Instance.CreatePin = this.addMarkerForFeature;
MapAnchorMenu.Instance.OpenAnimationPanel = this.openAnimationPanel;
@@ -976,6 +994,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
}
};
+
+
/**
* Makes a reverse geocoding API call to retrieve features corresponding to a map click (based on longitude
* and latitude). Sets the search results accordingly.
@@ -1031,12 +1051,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
MapAnchorMenu.Instance.OnClick = this.createNoteAnnotation;
MapAnchorMenu.Instance.StartDrag = this.startAnchorDrag;
+ MapAnchorMenu.Instance.Reset();
+
// pass in the pinDoc
MapAnchorMenu.Instance.setPinDoc(pinDoc);
MapAnchorMenu.Instance.setAllMapboxPins(this.allAnnotations.filter(anno => !anno.layout_unrendered));
MapAnchorMenu.Instance.DisplayRoute = this.displayRoute;
- MapAnchorMenu.Instance.HideRoute = this.hideRoute;
MapAnchorMenu.Instance.AddNewRouteToMap = this.createMapRoute;
MapAnchorMenu.Instance.CreatePin = this.addMarkerForFeature;
@@ -1367,8 +1388,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
}
};
- @action
- exportAnimationToVideo = () => {};
getRouteAnimationOptions = (): JSX.Element => {
return (
@@ -1406,7 +1425,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
<div>|</div>
<FormControlLabel
className="first-person-label"
- style={{ width: '130px' }}
label="1st person animation:"
labelPlacement="start"
control={<Checkbox color="success" checked={this.isStreetViewAnimation} onChange={this.toggleIsStreetViewAnimation} />}
@@ -1414,8 +1432,11 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
<div id="divider">|</div>
<IconButton tooltip={this.animationSpeedTooltipText} onPointerDown={this.updateAnimationSpeed} icon={this.animationSpeedIcon} size={Size.MEDIUM} />
<div id="divider">|</div>
- <div style={{ width: '230px' }}>Select Line Color: </div>
- <CirclePicker circleSize={12} circleSpacing={5} width="100%" colors={['#ffff00', '#03a9f4', '#ff0000', '#ff5722', '#000000', '#673ab7']} onChange={color => this.setAnimationLineColor(color)} />
+ <div style={{display: 'flex', alignItems: 'center'}}>
+ <div>Select Line Color: </div>
+ <CirclePicker circleSize={12} circleSpacing={5} width="100%" colors={['#ffff00', '#03a9f4', '#ff0000', '#ff5722', '#000000', '#673ab7']} onChange={color => this.setAnimationLineColor(color)} />
+ </div>
+
</div>
</>
</>
@@ -1449,7 +1470,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
@action
changeMapStyle = (e: React.ChangeEvent<HTMLSelectElement>) => {
- this.dataDoc.map_style = `mapbox://styles/mapbox/${e.target.value}`;
+ this.dataDoc.map_style = e.target.value;
// this.mapStyle = `mapbox://styles/mapbox/${e.target.value}`
};
@@ -1457,6 +1478,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
onBearingChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const bearing = parseInt(e.target.value);
if (!isNaN(bearing) && this._mapRef.current) {
+ console.log('bearing change')
const fixedBearing = Math.max(0, Math.min(360, bearing));
this._mapRef.current.setBearing(fixedBearing);
this.dataDoc.map_bearing = fixedBearing;
@@ -1467,6 +1489,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
onPitchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const pitch = parseInt(e.target.value);
if (!isNaN(pitch) && this._mapRef.current) {
+ console.log('pitch change')
const fixedPitch = Math.max(0, Math.min(85, pitch));
this._mapRef.current.setPitch(fixedPitch);
this.dataDoc.map_pitch = fixedPitch;
@@ -1564,29 +1587,29 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
<div className="mapbox-style-select">
<div>Map Style:</div>
<div>
- <select onChange={this.changeMapStyle}>
- <option value="streets-v11">Streets</option>
- <option value="outdoors-v12">Outdoors</option>
- <option value="light-v11">Light</option>
- <option value="dark-v11">Dark</option>
- <option value="satellite-v9">Satellite</option>
- <option value="satellite-streets-v12">Satellite Streets</option>
- <option value="navigation-day-v1">Navigation Day</option>
- <option value="navigation-night-v1">Navigation Night</option>
+ <select onChange={this.changeMapStyle} value={StrCast(this.dataDoc.map_style)}>
+ <option value="mapbox://styles/mapbox/streets-v11">Streets</option>
+ <option value="mapbox://styles/mapbox/outdoors-v12">Outdoors</option>
+ <option value="mapbox://styles/mapbox/light-v11">Light</option>
+ <option value="mapbox://styles/mapbox/dark-v11">Dark</option>
+ <option value="mapbox://styles/mapbox/satellite-v9">Satellite</option>
+ <option value="mapbox://styles/mapbox/satellite-streets-v12">Satellite Streets</option>
+ <option value="mapbox://styles/mapbox/navigation-day-v1">Navigation Day</option>
+ <option value="mapbox://styles/mapbox/navigation-night-v1">Navigation Night</option>
</select>
</div>
</div>
<div className="mapbox-bearing-selection">
<div>Bearing: </div>
- <input value={NumCast(this.mapboxMapViewState.bearing).toFixed(2)} type="number" onChange={this.onBearingChange} />
+ <input value={NumCast(this.mapboxMapViewState.bearing).toFixed(0)} type="number" onChange={this.onBearingChange} />
</div>
<div className="mapbox-pitch-selection">
<div>Pitch: </div>
- <input value={NumCast(this.mapboxMapViewState.pitch).toFixed(2)} type="number" onChange={this.onPitchChange} />
+ <input value={NumCast(this.mapboxMapViewState.pitch).toFixed(0)} type="number" onChange={this.onPitchChange} />
</div>
<div className="mapbox-pitch-selection">
<div>Zoom: </div>
- <input value={NumCast(this.mapboxMapViewState.zoom).toFixed(2)} type="number" onChange={this.onZoomChange} />
+ <input value={NumCast(this.mapboxMapViewState.zoom).toFixed(0)} type="number" onChange={this.onZoomChange} />
</div>
<div className="mapbox-terrain-selection">
<div>Show terrain: </div>
@@ -1620,26 +1643,11 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
</React.Fragment>
</div>
)}
- {/* <div className='zoom-box'>
- <IconButton // increment
- style={{borderBottom: '1px', borderBottomColor: 'white'}}
- onPointerDown={() => this.onStepZoomChange(true)}
- icon={<FontAwesomeIcon icon={faPlus as IconLookup} color='black'/>}
- size={Size.SMALL}
- color={SettingsManager.userColor}
- />
- <IconButton // decrement
- onPointerDown={() => this.onStepZoomChange(false)}
- icon={<FontAwesomeIcon icon={faMinus as IconLookup} color='black'/>}
- size={Size.SMALL}
- color={SettingsManager.userColor}
- />
- </div> */}
<MapProvider>
<MapboxMap
ref={this._mapRef}
mapboxAccessToken={MAPBOX_ACCESS_TOKEN}
- viewState={this.isAnimating ? undefined : { ...this.mapboxMapViewState, width: NumCast(this.layoutDoc._width), height: NumCast(this.layoutDoc._height) }}
+ viewState={(this.isAnimating || this.routeToAnimate) ? undefined : { ...this.mapboxMapViewState, width: NumCast(this.layoutDoc._width), height: NumCast(this.layoutDoc._height) }}
mapStyle={this.dataDoc.map_style ? StrCast(this.dataDoc.map_style) : 'mapbox://styles/mapbox/streets-v11'}
style={{
position: 'absolute',
@@ -1738,59 +1746,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
))} */}
</MapboxMap>
</MapProvider>
-
- {/* <BingMapsReact
- onMapReady={this.bingMapReady} //
- bingMapsKey={bingApiKey}
- height="100%"
- mapOptions={this.bingMapOptions}
- width="100%"
- viewOptions={this.bingViewOptions}
- /> */}
- {/* <div>
- {!this._mapReady
- ? null
- : this.allAnnotations
- .filter(anno => !anno.layout_unrendered)
- .map((pushpin, i) => (
- <DocumentView
- key={i}
- {...this._props}
- renderDepth={this._props.renderDepth + 1}
- Document={pushpin}
- DataDoc={undefined}
- PanelWidth={returnOne}
- PanelHeight={returnOne}
- NativeWidth={returnOne}
- NativeHeight={returnOne}
- onKey={undefined}
- onDoubleClick={undefined}
- onBrowseClick={undefined}
- childFilters={returnEmptyFilter}
- childFiltersByRanges={returnEmptyFilter}
- searchFilterDocs={returnEmptyDoclist}
- isDocumentActive={returnFalse}
- isContentActive={returnFalse}
- addDocTab={returnFalse}
- ScreenToLocalTransform={Transform.Identity}
- fitContentsToBox={undefined}
- focus={returnOne}
- />
- ))}
- </div> */}
- {/* <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}
- /> */}
</div>
- {/* </LoadScript > */}
<div className="mapBox-sidebar" style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
<SidebarAnnos
ref={this._sidebarRef}
@@ -1814,54 +1770,3 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
);
}
}
-
-{
- /* <Autocomplete
- fullWidth
- id="map-location-searcher"
- freeSolo
- onInputChange={(e, searchText) => this.handleSearchChange(searchText)}
- onChange={(e, selectedOption) => {
- this.handleSearchChange(""); // clear input
- this.addMarkerForFeature(selectedOption);
- }}
- options={this.featuresFromGeocodeResults
- .filter(feature => feature.place_name)
- .map(feature => feature)}
- getOptionLabel={(feature) => feature.place_name}
- renderInput={(params) => (
- <TextField
- {...params}
- placeholder='Enter a location'
- />
- )}
- /> */
-}
-{
- /* <EditableText
- // editing
- setVal={(newText: string | number) => typeof newText === 'string' && this.handleSearchChange(newText)}
- // onEnter={e => this.bingSearch()}
- onEnter={e => {}}
- height={32}
- // placeholder={this.bingSearchBarContents || 'Enter a location'}
- placeholder='Enter a location'
- textAlign="center"
- /> */
-}
-{
- /* <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}
- type={Type.TERT}
- />
- <div style={{ width: 30, height: 30 }} ref={this._dragRef} onPointerDown={this.dragToggle}>
- <Button tooltip="drag to place a pushpin" icon={<FontAwesomeIcon size={'lg'} icon={'bullseye'} />} />
- </div> */
-} \ No newline at end of file