some cleanup to mapbox, but no fix for ctrl-zoomed maps yet.

2 files changed, 37 insertions, 58 deletions

diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index ba1e99f84..81f123758 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -4,6 +4,7 @@
     height: 100%;
     overflow: hidden;
     display: flex;
+    position: absolute;
 
     .mapBox-infoWindow {
         background-color: white;
@@ -27,7 +28,7 @@
         // }
     }
 
-    .mapbox-settings-panel{
+    .mapbox-settings-panel {
         z-index: 900;
         padding: 10px 20px;
         display: flex;
@@ -41,7 +42,7 @@
         border-top-left-radius: 5px;
         border-bottom-left-radius: 5px;
 
-        .mapbox-style-select{
+        .mapbox-style-select {
             display: flex;
             flex-direction: column;
             align-items: flex-start;
@@ -49,14 +50,13 @@
             gap: 4px;
         }
 
-        .mapbox-terrain-selection{
+        .mapbox-terrain-selection {
             display: flex;
             flex-direction: row;
             align-items: center;
             justify-content: flex-start;
             gap: 4px;
         }
-
     }
 
     .mapbox-geocoding-search-results {
@@ -75,11 +75,10 @@
         .search-result-container {
             width: 100%;
             padding: 10px;
-            &:hover{
+            &:hover {
                 background-color: lighten(rgb(187, 187, 187), 10%);
             }
         }
-
     }
 
     .animation-panel {
@@ -105,7 +104,7 @@
             align-items: center;
             gap: 7px;
 
-            .animation-suboptions{
+            .animation-suboptions {
                 display: flex;
                 justify-content: flex-start;
                 flex-wrap: wrap;
@@ -113,25 +112,23 @@
                 gap: 7px;
                 width: 100%;
 
-                .first-person-label{
+                .first-person-label {
                     width: '130px' !important;
                 }
 
-                label{
+                label {
                     margin-bottom: 0;
                 }
-    
-                .speed-label{
+
+                .speed-label {
                     margin-right: 5px;
                 }
 
-                #divider{
+                #divider {
                     margin-left: 10px;
                     margin-right: 10px;
                 }
             }
-
-            
         }
     }
 
@@ -148,10 +145,8 @@
         bottom: 5px;
         left: 5px;
         padding: 3px;
-
     }
 
-
     .mapBox-topbar {
         display: flex;
         flex-direction: row;
@@ -235,4 +230,3 @@
         display: block;
     }
 }
-
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 5c4a6203a..b18bb9ad1 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -1149,20 +1149,21 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         }
     };
 
-    @observable
-    mapboxMapViewState: ViewState = {
-        zoom: this.dataDoc.map_zoom ? NumCast(this.dataDoc.map_zoom) : 8,
-        longitude: this.dataDoc.longitude ? NumCast(this.dataDoc.longitude) : -71.4128,
-        latitude: this.dataDoc.latitude ? NumCast(this.dataDoc.latitude) : 41.824,
-        pitch: this.dataDoc.map_pitch ? NumCast(this.dataDoc.map_pitch) : 0,
-        bearing: this.dataDoc.map_bearing ? NumCast(this.dataDoc.map_bearing) : 0,
-        padding: {
-            top: 0,
-            bottom: 0,
-            left: 0,
-            right: 0,
-        },
-    };
+    @computed get mapboxMapViewState(): ViewState {
+        return {
+            zoom: NumCast(this.dataDoc.map_zoom, 8),
+            longitude: NumCast(this.dataDoc.longitude, -71.4128),
+            latitude: NumCast(this.dataDoc.latitude, 41.824),
+            pitch: NumCast(this.dataDoc.map_pitch),
+            bearing: NumCast(this.dataDoc.map_bearing),
+            padding: {
+                top: 0,
+                bottom: 0,
+                left: 0,
+                right: 0,
+            },
+        };
+    }
 
     @computed
     get preAnimationViewState() {
@@ -1389,9 +1390,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             this.routeToAnimate = undefined;
             this.animationUtility = null;
         }
-        if (this.preAnimationViewState) {
-            this.mapboxMapViewState = this.preAnimationViewState;
-        }
     };
 
     @action
@@ -1487,10 +1485,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             const fixedBearing = Math.max(0, Math.min(360, bearing));
             this._mapRef.current.setBearing(fixedBearing);
             this.dataDoc.map_bearing = fixedBearing;
-            this.mapboxMapViewState = {
-                ...this.mapboxMapViewState,
-                bearing: fixedBearing,
-            };
         }
     };
 
@@ -1501,10 +1495,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             const fixedPitch = Math.max(0, Math.min(85, pitch));
             this._mapRef.current.setPitch(fixedPitch);
             this.dataDoc.map_pitch = fixedPitch;
-            this.mapboxMapViewState = {
-                ...this.mapboxMapViewState,
-                pitch: fixedPitch,
-            };
         }
     };
 
@@ -1515,10 +1505,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             const fixedZoom = Math.max(0, Math.min(16, zoom));
             this._mapRef.current.setZoom(fixedZoom);
             this.dataDoc.map_zoom = fixedZoom;
-            this.mapboxMapViewState = {
-                ...this.mapboxMapViewState,
-                zoom: fixedZoom,
-            };
         }
     };
 
@@ -1528,23 +1514,18 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             let newZoom: number;
             if (increment) {
                 console.log('inc');
-                newZoom = this.mapboxMapViewState.zoom + 1;
+                newZoom = Math.min(16, this.mapboxMapViewState.zoom + 1);
             } else {
                 console.log('dec');
-                newZoom = this.mapboxMapViewState.zoom - 1;
+                newZoom = Math.max(0, this.mapboxMapViewState.zoom - 1);
             }
             this._mapRef.current.setZoom(newZoom);
             this.dataDoc.map_zoom = newZoom;
-            this.mapboxMapViewState = {
-                ...this.mapboxMapViewState,
-                zoom: increment ? Math.min(16, newZoom) : Math.max(0, newZoom),
-            };
         }
     };
 
     @action
     onMapMove = (e: ViewStateChangeEvent) => {
-        this.mapboxMapViewState = e.viewState;
         this.dataDoc.longitude = e.viewState.longitude;
         this.dataDoc.latitude = e.viewState.latitude;
     };
@@ -1580,7 +1561,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 }), MapBox._rerenderDelay);
             return null;
         }
+        const parscale = this.props.ScreenToLocalTransform().Scale ?? 1;
         const scale = this.props.NativeDimScaling?.() || 1;
+        const docscale = this.props.DocumentView?.().props.ScreenToLocalTransform().Scale ?? 1;
 
         const renderAnnotations = (childFilters?: () => string[]) => null;
         return (
@@ -1682,15 +1665,17 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         <MapboxMap
                             ref={this._mapRef}
                             mapboxAccessToken={MAPBOX_ACCESS_TOKEN}
-                            id="mapbox-map"
-                            viewState={{ ...this.mapboxMapViewState, width: NumCast(this.layoutDoc._width) / scale, height: NumCast(this.layoutDoc._height) / scale }}
+                            viewState={this.isAnimating ? undefined : { ...this.mapboxMapViewState, width: NumCast(this.layoutDoc._width) / scale, height: NumCast(this.layoutDoc._height) / scale }}
                             mapStyle={this.dataDoc.map_style ? StrCast(this.dataDoc.map_style) : 'mapbox://styles/mapbox/streets-v11'}
                             style={{
-                                transformOrigin: 'center',
+                                transformOrigin: 'top left',
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
                                 transform: `scale(${scale < 1 ? 1 : scale})`,
                                 zIndex: '0',
-                                width: '100%',
-                                height: '100%',
+                                width: '100%', //NumCast(this.layoutDoc._width) / scale,
+                                height: '100%', // NumCast(this.layoutDoc._height) / scale,
                             }}
                             initialViewState={this.isAnimating ? undefined : this.mapboxMapViewState}
                             onMove={this.onMapMove}