fixed map navigation and map anchor menu buttons.

5 files changed, 37 insertions, 57 deletions

diff --git a/package-lock.json b/package-lock.json
index 7f00b412d..e772b9a8b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -131,6 +131,7 @@
                 "function-plot": "^1.23.3",
                 "fuse.js": "^7.0.0",
                 "fuzzy-search": "^3.2.1",
+                "gl-matrix": "^3.4.3",
                 "golden-layout": "^2.6.0",
                 "google-auth-library": "^9.4.1",
                 "googleapis": "^146.0.0",
@@ -218,7 +219,7 @@
                 "react-jsx-parser": "^2.0.0",
                 "react-latex-next": "^3.0.0",
                 "react-loading": "^2.0.3",
-                "react-map-gl": "^7.1.6",
+                "react-map-gl": "^7.1.9",
                 "react-markdown": "^10.0.0",
                 "react-measure": "^2.5.2",
                 "react-resizable": "^3.0.5",
diff --git a/package.json b/package.json
index 2aafdd132..7a3b64d9d 100644
--- a/package.json
+++ b/package.json
@@ -214,6 +214,7 @@
         "function-plot": "^1.23.3",
         "fuse.js": "^7.0.0",
         "fuzzy-search": "^3.2.1",
+        "gl-matrix": "^3.4.3",
         "golden-layout": "^2.6.0",
         "google-auth-library": "^9.4.1",
         "googleapis": "^146.0.0",
@@ -301,7 +302,7 @@
         "react-jsx-parser": "^2.0.0",
         "react-latex-next": "^3.0.0",
         "react-loading": "^2.0.3",
-        "react-map-gl": "^7.1.6",
+        "react-map-gl": "^7.1.9",
         "react-markdown": "^10.0.0",
         "react-measure": "^2.5.2",
         "react-resizable": "^3.0.5",
diff --git a/packages/components/src/components/IconButton/IconButton.tsx b/packages/components/src/components/IconButton/IconButton.tsx
index 954a0ae44..2c0ac2fe7 100644
--- a/packages/components/src/components/IconButton/IconButton.tsx
+++ b/packages/components/src/components/IconButton/IconButton.tsx
@@ -4,8 +4,6 @@ import { Colors, Size, Type, getFontSize, getHeight, isDark, getFormLabelSize }
 import { IButtonProps } from '../Button';
 import './IconButton.scss';
 
-export interface IIconButtonProps extends IButtonProps {}
-
 export const IconButton = (props: IButtonProps) => {
     const {
         active,
diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
index 8079d96ea..3630d6ea3 100644
--- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
+++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
@@ -46,7 +46,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     public IsTargetToggler: () => boolean = returnFalse;
     public DisplayRoute: (routeInfoMap: Record<TransportationType, { coordinates: Position[] }> | undefined, type: TransportationType) => void = unimplementedFunction;
     public AddNewRouteToMap: (coordinates: Position[], origin: string, destination: { place_name: string; center: number[] }, createPinForDestination: boolean) => void = unimplementedFunction;
-    public CreatePin: (feature: { place_name: string; center: LngLatLike; properties: { wikiData: unknown } }) => void = unimplementedFunction;
+    public CreatePin: (feature: { place_name: string; center: LngLatLike; properties?: { wikiData: string } }) => void = unimplementedFunction;
 
     public UpdateMarkerColor: (color: string) => void = unimplementedFunction;
     public UpdateMarkerIcon: (iconKey: string) => void = unimplementedFunction;
@@ -293,7 +293,7 @@ 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 = () => <IconButton tooltip="Get directions" onPointerDown={this.DirectionsClick} icon={<FontAwesomeIcon icon={faDiamondTurnRight as IconLookup} />} color={SettingsManager.userColor} />;
 
     getAddToCalendarButton = (docType: string): JSX.Element => (
         <IconButton
@@ -305,9 +305,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
             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} />
-    );
+    addToCalendarButton = () => <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 => (
         <div ref={this._commentRef}>
@@ -320,7 +318,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         </div>
     );
 
-    linkNoteToPinOrRoutenButton: JSX.Element = (
+    linkNoteToPinOrRoutenButton = () => (
         <div ref={this._commentRef}>
             <IconButton
                 tooltip="Link Note to Pin" //
@@ -331,9 +329,9 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         </div>
     );
 
-    customizePinButton: JSX.Element = (<IconButton tooltip="Customize pin" onPointerDown={this.CustomizeClick} icon={<FontAwesomeIcon icon={faEdit as IconLookup} />} color={SettingsManager.userColor} />);
+    customizePinButton = () => <IconButton tooltip="Customize pin" onPointerDown={this.CustomizeClick} icon={<FontAwesomeIcon icon={faEdit as IconLookup} />} color={SettingsManager.userColor} />;
 
-    centerOnPinButton: JSX.Element = (
+    centerOnPinButton = () => (
         <IconButton
             tooltip="Center on pin" //
             onPointerDown={this.Center}
@@ -342,7 +340,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         />
     );
 
-    backButton: JSX.Element = (
+    backButton = () => (
         <IconButton
             tooltip="Go back" //
             onPointerDown={this.BackClick}
@@ -351,7 +349,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         />
     );
 
-    addRouteButton: JSX.Element = (
+    addRouteButton = () => (
         <IconButton
             tooltip="Add route" //
             onPointerDown={this.HandleAddRouteClick}
@@ -369,9 +367,9 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         />
     );
 
-    animateRouteButton: JSX.Element = (<IconButton tooltip="Animate route" onPointerDown={() => this.OpenAnimationPanel(this.routeDoc)} icon={<FontAwesomeIcon icon={faRoute as IconLookup} />} color={SettingsManager.userColor} />);
+    animateRouteButton = () => <IconButton tooltip="Animate route" onPointerDown={() => this.OpenAnimationPanel(this.routeDoc)} icon={<FontAwesomeIcon icon={faRoute as IconLookup} />} color={SettingsManager.userColor} />;
 
-    revertToOriginalMarkerButton = (
+    revertToOriginalMarkerButton = () => (
         <IconButton
             tooltip="Revert to original" //
             onPointerDown={() => this.revertToOriginalMarker()}
@@ -386,31 +384,31 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                 {this.menuType === 'standard' && (
                     <>
                         {this.getDeleteButton('pin')}
-                        {this.getDirectionsButton}
+                        {this.getDirectionsButton()}
                         {this.getAddToCalendarButton('pin')}
                         {this.getLinkNoteToDocButton('pin')}
-                        {this.customizePinButton}
-                        {this.centerOnPinButton}
+                        {this.customizePinButton()}
+                        {this.centerOnPinButton()}
                     </>
                 )}
                 {this.menuType === 'routeCreation' && (
                     <>
-                        {this.backButton}
-                        {this.addRouteButton}
+                        {this.backButton()}
+                        {this.addRouteButton()}
                     </>
                 )}
                 {this.menuType === 'route' && (
                     <>
                         {this.getDeleteButton('route')}
-                        {this.animateRouteButton}
+                        {this.animateRouteButton()}
                         {this.getAddToCalendarButton('route')}
                         {this.getLinkNoteToDocButton('route')}
                     </>
                 )}
                 {this.menuType === 'customize' && (
                     <>
-                        {this.backButton}
-                        {this.revertToOriginalMarkerButton}
+                        {this.backButton()}
+                        {this.revertToOriginalMarkerButton()}
                     </>
                 )}
 
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 792cb6b46..2c9c185af 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -76,7 +76,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         makeObservable(this);
     }
 
-    @observable _featuresFromGeocodeResults: { place_name: string; center: LngLatLike | undefined }[] = [];
+    @observable _featuresFromGeocodeResults: { place_name: string; center: LngLatLike | undefined; properties?: { wikiData: string } }[] = [];
     @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
     @observable _selectedPinOrRoute: Doc | undefined = undefined; // The pin that is selected
     @observable _mapReady = false;
@@ -123,7 +123,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             const originalCoordinates: Position[] = JSON.parse(StrCast(this._routeToAnimate.routeCoordinates));
             // const index = Math.floor(this.animationPhase * originalCoordinates.length);
             const index = this._animationPhase * (originalCoordinates.length - 1); // Calculate the fractional index
-            console.log('Animation phase', this._animationPhase);
             const startIndex = Math.floor(index);
             const endIndex = Math.ceil(index);
             let feature: Feature<Geometry, GeoJsonProperties>;
@@ -183,7 +182,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             });
             return feature;
         }
-        console.log('ERROR');
         return {
             type: 'Feature',
             properties: {},
@@ -199,7 +197,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @computed get allRoutesGeoJson(): FeatureCollection {
         const features: Feature<Geometry, GeoJsonProperties>[] = this.allRoutes.map((routeDoc: Doc) => {
-            console.log('Route coords: ', routeDoc.routeCoordinates);
             const geometry: LineString = {
                 type: 'LineString',
                 coordinates: JSON.parse(StrCast(routeDoc.routeCoordinates)),
@@ -215,7 +212,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
         return {
             type: 'FeatureCollection',
-            features: features,
+            features,
         };
     }
 
@@ -241,7 +238,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         toList(docs).forEach(doc => {
             let existingPin = this.allPushpins.find(pin => pin.latitude === doc.latitude && pin.longitude === doc.longitude) ?? this._selectedPinOrRoute;
             if (doc.latitude !== undefined && doc.longitude !== undefined && !existingPin) {
-                existingPin = this.createPushpin(NumCast(doc.latitude), NumCast(doc.longitude), StrCast(doc.map));
+                existingPin = this.createPushpin({ lng: NumCast(doc.longitude), lat: NumCast(doc.latitude) }, StrCast(doc.map));
             }
             if (existingPin) {
                 setTimeout(() => {
@@ -477,7 +474,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @action
     deleteSelectedPinOrRoute = undoable(() => {
-        console.log('deleting');
         if (this._selectedPinOrRoute) {
             // Removes filter
             Doc.setDocFilter(this.Document, 'latitude', NumCast(this._selectedPinOrRoute.latitude), 'remove');
@@ -542,17 +538,16 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
      * Creates Pushpin doc and adds it to the list of annotations
      */
     @action
-    createPushpin = undoable((center: LngLatLike, location?: string, wikiData?: string) => {
-        const lat = 'lat' in center ? center.lat : center[0];
-        const lon = 'lng' in center ? center.lng : 'lon' in center ? center.lon : center[1];
+    createPushpin = (center: LngLatLike, location?: string, wikiData?: string) => {
+        const [lng, lat] = center instanceof Array ? center : ['lng' in center ? center.lng : center.lon, center.lat];
         // Stores the pushpin as a MapMarkerDocument
         const pushpin = Docs.Create.PushpinDocument(
             lat,
-            lon,
+            lng,
             false,
             [],
             {
-                title: location ?? `lat=${lat},lng=${lon}`,
+                title: location ?? `lat=${lat},lng=${lng}`,
                 map: location,
                 description: '',
                 wikiData: wikiData,
@@ -563,11 +558,10 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             // ,'pushpinIDamongus'+ this.incrementer++
         );
         this.addDocument(pushpin, this.annotationKey);
-        console.log(pushpin);
         return pushpin;
 
         // mapMarker.infoWindowOpen = true;
-    }, 'createpin');
+    };
 
     @action
     createMapRoute = undoable((coordinates: Position[], originName: string, destination: { place_name: string; center: number[] }, createPinForDestination: boolean) => {
@@ -575,7 +569,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             const mapRoute = Docs.Create.MapRouteDocument(false, [], { title: `${originName} --> ${destination.place_name}`, routeCoordinates: JSON.stringify(coordinates) });
             this.addDocument(mapRoute, this.annotationKey);
             if (createPinForDestination) {
-                this.createPushpin(destination.center[1], destination.center[0], destination.place_name);
+                this.createPushpin({ lng: destination.center[0], lat: destination.center[1] }, destination.place_name);
             }
             this._temporaryRouteSource = {
                 type: 'FeatureCollection',
@@ -598,18 +592,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     };
 
     @action
-    addMarkerForFeature = (feature: { place_name: string; center: LngLatLike | undefined; properties?: { wikiData: unknown } }) => {
-        const location = feature.place_name;
+    addMarkerForFeature = (feature: { place_name: string; center: LngLatLike | undefined; properties?: { wikiData: string } }) => {
         if (feature.center) {
-            const wikiData = feature.properties?.wikiData;
-
-            this.createPushpin(feature.center, location, wikiData);
-
-            if (this._mapRef.current) {
-                this._mapRef.current.flyTo({
-                    center: feature.center,
-                });
-            }
+            this.createPushpin(feature.center, feature.place_name, feature.properties?.wikiData);
+            this._mapRef.current?.flyTo({
+                center: feature.center,
+            });
             this._featuresFromGeocodeResults = [];
         } else {
             // TODO: handle error
@@ -653,7 +641,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 layers: ['map-routes-layer'],
             });
 
-            console.error(features);
             if (features && features.length > 0 && features[0].properties && features[0].geometry) {
                 const { routeTitle } = features[0].properties;
                 const routeDoc: Doc | undefined = this.allRoutes.find(rtDoc => rtDoc.title === routeTitle);
@@ -936,7 +923,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     const updateAnimationPhase = (newAnimationPhase: number) => this.setAnimationPhase(newAnimationPhase);
 
                     if (status !== AnimationStatus.RESUME) {
-                        const result = await animationUtil.flyInAndRotate({
+                        await animationUtil.flyInAndRotate({
                             map: this._mapRef.current!,
                             // targetLngLat,
                             // duration 3000
@@ -948,9 +935,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                             // endPitch: this.isStreetViewAnimation ? 80 : 50,
                             updateFrameId,
                         });
-
-                        console.log('Bearing: ', result.bearing);
-                        console.log('Altitude: ', result.altitude);
                     }
 
                     runInAction(() => {
@@ -1085,7 +1069,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     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;
@@ -1096,7 +1079,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     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;