added pinch zooming for maps, fixed sizing of search bar when zoomed in, turned off some unneeded widgets that don't locate properly when zoomed in.

2 files changed, 9 insertions, 4 deletions

diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index 1d27167f0..b3ce55786 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -9,6 +9,9 @@
     .mapboxgl-map {
         overflow: unset !important;
     }
+    .mapboxgl-ctrl {
+        display: none !important;
+    }
 
     .mapBox-infoWindow {
         background-color: white;
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index efe0a3620..b627ba459 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -1502,15 +1502,16 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     };
 
     @action
+    onMapZoom = (e: ViewStateChangeEvent) => (this.dataDoc.map_zoom = e.viewState.zoom);
+
+    @action
     onMapMove = (e: ViewStateChangeEvent) => {
         this.dataDoc.longitude = e.viewState.longitude;
         this.dataDoc.latitude = e.viewState.latitude;
     };
 
     @action
-    toggleShowTerrain = () => {
-        this.showTerrain = !this.showTerrain;
-    };
+    toggleShowTerrain = () => (this.showTerrain = !this.showTerrain);
 
     getMarkerIcon = (pinDoc: Doc): JSX.Element | null => {
         const markerType = StrCast(pinDoc.markerType);
@@ -1555,7 +1556,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     {renderAnnotations(this.opaqueFilter)}
                     {SnappingManager.IsDragging ? null : renderAnnotations()}
                     {!this.routeToAnimate && (
-                        <div className="mapBox-searchbar" style={{ zIndex: 1, position: 'relative', background: 'lightGray' }}>
+                        <div className="mapBox-searchbar" style={{ width: `${100 / scale}%`, zIndex: 1, position: 'relative', background: 'lightGray' }}>
                             <TextField fullWidth placeholder="Enter a location" onChange={(e: any) => this.handleSearchChange(e.target.value)} />
                             <IconButton icon={<FontAwesomeIcon icon={faGear as IconLookup} size="1x" />} type={Type.TERT} onClick={e => this.toggleSettings()} />
                         </div>
@@ -1651,6 +1652,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                                 height: NumCast(this.layoutDoc._height) * parscale,
                             }}
                             initialViewState={this.isAnimating ? undefined : this.mapboxMapViewState}
+                            onZoom={this.onMapZoom}
                             onMove={this.onMapMove}
                             onClick={this.handleMapClick}
                             onDblClick={this.handleMapDblClick}