fix for ctrl-zoom of map

1 files changed, 9 insertions, 2 deletions

diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 735c04c1d..c25d10a0d 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -1593,12 +1593,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     onPointerDown={async e => {
                         e.button === 0 && !e.ctrlKey && e.stopPropagation();
                     }}
-                    style={{ pointerEvents: this.pointerEvents() }}>
+                    style={{ width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}>
                     <div style={{ mixBlendMode: 'multiply' }}>{renderAnnotations(this.transparentFilter)}</div>
                     {renderAnnotations(this.opaqueFilter)}
                     {SnappingManager.IsDragging ? null : renderAnnotations()}
                     {!this.routeToAnimate && (
-                        <div className="mapBox-searchbar">
+                        <div className="mapBox-searchbar" style={{ 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>
@@ -1686,6 +1686,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                             id="mapbox-map"
                             viewState={{ ...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',
+                                transform: `scale(${scale < 1 ? 1 : scale})`,
+                                zIndex: '0',
+                                width: '100%',
+                                height: '100%',
+                            }}
                             initialViewState={this.isAnimating ? undefined : this.mapboxMapViewState}
                             onMove={this.onMapMove}
                             onClick={this.handleMapClick}