diff --git a/web/apps/photos/src/components/PhotoViewer/FileInfo/MapBox.tsx b/web/apps/photos/src/components/PhotoViewer/FileInfo/MapBox.tsx
deleted file mode 100644
index 8023cfc69f..0000000000
--- a/web/apps/photos/src/components/PhotoViewer/FileInfo/MapBox.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { haveWindow } from "@/base/env";
-import { type Location } from "@/base/types";
-import { ChipButton } from "@/new/photos/components/mui/ChipButton";
-import { styled } from "@mui/material";
-import { t } from "i18next";
-import { useEffect, useRef } from "react";
-
-import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css"; // Re-uses images from ~leaflet package
-import "leaflet/dist/leaflet.css";
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-haveWindow() && require("leaflet-defaulticon-compatibility");
-const L = haveWindow()
-    ? // eslint-disable-next-line @typescript-eslint/no-require-imports
-      (require("leaflet") as typeof import("leaflet"))
-    : null;
-
-const LAYER_TILE_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
-const LAYER_TILE_ATTRIBUTION =
-    '&copy; <a target="_blank" rel="noopener" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
-const ZOOM_LEVEL = 16;
-
-const MapBoxContainer = styled("div")`
-    height: 200px;
-    width: 100%;
-`;
-const MapBoxEnableContainer = styled(MapBoxContainer)`
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(255, 255, 255, 0.09);
-`;
-
-interface MapBoxProps {
-    location: Location;
-    mapEnabled: boolean;
-    openUpdateMapConfirmationDialog: () => void;
-}
-
-const MapBox: React.FC<MapBoxProps> = ({
-    location,
-    mapEnabled,
-    openUpdateMapConfirmationDialog,
-}) => {
-    const mapBoxContainerRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        const mapContainer = mapBoxContainerRef.current;
-        if (mapEnabled) {
-            const position: L.LatLngTuple = [
-                location.latitude,
-                location.longitude,
-            ];
-            if (mapContainer && !mapContainer.hasChildNodes()) {
-                const map = L.map(mapContainer).setView(position, ZOOM_LEVEL);
-                L.tileLayer(LAYER_TILE_URL, {
-                    attribution: LAYER_TILE_ATTRIBUTION,
-                }).addTo(map);
-                L.marker(position).addTo(map).openPopup();
-            }
-        } else {
-            if (mapContainer?.hasChildNodes()) {
-                if (mapContainer.firstChild) {
-                    mapContainer.removeChild(mapContainer.firstChild);
-                }
-            }
-        }
-    }, [mapEnabled]);
-
-    return mapEnabled ? (
-        <MapBoxContainer ref={mapBoxContainerRef} />
-    ) : (
-        <MapBoxEnableContainer>
-            <ChipButton onClick={openUpdateMapConfirmationDialog}>
-                {t("enable_map")}
-            </ChipButton>
-        </MapBoxEnableContainer>
-    );
-};
-
-export default MapBox;
diff --git a/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx b/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx
index 9c49bae260..dc5fdd579e 100644
--- a/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx
+++ b/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx
@@ -5,6 +5,7 @@ import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
 import { EllipsizedTypography } from "@/base/components/Typography";
 import { useModalVisibility } from "@/base/components/utils/modal";
+import { haveWindow } from "@/base/env";
 import { nameAndExtension } from "@/base/file-name";
 import log from "@/base/log";
 import type { Location } from "@/base/types";
@@ -72,7 +73,7 @@ import type { DisplayFile } from "components/PhotoFrame";
 import { Formik } from "formik";
 import { t } from "i18next";
 import { GalleryContext } from "pages/gallery";
-import React, { useContext, useEffect, useMemo, useState } from "react";
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import {
     changeCaption,
     changeFileName,
@@ -80,7 +81,16 @@ import {
 } from "utils/file";
 import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery";
 import * as Yup from "yup";
-import MapBox from "./MapBox";
+
+// Re-uses images from ~leaflet package.
+import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css";
+import "leaflet/dist/leaflet.css";
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+haveWindow() && require("leaflet-defaulticon-compatibility");
+const leaflet = haveWindow()
+    ? // eslint-disable-next-line @typescript-eslint/no-require-imports
+      (require("leaflet") as typeof import("leaflet"))
+    : null;
 
 export interface FileInfoExif {
     tags: RawExifTags | undefined;
@@ -841,6 +851,73 @@ const BasicDeviceCamera: React.FC<{ parsedExif: ExifInfo }> = ({
 const openStreetMapLink = ({ latitude, longitude }: Location) =>
     `https://www.openstreetmap.org/?mlat=${latitude}&mlon=${longitude}#map=15/${latitude}/${longitude}`;
 
+interface MapBoxProps {
+    location: Location;
+    mapEnabled: boolean;
+    openUpdateMapConfirmationDialog: () => void;
+}
+
+const MapBox: React.FC<MapBoxProps> = ({
+    location,
+    mapEnabled,
+    openUpdateMapConfirmationDialog,
+}) => {
+    const urlTemplate = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+    const attribution =
+        '&copy; <a target="_blank" rel="noopener" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
+    const zoom = 16;
+
+    const mapBoxContainerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const mapContainer = mapBoxContainerRef.current;
+        if (mapEnabled) {
+            const position: L.LatLngTuple = [
+                location.latitude,
+                location.longitude,
+            ];
+            if (mapContainer && !mapContainer.hasChildNodes()) {
+                const map = leaflet.map(mapContainer).setView(position, zoom);
+                leaflet
+                    .tileLayer(urlTemplate, {
+                        attribution,
+                    })
+                    .addTo(map);
+                leaflet.marker(position).addTo(map).openPopup();
+            }
+        } else {
+            if (mapContainer?.hasChildNodes()) {
+                if (mapContainer.firstChild) {
+                    mapContainer.removeChild(mapContainer.firstChild);
+                }
+            }
+        }
+    }, [mapEnabled]);
+
+    return mapEnabled ? (
+        <MapBoxContainer ref={mapBoxContainerRef} />
+    ) : (
+        <MapBoxEnableContainer>
+            <ChipButton onClick={openUpdateMapConfirmationDialog}>
+                {t("enable_map")}
+            </ChipButton>
+        </MapBoxEnableContainer>
+    );
+};
+
+const MapBoxContainer = styled("div")`
+    height: 200px;
+    width: 100%;
+`;
+
+const MapBoxEnableContainer = styled(MapBoxContainer)`
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.09);
+`;
+
 interface RawExifProps {
     open: boolean;
     onClose: () => void;