From 687b6984d59c60418d5e2af033df9784275a0db5 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 19 Mar 2025 01:15:08 -0400
Subject: fixed map navigation and map anchor menu buttons.

---
 src/client/views/nodes/MapBox/MapAnchorMenu.tsx | 38 ++++++++++++-------------
 1 file changed, 18 insertions(+), 20 deletions(-)

(limited to 'src/client/views/nodes/MapBox/MapAnchorMenu.tsx')

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()}
                     </>
                 )}
 
-- 
cgit v1.2.3-70-g09d2


From cde8c37021f2b5f0c7521192a735db605a714127 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 19 Mar 2025 01:23:19 -0400
Subject: updated react-map-gl

---
 package-lock.json                                  | 71 +++++++++++++++++++---
 package.json                                       |  3 +-
 src/client/views/nodes/MapBox/AnimationUtility.ts  |  2 +-
 src/client/views/nodes/MapBox/MapAnchorMenu.tsx    |  7 +--
 src/client/views/nodes/MapBox/MapBox.tsx           |  2 +-
 .../views/nodes/MapboxMapBox/MapboxContainer.tsx   |  2 +-
 6 files changed, 72 insertions(+), 15 deletions(-)

(limited to 'src/client/views/nodes/MapBox/MapAnchorMenu.tsx')

diff --git a/package-lock.json b/package-lock.json
index e772b9a8b..fd39df890 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -56,6 +56,7 @@
                 "@types/google-maps": "^3.2.6",
                 "@types/mapbox-gl": "^3.1.0",
                 "@types/pdf-parse": "^1.1.4",
+                "@types/react-map-gl": "^6.1.7",
                 "@types/reveal": "^4.2.0",
                 "@types/supercluster": "^7.1.3",
                 "@types/textfit": "^2.4.4",
@@ -219,7 +220,7 @@
                 "react-jsx-parser": "^2.0.0",
                 "react-latex-next": "^3.0.0",
                 "react-loading": "^2.0.3",
-                "react-map-gl": "^7.1.9",
+                "react-map-gl": "^8.0.1",
                 "react-markdown": "^10.0.0",
                 "react-measure": "^2.5.2",
                 "react-resizable": "^3.0.5",
@@ -15257,6 +15258,18 @@
                 "@types/react": "*"
             }
         },
+        "node_modules/@types/react-map-gl": {
+            "version": "6.1.7",
+            "resolved": "https://registry.npmjs.org/@types/react-map-gl/-/react-map-gl-6.1.7.tgz",
+            "integrity": "sha512-szkfkWd3FbySDkxyn0MDj9yzD8XYk+RIi4od6sGb3lVHNBGcW20G2v2vcq2N5k18UYAdqAoKGSYuHkGV4JOCrA==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/geojson": "*",
+                "@types/mapbox-gl": "*",
+                "@types/react": "*",
+                "@types/viewport-mercator-project": "*"
+            }
+        },
         "node_modules/@types/react-measure": {
             "version": "2.0.12",
             "resolved": "https://registry.npmjs.org/@types/react-measure/-/react-measure-2.0.12.tgz",
@@ -15521,6 +15534,15 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/@types/viewport-mercator-project": {
+            "version": "6.1.6",
+            "resolved": "https://registry.npmjs.org/@types/viewport-mercator-project/-/viewport-mercator-project-6.1.6.tgz",
+            "integrity": "sha512-uWrbqhRXFeiT6CAvRjf0BkQKRkKED+ofrPhglKpUktQML3463dEPiA4iwe7cZQs6m49Zo/g03rL7ChMLiE5Z8w==",
+            "license": "MIT",
+            "dependencies": {
+                "gl-matrix": "^3.2.0"
+            }
+        },
         "node_modules/@types/web": {
             "version": "0.0.213",
             "resolved": "https://registry.npmjs.org/@types/web/-/web-0.0.213.tgz",
@@ -15844,6 +15866,41 @@
             "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
             "license": "ISC"
         },
+        "node_modules/@vis.gl/react-mapbox": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/@vis.gl/react-mapbox/-/react-mapbox-8.0.1.tgz",
+            "integrity": "sha512-s/OokvgK1T43Ev2/4hj21C0DKrf79nIigBCdYPtAkEX88qGLRQ5t5zCRqg5Zl+44xXfVxcVpX2/vWUKd9oYGKQ==",
+            "license": "MIT",
+            "peerDependencies": {
+                "mapbox-gl": ">=3.5.0",
+                "react": ">=16.3.0",
+                "react-dom": ">=16.3.0"
+            },
+            "peerDependenciesMeta": {
+                "mapbox-gl": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@vis.gl/react-maplibre": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/@vis.gl/react-maplibre/-/react-maplibre-8.0.1.tgz",
+            "integrity": "sha512-IFguo7DKIDZ9U9uRI4thZRfc5aTHEH4lWlIjedBeCpLeMm7wdrqtU2JshyEQt8dDO85kkEE7CbrtjMx5MplaoA==",
+            "license": "MIT",
+            "dependencies": {
+                "@maplibre/maplibre-gl-style-spec": "^19.2.1"
+            },
+            "peerDependencies": {
+                "maplibre-gl": ">=4.0.0",
+                "react": ">=16.3.0",
+                "react-dom": ">=16.3.0"
+            },
+            "peerDependenciesMeta": {
+                "maplibre-gl": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@vitest/expect": {
             "version": "2.0.5",
             "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.5.tgz",
@@ -33796,17 +33853,17 @@
             }
         },
         "node_modules/react-map-gl": {
-            "version": "7.1.9",
-            "resolved": "https://registry.npmjs.org/react-map-gl/-/react-map-gl-7.1.9.tgz",
-            "integrity": "sha512-KsCc8Gyn05wVGlHZoopaiiCr0RCAQ6LDISo5sEy1/pV/d7RlozkF946tiX7IgyijJQMRujHol5QdwUPESjh73w==",
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/react-map-gl/-/react-map-gl-8.0.1.tgz",
+            "integrity": "sha512-VQjLcZdtyJCPXxy5xVL2QIgfA+YG3v+PzSdt07WWbVmXFhV4wUuy6DZSQYDdfqVH2BujKo/ImdL5zfEJApRnpg==",
             "license": "MIT",
             "dependencies": {
-                "@maplibre/maplibre-gl-style-spec": "^19.2.1",
-                "@types/mapbox-gl": ">=1.0.0"
+                "@vis.gl/react-mapbox": "8.0.1",
+                "@vis.gl/react-maplibre": "8.0.1"
             },
             "peerDependencies": {
                 "mapbox-gl": ">=1.13.0",
-                "maplibre-gl": ">=1.13.0 <5.0.0",
+                "maplibre-gl": ">=1.13.0",
                 "react": ">=16.3.0",
                 "react-dom": ">=16.3.0"
             },
diff --git a/package.json b/package.json
index 7a3b64d9d..50c02b433 100644
--- a/package.json
+++ b/package.json
@@ -139,6 +139,7 @@
         "@types/google-maps": "^3.2.6",
         "@types/mapbox-gl": "^3.1.0",
         "@types/pdf-parse": "^1.1.4",
+        "@types/react-map-gl": "^6.1.7",
         "@types/reveal": "^4.2.0",
         "@types/supercluster": "^7.1.3",
         "@types/textfit": "^2.4.4",
@@ -302,7 +303,7 @@
         "react-jsx-parser": "^2.0.0",
         "react-latex-next": "^3.0.0",
         "react-loading": "^2.0.3",
-        "react-map-gl": "^7.1.9",
+        "react-map-gl": "^8.0.1",
         "react-markdown": "^10.0.0",
         "react-measure": "^2.5.2",
         "react-resizable": "^3.0.5",
diff --git a/src/client/views/nodes/MapBox/AnimationUtility.ts b/src/client/views/nodes/MapBox/AnimationUtility.ts
index a3ac68b99..f6509b885 100644
--- a/src/client/views/nodes/MapBox/AnimationUtility.ts
+++ b/src/client/views/nodes/MapBox/AnimationUtility.ts
@@ -3,7 +3,7 @@ import * as d3 from 'd3';
 import { Feature, GeoJsonProperties, Geometry, LineString } from 'geojson';
 import { MercatorCoordinate } from 'mapbox-gl';
 import { action, computed, makeObservable, observable, runInAction } from 'mobx';
-import { MapRef } from 'react-map-gl';
+import { MapRef } from 'react-map-gl/mapbox';
 
 export type Position = [number, number];
 
diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
index 3630d6ea3..fc5377ba4 100644
--- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
+++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
@@ -1,7 +1,8 @@
+import { IconButton } from '@dash/components';
 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 { Autocomplete, Checkbox, FormControlLabel, TextField } from '@mui/material';
-import { IconButton } from '@dash/components';
+import { LngLatLike } from 'mapbox-gl';
 import { IReactionDisposer, ObservableMap, action, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -14,12 +15,10 @@ import { CalendarManager } from '../../../util/CalendarManager';
 import { SettingsManager } from '../../../util/SettingsManager';
 import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu';
 import { DocumentView } from '../DocumentView';
+import { Position } from './AnimationUtility';
 import './MapAnchorMenu.scss';
 import { MapboxApiUtility, TransportationType } from './MapboxApiUtility';
 import { MarkerIcons } from './MarkerIcons';
-import { LngLatLike } from 'mapbox-gl';
-import { Position } from './AnimationUtility';
-// import { GPTPopup, GPTPopupMode } from './../../GPTPopup/GPTPopup';
 
 type MapAnchorMenuType = 'standard' | 'routeCreation' | 'calendar' | 'customize' | 'route';
 
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 2c9c185af..80afcd802 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -10,7 +10,7 @@ import { IReactionDisposer, ObservableMap, action, autorun, computed, makeObserv
 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 { Layer, MapProvider, MapRef, Map as MapboxMap, Marker, Source, ViewState, ViewStateChangeEvent } from 'react-map-gl/mapbox';
 import { ClientUtils, setupMoveUpEvents } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
 import { Doc, DocListCast, Field, LinkedTo, Opt } from '../../../../fields/Doc';
diff --git a/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx b/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx
index 0627d382e..ddeaf4d0d 100644
--- a/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx
+++ b/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx
@@ -4,7 +4,7 @@ import { Button, EditableText, IconButton, Type } from '@dash/components';
 import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { MapProvider, Map as MapboxMap } from 'react-map-gl';
+import { MapProvider, Map as MapboxMap } from 'react-map-gl/mapbox';
 import { ClientUtils, returnEmptyFilter, returnFalse, returnOne, setupMoveUpEvents } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
 import { Doc, DocListCast, Field, LinkedTo, Opt, returnEmptyDoclist } from '../../../../fields/Doc';
-- 
cgit v1.2.3-70-g09d2

