frontend/src/components/maps/LocationMapBottomSheet.jsx

@@ -43,6 +43,7 @@ export default function LocationMapBottomSheet({
   onDuplicateObject,
   onDeleteObject,
   onShowHiddenAreas,
+  onClearSelection,
   onSelectZoneItem,
   onSelectUnmappedItem,
 }) {
@@ -186,6 +187,16 @@ export default function LocationMapBottomSheet({
           </div>
         </div>
         <div className="location-map-layer-actions">
+          {selectedObject ? (
+            <button
+              type="button"
+              className="location-map-sheet-close"
+              onClick={onClearSelection}
+              aria-label="Close selected map area"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          ) : null}
           {changedLayerCount ? (
             <button
               type="button"

frontend/src/pages/LocationMapManager.jsx

@@ -499,6 +499,7 @@ export default function LocationMapManager() {
               onDuplicateObject={handleDuplicateObject}
               onDeleteObject={requestDeleteObject}
               onShowHiddenAreas={handleShowHiddenAreas}
+              onClearSelection={() => setSelectedObjectKey(null)}
               onSelectZoneItem={setBuyModalItem}
               onSelectUnmappedItem={setBuyModalItem}
             />

frontend/src/styles/pages/LocationMapManager.css

@@ -471,6 +471,29 @@
   gap: 0.4rem;
 }
 
+.location-map-sheet-close {
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--color-border-light);
+  border-radius: 999px;
+  background: rgba(15, 23, 34, 0.72);
+  color: #f8fafc;
+  font-size: 1.25rem;
+  font-weight: 900;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.location-map-sheet-close:hover,
+.location-map-sheet-close:focus-visible {
+  border-color: rgba(96, 165, 250, 0.76);
+  background: rgba(59, 130, 246, 0.22);
+}
+
 .location-map-layer-toggle {
   min-height: 40px;
   display: inline-flex;

frontend/tests/location-map-manager.spec.ts

@@ -3821,7 +3821,18 @@ test("mobile editor uses bottom sheet controls instead of desktop object toolbar
   expect(selectedSecondaryButtonBox.height).toBeGreaterThanOrEqual(40);
   expect(firstFieldRowBox.height).toBeLessThanOrEqual(54);
   expect(firstFlagButtonBox.height).toBeGreaterThanOrEqual(40);
-  await page.getByRole("button", { name: "View" }).click();
+  const closeSelectedButton = page.getByRole("button", { name: "Close selected map area" });
+  await expect(closeSelectedButton).toBeVisible();
+  const closeSelectedButtonBox = await closeSelectedButton.boundingBox();
+  expect(closeSelectedButtonBox).not.toBeNull();
+  if (!closeSelectedButtonBox) throw new Error("Selected area close button was not measurable");
+  expect(closeSelectedButtonBox.width).toBeGreaterThanOrEqual(40);
+  expect(closeSelectedButtonBox.height).toBeGreaterThanOrEqual(40);
+  await closeSelectedButton.click();
+  await expect(page.getByRole("textbox", { name: "Label" })).toHaveCount(0);
+  await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Edit Areas");
+  await expect(page.getByRole("button", { name: "Save Draft" })).toBeDisabled();
+  await page.getByRole("button", { name: "View", exact: true }).click();
   await expect(page.getByRole("textbox", { name: "Label" })).toHaveCount(0);
 });