aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/MapBox
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/MapBox')
-rw-r--r--src/client/views/nodes/MapBox/AnimationUtility.ts13
-rw-r--r--src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx14
-rw-r--r--src/client/views/nodes/MapBox/MapAnchorMenu.tsx106
-rw-r--r--src/client/views/nodes/MapBox/MapBox.tsx60
-rw-r--r--src/client/views/nodes/MapBox/MapBox2.tsx2
5 files changed, 75 insertions, 120 deletions
diff --git a/src/client/views/nodes/MapBox/AnimationUtility.ts b/src/client/views/nodes/MapBox/AnimationUtility.ts
index 42dfa59b7..35153f439 100644
--- a/src/client/views/nodes/MapBox/AnimationUtility.ts
+++ b/src/client/views/nodes/MapBox/AnimationUtility.ts
@@ -1,13 +1,10 @@
-import mapboxgl from 'mapbox-gl';
-import { MercatorCoordinate } from 'mapbox-gl';
-import { MapRef } from 'react-map-gl';
-import * as React from 'react';
-import * as d3 from 'd3';
import * as turf from '@turf/turf';
import { Position } from '@turf/turf';
-import { Feature, FeatureCollection, GeoJsonProperties, Geometry } from 'geojson';
-import { observer } from 'mobx-react';
-import { action, computed, observable, runInAction, makeObservable } from 'mobx';
+import * as d3 from 'd3';
+import { Feature, GeoJsonProperties, Geometry } from 'geojson';
+import mapboxgl, { MercatorCoordinate } from 'mapbox-gl';
+import { action, computed, makeObservable, observable, runInAction } from 'mobx';
+import { MapRef } from 'react-map-gl';
export enum AnimationStatus {
START = 'start',
diff --git a/src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx b/src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx
index f9607becf..7e99795b5 100644
--- a/src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx
+++ b/src/client/views/nodes/MapBox/DirectionsAnchorMenu.tsx
@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { observer } from 'mobx-react';
-import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu';
+import { IconLookup, faAdd, faCalendarDays, faRoute } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconButton } from 'browndash-components';
import { IReactionDisposer, ObservableMap, reaction } from 'mobx';
-import { Doc, Opt } from '../../../../fields/Doc';
+import { observer } from 'mobx-react';
+import * as React from 'react';
import { returnFalse, unimplementedFunction } from '../../../../Utils';
+import { Doc, Opt } from '../../../../fields/Doc';
import { NumCast, StrCast } from '../../../../fields/Types';
import { SelectionManager } from '../../../util/SelectionManager';
-import { IconButton } from 'browndash-components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { SettingsManager } from '../../../util/SettingsManager';
-import { IconLookup, faAdd, faCalendarDays, faRoute } from '@fortawesome/free-solid-svg-icons';
+import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu';
@observer
export class DirectionsAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
index 1b1b74e7c..08bea5d9d 100644
--- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
+++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
@@ -1,26 +1,23 @@
+import { IconLookup, faAdd, faArrowDown, faArrowLeft, faArrowsRotate, faBicycle, faCalendarDays, faCar, faDiamondTurnRight, faEdit, faPersonWalking, faRoute } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import * as React from 'react';
+import { Autocomplete, Checkbox, FormControlLabel, TextField } from '@mui/material';
+import { IconButton } from 'browndash-components';
+import { Position } from 'geojson';
import { IReactionDisposer, ObservableMap, action, makeObservable, observable, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
-import { Doc, NumListCast, Opt } from '../../../../fields/Doc';
+import * as React from 'react';
+import { CirclePicker, ColorResult } from 'react-color';
import { returnFalse, setupMoveUpEvents, unimplementedFunction } from '../../../../Utils';
+import { Doc, Opt } from '../../../../fields/Doc';
+import { NumCast, StrCast } from '../../../../fields/Types';
+import { CalendarManager } from '../../../util/CalendarManager';
import { SelectionManager } from '../../../util/SelectionManager';
-import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu';
-// import { GPTPopup, GPTPopupMode } from './../../GPTPopup/GPTPopup';
-import { Button, IconButton } from 'browndash-components';
import { SettingsManager } from '../../../util/SettingsManager';
+import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu';
import './MapAnchorMenu.scss';
-import { NumCast, StrCast } from '../../../../fields/Types';
-import { IconLookup, faDiamondTurnRight, faCalendarDays, faEdit, faAdd, faRoute, faArrowLeft, faLocationDot, faArrowDown, faCar, faBicycle, faPersonWalking, faUpload, faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
-import { DirectionsAnchorMenu } from './DirectionsAnchorMenu';
-import { Autocomplete, Checkbox, FormControlLabel, TextField } from '@mui/material';
import { MapboxApiUtility, TransportationType } from './MapboxApiUtility';
-import { MapBox } from './MapBox';
-import { List } from '../../../../fields/List';
import { MarkerIcons } from './MarkerIcons';
-import { CirclePicker, ColorResult } from 'react-color';
-import { Position } from 'geojson';
-import { CalendarManager } from '../../../util/CalendarManager';
+// import { GPTPopup, GPTPopupMode } from './../../GPTPopup/GPTPopup';
type MapAnchorMenuType = 'standard' | 'routeCreation' | 'calendar' | 'customize' | 'route';
@@ -52,7 +49,6 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
public UpdateMarkerColor: (color: string) => void = unimplementedFunction;
public UpdateMarkerIcon: (iconKey: string) => void = unimplementedFunction;
-
public Hide: () => void = unimplementedFunction;
public OpenAnimationPanel: (routeDoc: Doc | undefined) => void = unimplementedFunction;
@@ -74,22 +70,21 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
private title: string | undefined = undefined;
public setPinDoc(pinDoc: Doc | undefined) {
- if (pinDoc){
+ if (pinDoc) {
this.pinDoc = pinDoc;
this.title = StrCast(pinDoc.title ? pinDoc.title : `${NumCast(pinDoc.longitude)}, ${NumCast(pinDoc.latitude)}`);
}
-
}
public setRouteDoc(routeDoc: Doc | undefined) {
- if (routeDoc){
+ if (routeDoc) {
this.routeDoc = routeDoc;
this.title = StrCast(routeDoc.title ?? 'Map route');
}
}
@action
- public Reset(){
+ public Reset() {
this.destinationSelected = false;
this.currentRouteInfoMap = undefined;
this.destinationFeatures = [];
@@ -296,34 +291,23 @@ 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} />
- )
+ 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}
+ <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} />
- )
+ <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 (
@@ -335,8 +319,8 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
color={SettingsManager.userColor}
/>
</div>
- )
- }
+ );
+ };
linkNoteToPinOrRoutenButton: JSX.Element = (
<div ref={this._commentRef}>
@@ -347,16 +331,9 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
color={SettingsManager.userColor}
/>
</div>
- )
-
- customizePinButton: JSX.Element = (
- <IconButton
- tooltip="Customize pin"
- onPointerDown={this.CustomizeClick}
- icon={<FontAwesomeIcon icon={faEdit as IconLookup} />}
- color={SettingsManager.userColor}
- />
- )
+ );
+
+ customizePinButton: JSX.Element = (<IconButton tooltip="Customize pin" onPointerDown={this.CustomizeClick} icon={<FontAwesomeIcon icon={faEdit as IconLookup} />} color={SettingsManager.userColor} />);
centerOnPinButton: JSX.Element = (
<IconButton
@@ -365,7 +342,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
icon={<FontAwesomeIcon icon="compress-arrows-alt" />}
color={SettingsManager.userColor}
/>
- )
+ );
backButton: JSX.Element = (
<IconButton
@@ -374,7 +351,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
icon={<FontAwesomeIcon icon={faArrowLeft as IconLookup} />}
color={SettingsManager.userColor}
/>
- )
+ );
addRouteButton: JSX.Element = (
<IconButton
@@ -383,7 +360,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
icon={<FontAwesomeIcon icon={faAdd as IconLookup} />}
color={SettingsManager.userColor}
/>
- )
+ );
getDeleteButton = (type: string) => {
return (
@@ -393,17 +370,10 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
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}
- />
- )
+ animateRouteButton: JSX.Element = (<IconButton tooltip="Animate route" onPointerDown={() => this.OpenAnimationPanel(this.routeDoc)} icon={<FontAwesomeIcon icon={faRoute as IconLookup} />} color={SettingsManager.userColor} />);
revertToOriginalMarkerButton = (
<IconButton
@@ -412,7 +382,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
icon={<FontAwesomeIcon icon={faArrowsRotate as IconLookup} />}
color={SettingsManager.userColor}
/>
- )
+ );
render() {
const buttons = (
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 7db139d74..ffd52fb0e 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -1,8 +1,17 @@
+import { IconLookup, faCircleXmark, faGear, faPause, faPlay, faRotate } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Checkbox, FormControlLabel, TextField } from '@mui/material';
+import * as turf from '@turf/turf';
import { IconButton, Size, Type } from 'browndash-components';
+import * as d3 from 'd3';
+import { Feature, FeatureCollection, GeoJsonProperties, Geometry, LineString, Position } from 'geojson';
+import mapboxgl, { LngLat, LngLatBoundsLike, MapLayerMouseEvent } from 'mapbox-gl';
import { IReactionDisposer, ObservableMap, action, autorun, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
+import { CirclePicker, ColorResult } from 'react-color';
+import { Layer, MapProvider, MapRef, Map as MapboxMap, Marker, Source, ViewState, ViewStateChangeEvent } from 'react-map-gl';
+import { MarkerEvent } from 'react-map-gl/dist/esm/types';
import { Utils, emptyFunction, setupMoveUpEvents } from '../../../../Utils';
import { Doc, DocListCast, Field, LinkedTo, Opt } from '../../../../fields/Doc';
import { DocCss, Highlight } from '../../../../fields/DocSymbols';
@@ -22,22 +31,13 @@ import { DocumentView } from '../DocumentView';
import { FieldView, FieldViewProps } from '../FieldView';
import { FormattedTextBox } from '../formattedText/FormattedTextBox';
import { PinProps, PresBox } from '../trails';
-import { MapAnchorMenu } from './MapAnchorMenu';
-import { ControlPosition, Layer, MapProvider, MapRef, Map as MapboxMap, Marker, MarkerProps, Source, ViewState, ViewStateChangeEvent } from 'react-map-gl';
-import './MapBox.scss';
-// import { GeocoderControl } from './GeocoderControl';
-import { IconLookup, faCircleXmark, faGear, faPause, faPlay, faRotate } from '@fortawesome/free-solid-svg-icons';
-import { Checkbox, FormControlLabel, TextField } from '@mui/material';
-import * as turf from '@turf/turf';
-import * as d3 from 'd3';
-import { Feature, FeatureCollection, GeoJsonProperties, Geometry, LineString, Position } from 'geojson';
-import mapboxgl, { LngLat, LngLatBoundsLike, MapLayerMouseEvent } from 'mapbox-gl';
-import { CirclePicker, ColorResult } from 'react-color';
-import { MarkerEvent } from 'react-map-gl/dist/esm/types';
import { fastSpeedIcon, mediumSpeedIcon, slowSpeedIcon } from './AnimationSpeedIcons';
import { AnimationSpeed, AnimationStatus, AnimationUtility } from './AnimationUtility';
+import { MapAnchorMenu } from './MapAnchorMenu';
+import './MapBox.scss';
import { MapboxApiUtility, TransportationType } from './MapboxApiUtility';
import { MarkerIcons } from './MarkerIcons';
+// import { GeocoderControl } from './GeocoderControl';
// amongus
/**
@@ -480,7 +480,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
};
// The pin that is selected
- @observable selectedPinOrRoute: Doc | undefined;
+ @observable selectedPinOrRoute: Doc | undefined = undefined;
@action
deselectPinOrRoute = () => {
@@ -650,7 +650,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
@action
deleteSelectedPinOrRoute = undoable(() => {
- console.log('deleting')
+ console.log('deleting');
if (this.selectedPinOrRoute) {
// Removes filter
Doc.setDocFilter(this.Document, 'latitude', this.selectedPinOrRoute.latitude, 'remove');
@@ -677,15 +677,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
this.temporaryRouteSource = {
type: 'FeatureCollection',
features: [],
- }
- })
-
+ };
+ });
document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
};
-
-
@action
centerOnSelectedPin = () => {
if (this.selectedPinOrRoute) {
@@ -882,8 +879,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
}
this.temporaryRouteSource = {
type: 'FeatureCollection',
- features: []
- }
+ features: [],
+ };
MapAnchorMenu.Instance.fadeOut(true);
return mapRoute;
}
@@ -994,8 +991,6 @@ 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.
@@ -1388,7 +1383,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
}
};
-
getRouteAnimationOptions = (): JSX.Element => {
return (
<>
@@ -1423,20 +1417,14 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
<>
<div className="animation-suboptions">
<div>|</div>
- <FormControlLabel
- className="first-person-label"
- label="1st person animation:"
- labelPlacement="start"
- control={<Checkbox color="success" checked={this.isStreetViewAnimation} onChange={this.toggleIsStreetViewAnimation} />}
- />
+ <FormControlLabel className="first-person-label" label="1st person animation:" labelPlacement="start" control={<Checkbox color="success" checked={this.isStreetViewAnimation} onChange={this.toggleIsStreetViewAnimation} />} />
<div id="divider">|</div>
<IconButton tooltip={this.animationSpeedTooltipText} onPointerDown={this.updateAnimationSpeed} icon={this.animationSpeedIcon} size={Size.MEDIUM} />
<div id="divider">|</div>
- <div style={{display: 'flex', alignItems: 'center'}}>
+ <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:any) => this.setAnimationLineColor(color)} />
+ <CirclePicker circleSize={12} circleSpacing={5} width="100%" colors={['#ffff00', '#03a9f4', '#ff0000', '#ff5722', '#000000', '#673ab7']} onChange={(color: any) => this.setAnimationLineColor(color)} />
</div>
-
</div>
</>
</>
@@ -1478,7 +1466,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')
+ console.log('bearing change');
const fixedBearing = Math.max(0, Math.min(360, bearing));
this._mapRef.current.setBearing(fixedBearing);
this.dataDoc.map_bearing = fixedBearing;
@@ -1489,7 +1477,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')
+ console.log('pitch change');
const fixedPitch = Math.max(0, Math.min(85, pitch));
this._mapRef.current.setPitch(fixedPitch);
this.dataDoc.map_pitch = fixedPitch;
@@ -1648,7 +1636,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
<MapboxMap
ref={this._mapRef}
mapboxAccessToken={MAPBOX_ACCESS_TOKEN}
- viewState={(this.isAnimating || this.routeToAnimate) ? 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',
diff --git a/src/client/views/nodes/MapBox/MapBox2.tsx b/src/client/views/nodes/MapBox/MapBox2.tsx
index fdd8285d5..1dbbbb633 100644
--- a/src/client/views/nodes/MapBox/MapBox2.tsx
+++ b/src/client/views/nodes/MapBox/MapBox2.tsx
@@ -87,7 +87,7 @@
// private _dropDisposer?: DragManager.DragDropDisposer;
// private _disposers: { [name: string]: IReactionDisposer } = {};
// private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
-// @observable private _overlayAnnoInfo: Opt<Doc>;
+// @observable private _overlayAnnoInfo: Opt<Doc> = undefined;
// showInfo = action((anno: Opt<Doc>) => (this._overlayAnnoInfo = anno));
// public static LayoutString(fieldKey: string) {
// return FieldView.LayoutString(MapBox2, fieldKey);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-20 22:46:52 +0000