diff --git a/meshchatx/src/frontend/components/map/MapPage.vue b/meshchatx/src/frontend/components/map/MapPage.vue
index 7fd8345..be586e1 100644
--- a/meshchatx/src/frontend/components/map/MapPage.vue
+++ b/meshchatx/src/frontend/components/map/MapPage.vue
@@ -98,23 +98,36 @@
             </div>
         </div>
 
-        <!-- map container -->
-        <div class="relative flex-1 min-h-0">
+        <!-- map container (h-full so absolute overlays can use max-h-full / inset height) -->
+        <div ref="mapViewOverlayRoot" class="relative flex-1 min-h-0 h-full">
             <MapDrawingToolbar
                 :tools="drawingTools"
                 :draw-type="drawType"
                 :measuring="isMeasuring"
+                :bearing-mode="isBearingMode"
+                :bearing-from-gps="bearingFromGps"
                 :export-mode="isExportMode"
                 :selected-feature="selectedFeature"
                 @toggle-draw="toggleDraw"
                 @toggle-export="toggleExportMode"
                 @toggle-measure="toggleMeasure"
+                @toggle-bearing="toggleBearingMode"
+                @bearing-from-here="startBearingFromMyLocation"
                 @clear="clearDrawings"
                 @edit-note="startEditingNote"
                 @delete-feature="deleteSelectedFeature"
                 @save="showSaveDrawingModal = true"
                 @load="openLoadDrawingModal"
                 @locate="goToMyLocation"
+                @share-view="shareMapView"
+                @ping-here="openPingModalFromMapCenter"
+            />
+
+            <MapBearingInstructions
+                v-if="isBearingMode"
+                :from-gps-active="bearingFromGps"
+                :awaiting-second-tap="bearingFromGps || !!bearingFirstMapCoord"
+                @use-my-location="startBearingFromMyLocation"
             />
 
             <div
@@ -205,6 +218,58 @@
                 </div>
             </div>
 
+            <div ref="drawFeatureInfoElement" class="absolute z-[45] pointer-events-none">
+                <div
+                    v-show="drawFeatureInfoPayload"
+                    class="pointer-events-auto min-w-[11rem] max-w-[min(18rem,calc(100vw-2rem))] rounded-xl border border-gray-200 dark:border-zinc-700 bg-white/95 dark:bg-zinc-900/95 backdrop-blur shadow-xl px-3 py-2.5 transform -translate-x-1/2 -translate-y-full mb-2"
+                >
+                    <template v-if="drawFeatureInfoPayload">
+                        <div v-if="drawFeatureInfoPayload.iconSrc" class="flex justify-center mb-2">
+                            <img
+                                :src="drawFeatureInfoPayload.iconSrc"
+                                alt=""
+                                class="max-h-12 max-w-[4.5rem] object-contain rounded border border-gray-100 dark:border-zinc-800 bg-gray-50 dark:bg-zinc-800/50"
+                            />
+                        </div>
+                        <div
+                            v-if="drawFeatureInfoPayload.name"
+                            class="text-xs font-bold text-gray-900 dark:text-zinc-100 leading-snug mb-1"
+                        >
+                            {{ drawFeatureInfoPayload.name }}
+                        </div>
+                        <div
+                            v-if="drawFeatureInfoPayload.description && !drawFeatureInfoPayload.descriptionIsHtml"
+                            class="text-[11px] text-gray-600 dark:text-zinc-400 whitespace-pre-wrap break-words leading-snug"
+                        >
+                            {{ drawFeatureInfoPayload.description }}
+                        </div>
+                        <!-- eslint-disable vue/no-v-html -->
+                        <div
+                            v-else-if="drawFeatureDescriptionSanitized"
+                            class="text-[11px] text-gray-600 dark:text-zinc-400 prose prose-sm dark:prose-invert max-w-none leading-snug"
+                            v-html="drawFeatureDescriptionSanitized"
+                        ></div>
+                        <!-- eslint-enable vue/no-v-html -->
+                        <dl
+                            v-if="drawFeatureInfoPayload.extended.length"
+                            class="mt-2 space-y-1 border-t border-gray-100 dark:border-zinc-800 pt-2"
+                        >
+                            <template v-for="row in drawFeatureInfoPayload.extended" :key="row.key">
+                                <div class="grid grid-cols-[minmax(0,40%)_1fr] gap-x-2 gap-y-0.5 text-[10px]">
+                                    <dt
+                                        class="font-semibold text-gray-500 dark:text-zinc-500 truncate"
+                                        :title="row.key"
+                                    >
+                                        {{ row.key }}
+                                    </dt>
+                                    <dd class="text-gray-800 dark:text-zinc-200 break-words m-0">{{ row.value }}</dd>
+                                </div>
+                            </template>
+                        </dl>
+                    </template>
+                </div>
+            </div>
+
             <!-- context menu -->
             <ContextMenuPanel
                 :show="showContextMenu"
@@ -239,6 +304,10 @@
                     <MaterialDesignIcon icon-name="crosshairs-gps" class="size-4" />
                     Copy coords
                 </ContextMenuItem>
+                <ContextMenuItem @click="contextPingHere">
+                    <MaterialDesignIcon icon-name="send" class="size-4" />
+                    {{ $t("map.ping_here") }}
+                </ContextMenuItem>
                 <ContextMenuItem v-if="!contextMenuFeature" @click="contextClearMap">
                     <MaterialDesignIcon icon-name="delete-sweep" class="size-4" />
                     Clear drawings
@@ -268,7 +337,11 @@
                 @select="selectClusterItem"
             />
 
-            <MapExportInstructions v-if="isExportMode && !selectedBbox" />
+            <MapExportInstructions
+                v-if="isExportMode && !selectedBbox"
+                :presets="exportRegionPresets"
+                @select-preset="applyExportRegionPreset"
+            />
 
             <MapExportConfigPanel
                 v-if="isExportMode && selectedBbox"
@@ -276,6 +349,7 @@
                 v-model:max-zoom="exportMaxZoom"
                 :estimated-tiles="estimatedTiles"
                 :exporting="isExporting"
+                :tile-limit-exceeded="exportTileLimitExceeded"
                 @cancel="cancelExport"
                 @start="startExport"
             />
@@ -293,8 +367,80 @@
 
             <MapNoMapWarning v-if="offlineEnabled && !hasOfflineMap" @upload="$refs.fileInput.click()" />
 
-            <!-- map info overlay -->
-            <div class="absolute bottom-4 left-4 z-10 space-y-2 pointer-events-none">
+            <div
+                v-if="showMapPingModal"
+                class="fixed inset-0 z-[200] flex items-center justify-center bg-black/40 p-4"
+                role="dialog"
+                aria-modal="true"
+                @click.self="showMapPingModal = false"
+            >
+                <div
+                    class="bg-white dark:bg-zinc-900 rounded-xl shadow-2xl max-w-md w-full p-4 border border-gray-200 dark:border-zinc-800 text-gray-900 dark:text-zinc-100"
+                >
+                    <div class="flex items-center justify-between mb-3">
+                        <h3 class="font-bold text-lg">{{ $t("map.ping_modal_title") }}</h3>
+                        <button
+                            type="button"
+                            class="p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-zinc-800"
+                            @click="showMapPingModal = false"
+                        >
+                            <MaterialDesignIcon icon-name="close" class="size-5" />
+                        </button>
+                    </div>
+                    <p class="text-xs text-gray-500 dark:text-zinc-400 mb-2 font-mono">
+                        {{ mapPingSummary }}
+                    </p>
+                    <label class="block text-[10px] font-bold text-gray-400 uppercase mb-1">{{
+                        $t("map.ping_destination")
+                    }}</label>
+                    <select
+                        v-model="pingDestinationHash"
+                        class="w-full mb-2 bg-gray-50 dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg px-3 py-2 text-sm"
+                    >
+                        <option value="">{{ $t("map.ping_pick_conversation") }}</option>
+                        <option v-for="p in conversationOptions" :key="p.hash" :value="p.hash">
+                            {{ p.label }}
+                        </option>
+                    </select>
+                    <button
+                        type="button"
+                        class="w-full py-2 mb-3 text-sm font-bold bg-blue-500 hover:bg-blue-600 text-white rounded-lg"
+                        :disabled="!pingDestinationHash"
+                        @click="sendMapPing"
+                    >
+                        {{ $t("map.ping_send") }}
+                    </button>
+                    <button
+                        type="button"
+                        class="w-full py-2 text-sm font-semibold bg-gray-100 dark:bg-zinc-800 rounded-lg"
+                        @click="showMapPingModal = false"
+                    >
+                        {{ $t("common.cancel") }}
+                    </button>
+                </div>
+            </div>
+
+            <!-- scale line: bottom-right so it never stacks over the lat/lon readout (bottom-left) -->
+            <div
+                ref="scaleLineMount"
+                class="ol-scale-line-host absolute z-10 bottom-4 right-4 sm:bottom-4 max-sm:bottom-[5.5rem] pointer-events-auto min-w-[120px] max-w-[min(55vw,14rem)]"
+                :class="{ 'ol-scale-line-host--dark-basemap': isDarkRasterBasemap }"
+            ></div>
+
+            <!-- map info overlay (north + metadata + coords) -->
+            <div
+                class="absolute bottom-4 left-4 z-10 flex flex-col gap-2 pointer-events-none max-w-[min(100vw-2rem,22rem)]"
+            >
+                <div
+                    class="flex flex-col items-center justify-end text-gray-800 dark:text-zinc-100 bg-white/80 dark:bg-zinc-900/80 border border-gray-200 dark:border-zinc-800 rounded-lg px-2 py-1 shadow-sm pointer-events-auto w-fit"
+                    :title="$t('map.north_up')"
+                >
+                    <span class="text-[10px] font-black leading-none">N</span>
+                    <MaterialDesignIcon
+                        icon-name="navigation"
+                        class="size-5 text-blue-600 dark:text-blue-400 -mb-0.5"
+                    />
+                </div>
                 <div
                     v-if="metadata && metadata.name && !metadata.name.startsWith('Map Export')"
                     class="bg-white/80 dark:bg-zinc-900/80 backdrop-blur border border-gray-200 dark:border-zinc-800 p-2 rounded-lg text-xs text-gray-600 dark:text-zinc-400 pointer-events-auto shadow-sm"
@@ -326,14 +472,31 @@
                 </div>
             </div>
 
-            // controls overlay -->
             <!-- controls overlay -->
             <div
                 v-if="isSettingsOpen"
-                class="absolute top-14 right-4 z-20 w-72 max-h-[calc(100vh-5rem)] bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm rounded-xl shadow-2xl border border-gray-200 dark:border-zinc-800 overflow-hidden flex flex-col animate-in fade-in zoom-in-95 duration-200"
+                ref="settingsPanel"
+                class="absolute z-20 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm rounded-xl shadow-2xl border border-gray-200 dark:border-zinc-800 overflow-hidden flex flex-col min-h-0 animate-in fade-in zoom-in-95 duration-200"
+                :class="
+                    settingsPanelPos
+                        ? 'w-96 max-w-[min(100vw-2rem,28rem)] max-h-full'
+                        : isMobileScreen
+                          ? 'left-2 right-2 top-14 bottom-2 w-auto max-w-none'
+                          : 'top-14 right-4 w-96 max-w-[min(100vw-2rem,28rem)] max-h-full'
+                "
+                :style="
+                    settingsPanelPos
+                        ? { left: `${settingsPanelPos.left}px`, top: `${settingsPanelPos.top}px` }
+                        : undefined
+                "
             >
                 <div
-                    class="p-3 border-b border-gray-200 dark:border-zinc-800 flex items-center justify-between shrink-0 bg-gray-50/50 dark:bg-zinc-800/50"
+                    ref="settingsPanelHeader"
+                    class="p-3 border-b border-gray-200 dark:border-zinc-800 flex items-center justify-between shrink-0 bg-gray-50/50 dark:bg-zinc-800/50 touch-none select-none cursor-grab active:cursor-grabbing"
+                    @pointerdown="onSettingsPanelPointerDown"
+                    @pointermove="onSettingsPanelPointerMove"
+                    @pointerup="onSettingsPanelPointerUp"
+                    @pointercancel="onSettingsPanelPointerUp"
                 >
                     <div class="flex items-center space-x-2">
                         <MaterialDesignIcon icon-name="cog" class="size-4 text-gray-500 dark:text-gray-300" />
@@ -342,7 +505,9 @@
                         </h3>
                     </div>
                     <button
-                        class="p-1 hover:bg-gray-200 dark:hover:bg-zinc-700 rounded-lg transition-colors text-gray-500 dark:text-gray-300"
+                        type="button"
+                        class="p-1 hover:bg-gray-200 dark:hover:bg-zinc-700 rounded-lg transition-colors text-gray-500 dark:text-gray-300 cursor-pointer"
+                        @pointerdown.stop
                         @click="isSettingsOpen = false"
                     >
                         <MaterialDesignIcon icon-name="close" class="size-4" />
@@ -369,6 +534,16 @@
                         </button>
                     </div>
 
+                    <MapVectorExchangePanel
+                        :disabled="!drawSource"
+                        :has-features="hasVectorDrawFeatures"
+                        @import-features="onVectorExchangeImport"
+                        @import-error="onVectorExchangeImportError"
+                        @export-geojson="exportVectorGeoJson"
+                        @export-kml="exportVectorKml"
+                        @export-kmz="exportVectorKmz"
+                    />
+
                     <!-- Map Style Presets -->
                     <div v-if="!offlineEnabled" class="space-y-2">
                         <div class="flex items-center justify-between">
@@ -608,42 +783,53 @@
                 </div>
             </div>
 
-            <!-- offline warning overlay -->
             <div
-                v-if="showOfflineHint"
-                class="absolute top-14 left-1/2 -translate-x-1/2 z-30 w-full max-w-sm px-4 animate-in fade-in slide-in-from-top-4 duration-500"
+                v-if="!offlineEnabled && showTileConnectivityBanner"
+                class="absolute top-14 left-1/2 -translate-x-1/2 z-30 w-full max-w-md px-4 animate-in fade-in slide-in-from-top-4 duration-500"
             >
                 <div
-                    class="bg-amber-500 text-white rounded-xl shadow-2xl p-4 flex items-start space-x-3 border-2 border-amber-600/50"
+                    class="rounded-xl shadow-2xl p-4 flex items-start gap-3 border border-zinc-700/80 bg-zinc-900 text-zinc-100 dark:border-zinc-600 dark:bg-zinc-950"
                 >
-                    <MaterialDesignIcon icon-name="wifi-off" class="size-6 shrink-0 mt-0.5" />
-                    <div class="flex-1 space-y-2">
-                        <p class="text-xs font-bold leading-tight">
-                            Failed to fetch map tiles. You appear to be offline or off-grid.
+                    <MaterialDesignIcon icon-name="wifi-off" class="size-6 shrink-0 mt-0.5 text-amber-400" />
+                    <div class="flex-1 min-w-0 space-y-2">
+                        <p class="text-sm font-semibold leading-snug text-white">
+                            {{ $t("map.tile_connectivity_title") }}
                         </p>
-                        <p class="text-[10px] opacity-90 font-medium leading-relaxed">
-                            Please use an
-                            <strong
-                                class="font-bold text-white underline decoration-white/30 decoration-2 underline-offset-2"
-                                >Offline Map</strong
-                            >
-                            with MBTiles, or configure a local tile/geocoder server in the map settings.
+                        <p class="text-xs leading-relaxed text-zinc-300">
+                            {{ $t("map.tile_connectivity_body") }}
                         </p>
-                        <div class="flex space-x-2 pt-1">
+                        <div class="flex flex-wrap gap-2 pt-1">
                             <button
-                                class="px-3 py-1 bg-white/20 hover:bg-white/30 rounded-lg text-[10px] font-bold uppercase transition-colors border border-white/20"
-                                @click="
-                                    isSettingsOpen = true;
-                                    showOfflineHint = false;
-                                "
+                                type="button"
+                                class="px-3 py-1.5 rounded-lg text-xs font-semibold bg-blue-600 hover:bg-blue-500 text-white transition-colors"
+                                @click="retryMapTiles"
                             >
-                                Open Settings
+                                {{ $t("map.tile_connectivity_retry") }}
                             </button>
                             <button
-                                class="px-3 py-1 bg-black/10 hover:bg-black/20 rounded-lg text-[10px] font-bold uppercase transition-colors"
-                                @click="showOfflineHint = false"
+                                v-if="hasOfflineMap"
+                                type="button"
+                                class="px-3 py-1.5 rounded-lg text-xs font-semibold bg-zinc-700 hover:bg-zinc-600 text-white transition-colors"
+                                @click="switchToOfflineFromTileBanner"
                             >
-                                Dismiss
+                                {{ $t("map.tile_connectivity_use_offline") }}
+                            </button>
+                            <button
+                                type="button"
+                                class="px-3 py-1.5 rounded-lg text-xs font-semibold text-zinc-300 hover:bg-zinc-800 transition-colors"
+                                @click="dismissTileConnectivityBanner"
+                            >
+                                {{ $t("map.tile_connectivity_dismiss") }}
+                            </button>
+                            <button
+                                type="button"
+                                class="px-3 py-1.5 rounded-lg text-xs font-semibold text-zinc-400 hover:text-zinc-200 transition-colors"
+                                @click="
+                                    dismissTileConnectivityBanner();
+                                    isSettingsOpen = true;
+                                "
+                            >
+                                {{ $t("map.settings") }}
                             </button>
                         </div>
                     </div>
@@ -879,7 +1065,9 @@
 </template>
 
 <script>
+import { markRaw } from "vue";
 import "ol/ol.css";
+import "../../js/mapVectorWebFonts.js";
 import { apply as applyMapboxStyle } from "ol-mapbox-style";
 import Map from "ol/Map";
 import View from "ol/View";
@@ -895,6 +1083,7 @@ import * as mdi from "@mdi/js";
 import { Style, Text, Fill, Stroke, Circle as CircleStyle, Icon } from "ol/style";
 import { fromLonLat, toLonLat } from "ol/proj";
 import { defaults as defaultControls } from "ol/control";
+import ScaleLine from "ol/control/ScaleLine";
 import DragBox from "ol/interaction/DragBox";
 import Draw from "ol/interaction/Draw";
 import Modify from "ol/interaction/Modify";
@@ -925,22 +1114,49 @@ import {
 import MaterialDesignIcon from "../MaterialDesignIcon.vue";
 import ContextMenuItem from "../contextmenu/ContextMenuItem.vue";
 import ContextMenuPanel from "../contextmenu/ContextMenuPanel.vue";
+import DOMPurify from "dompurify";
 import ToastUtils from "../../js/ToastUtils";
 import TileCache from "../../js/TileCache";
+import {
+    fetchTileBlobWithRetry,
+    fetchJsonWithRetry,
+    buildNominatimSearchUrl,
+    NOMINATIM_FETCH_TIMEOUT_MS,
+    NOMINATIM_FETCH_RETRIES,
+    NOMINATIM_FETCH_RETRY_BASE_DELAY_MS,
+} from "../../js/mapTileNetwork";
 import Toggle from "../forms/Toggle.vue";
 import WebSocketConnection from "../../js/WebSocketConnection";
 import MapClusterPanel from "./internal/MapClusterPanel.vue";
 import MapMarkerPanel from "./internal/MapMarkerPanel.vue";
 import MapDrawingToolbar from "./internal/MapDrawingToolbar.vue";
+import MapBearingInstructions from "./internal/MapBearingInstructions.vue";
 import MapSearchBar from "./internal/MapSearchBar.vue";
 import MapExportInstructions from "./internal/MapExportInstructions.vue";
 import MapExportConfigPanel from "./internal/MapExportConfigPanel.vue";
 import MapExportProgressPanel from "./internal/MapExportProgressPanel.vue";
 import MapNoMapWarning from "./internal/MapNoMapWarning.vue";
 import MapLoadingOverlay from "./internal/MapLoadingOverlay.vue";
+import MapVectorExchangePanel from "./internal/MapVectorExchangePanel.vue";
+import { buildMeshchatMapUri, buildWebHashMapUrl } from "../../js/mapLinkUtils.js";
+import { writeFeaturesToGeoJson } from "../../js/mapExchange/geoJsonCodec.js";
+import { writeFeaturesToKml } from "../../js/mapExchange/kmlCodec.js";
+import { writeFeaturesToKmzBlob } from "../../js/mapExchange/kmzCodec.js";
+import { getDrawFeatureMetadataPayload, getFeatureAnchorCoordinate } from "../../js/mapExchange/metadataUtils.js";
+import { styleFromMcxProperties } from "../../js/mapExchange/styleFromProperties.js";
+import { computeSegmentMetrics, buildBearingOverlayHtml, buildBearingLiveTooltipHtml } from "../../js/mapGeodesy.js";
 
 const OPENFREEMAP_DEFAULT_STYLE = "https://tiles.openfreemap.org/styles/bright";
 const LEGACY_DEFAULT_OSM_RASTER = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
+const OFFLINE_MB_TILES_URL = "/api/v1/map/tiles/{z}/{x}/{y}.png";
+const OFFLINE_TRANSPARENT_TILE_PNG =
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==";
+
+const MAX_EXPORT_TILES = 200000;
+
+const WORLD_MBTILES_BBOX = [-180, -85.051129, 180, 85.051129];
+
+const MAP_FEATURE_HIT_TOLERANCE = 15;
 
 export default {
     name: "MapPage",
@@ -952,12 +1168,14 @@ export default {
         MapClusterPanel,
         MapMarkerPanel,
         MapDrawingToolbar,
+        MapBearingInstructions,
         MapSearchBar,
         MapExportInstructions,
         MapExportConfigPanel,
         MapExportProgressPanel,
         MapNoMapWarning,
         MapLoadingOverlay,
+        MapVectorExchangePanel,
     },
     data() {
         return {
@@ -967,6 +1185,8 @@ export default {
             metadata: null,
             isUploading: false,
             isSettingsOpen: false,
+            settingsPanelPos: null,
+            settingsPanelDrag: null,
             currentCenter: [0, 0],
             currentZoom: 2,
             cursorCoords: null,
@@ -1027,7 +1247,8 @@ export default {
             mbtilesDir: "",
             isMapLoaded: false,
             tileErrorCount: 0,
-            showOfflineHint: false,
+            showTileConnectivityBanner: false,
+            tileConnectivityBannerTimer: null,
 
             // drawing tools
             draw: null,
@@ -1048,6 +1269,11 @@ export default {
 
             // measurement
             isMeasuring: false,
+            isBearingMode: false,
+            bearingFromGps: false,
+            bearingGpsMapCoord: null,
+            bearingFirstMapCoord: null,
+            bearingPreviewFeature: null,
             sketch: null,
             helpTooltipElement: null,
             helpTooltip: null,
@@ -1064,6 +1290,8 @@ export default {
             hoveredFeature: null,
             hoveredMarker: null,
             noteOverlay: null,
+            drawFeatureInfoOverlay: null,
+            drawFeatureInfoPayload: null,
             showNoteModal: false,
             showSaveDrawingModal: false,
             newDrawingName: "",
@@ -1078,6 +1306,22 @@ export default {
             contextMenuPos: { x: 0, y: 0 },
             contextMenuFeature: null,
             contextMenuCoord: null,
+
+            showMapPingModal: false,
+            pingDestinationHash: "",
+            mapPingLat: 0,
+            mapPingLon: 0,
+            mapPingZoom: 10,
+
+            exportRegionPresets: [
+                { id: "world", bbox: WORLD_MBTILES_BBOX.slice(), minZoom: 0, maxZoom: 4 },
+                { id: "europe", bbox: [-12, 35, 40, 72], minZoom: 0, maxZoom: 10 },
+                { id: "north_america", bbox: [-170, 15, -50, 72], minZoom: 0, maxZoom: 10 },
+                { id: "south_america", bbox: [-82, -56, -34, 14], minZoom: 0, maxZoom: 10 },
+                { id: "africa", bbox: [-20, -36, 52, 38], minZoom: 0, maxZoom: 10 },
+                { id: "asia", bbox: [25, -12, 145, 55], minZoom: 0, maxZoom: 10 },
+                { id: "oceania", bbox: [110, -48, 179, 0], minZoom: 0, maxZoom: 10 },
+            ],
         };
     },
     computed: {
@@ -1087,6 +1331,10 @@ export default {
             }
             return this.$route?.query?.popout ?? this.getHashPopoutValue();
         },
+        isDarkRasterBasemap() {
+            const u = (this.tileServerUrl || "").toLowerCase();
+            return u.includes("dark_all");
+        },
         isPopoutMode() {
             return this.popoutRouteType === "map";
         },
@@ -1109,8 +1357,45 @@ export default {
         displayCoords() {
             return this.cursorCoords || this.currentCenter;
         },
+        hasVectorDrawFeatures() {
+            return Boolean(this.drawSource && this.drawSource.getFeatures().length > 0);
+        },
+        exportTileLimitExceeded() {
+            return this.estimatedTiles > MAX_EXPORT_TILES;
+        },
+        conversationOptions() {
+            const out = [];
+            for (const c of Object.values(this.peers || {})) {
+                const hash = c.destination_hash;
+                if (!hash) {
+                    continue;
+                }
+                const name = (c.display_name || "").trim();
+                const label = name ? `${name} (${hash.substring(0, 8)}…)` : hash;
+                out.push({ hash, label });
+            }
+            out.sort((a, b) => a.label.localeCompare(b.label));
+            return out;
+        },
+        mapPingSummary() {
+            return `${this.mapPingLat.toFixed(6)}, ${this.mapPingLon.toFixed(6)} @ z${Math.round(this.mapPingZoom)}`;
+        },
+        drawFeatureDescriptionSanitized() {
+            const p = this.drawFeatureInfoPayload;
+            if (!p || !p.description?.trim() || !p.descriptionIsHtml) {
+                return "";
+            }
+            return DOMPurify.sanitize(p.description, {
+                USE_PROFILES: { html: true },
+            });
+        },
     },
     watch: {
+        isSettingsOpen(open) {
+            if (open) {
+                this.$nextTick(() => this.clampSettingsPanelIntoView());
+            }
+        },
         selectedMarker(newVal, oldVal) {
             // Close mini-chat if the selected peer changed
             if (!newVal || !oldVal || newVal.telemetry?.destination_hash !== oldVal.telemetry?.destination_hash) {
@@ -1124,6 +1409,19 @@ export default {
                 });
             }
         },
+        "$route.query": {
+            handler() {
+                const name = this.$route.name;
+                if (name !== "map" && name !== "map-popout") {
+                    return;
+                }
+                if (!this.map || !this.markerSource) {
+                    return;
+                }
+                this.applyMapViewFromRoute();
+            },
+            deep: true,
+        },
     },
     async mounted() {
         await this.getConfig();
@@ -1181,37 +1479,7 @@ export default {
         // Listen for websocket messages
         WebSocketConnection.on("message", this.onWebsocketMessage);
 
-        // Check for query params to center map (overrides saved state)
-        if (this.$route.query.lat && this.$route.query.lon) {
-            const lat = parseFloat(this.$route.query.lat);
-            const lon = parseFloat(this.$route.query.lon);
-            const zoom = parseInt(this.$route.query.zoom || 15);
-            const label = this.$route.query.label || "Target";
-
-            if (!isNaN(lat) && !isNaN(lon)) {
-                this.map.getView().setCenter(fromLonLat([lon, lat]));
-                this.map.getView().setZoom(zoom);
-
-                // add a temporary marker for the query target
-                const feature = new Feature({
-                    geometry: new Point(fromLonLat([lon, lat])),
-                    originalCoord: fromLonLat([lon, lat]),
-                });
-                feature.setStyle(
-                    this.createMarkerStyle({
-                        iconColor: "#2563eb",
-                        bgColor: "#bfdbfe",
-                        label,
-                        isStale: false,
-                        iconPath: null,
-                    })
-                );
-                this.queryMarker = feature;
-                if (this.markerSource) {
-                    this.markerSource.addFeature(feature);
-                }
-            }
-        }
+        this.applyMapViewFromRoute();
 
         // Listen for moveend to update coordinates in UI and save state
         if (this.map) {
@@ -1257,6 +1525,10 @@ export default {
         if (this.reloadInterval) clearInterval(this.reloadInterval);
         if (this.exportInterval) clearInterval(this.exportInterval);
         if (this.searchTimeout) clearTimeout(this.searchTimeout);
+        if (this.tileConnectivityBannerTimer) {
+            clearTimeout(this.tileConnectivityBannerTimer);
+            this.tileConnectivityBannerTimer = null;
+        }
         document.removeEventListener("click", this.handleClickOutside);
         window.removeEventListener("resize", this.checkScreenSize);
         WebSocketConnection.off("message", this.onWebsocketMessage);
@@ -1264,6 +1536,15 @@ export default {
             cancelAnimationFrame(this._pointerMoveRaf);
             this._pointerMoveRaf = null;
         }
+        if (this.settingsPanelDrag?.rafId != null) {
+            cancelAnimationFrame(this.settingsPanelDrag.rafId);
+            this.settingsPanelDrag.rafId = null;
+        }
+        const settingsEl = this.$refs.settingsPanel;
+        if (settingsEl) {
+            settingsEl.style.transform = "";
+            settingsEl.style.willChange = "";
+        }
         if (this.map) {
             this.map.setTarget(null);
             this.map = null;
@@ -1410,7 +1691,18 @@ export default {
             this.drawSource = new VectorSource();
             this.drawLayer = new VectorLayer({
                 source: this.drawSource,
-                style: (feature) => {
+                style: (feature, resolution) => {
+                    const own = feature.getStyle();
+                    if (own != null) {
+                        if (typeof own === "function") {
+                            return own(feature, resolution);
+                        }
+                        return own;
+                    }
+                    const fromProps = styleFromMcxProperties(feature);
+                    if (fromProps) {
+                        return fromProps;
+                    }
                     const type = feature.get("type");
                     const geometry = feature.getGeometry();
                     const geomType = geometry ? geometry.getType() : null;
@@ -1458,6 +1750,14 @@ export default {
             });
             this.map.addOverlay(this.noteOverlay);
 
+            this.drawFeatureInfoOverlay = new Overlay({
+                element: this.$refs.drawFeatureInfoElement,
+                offset: [0, -10],
+                positioning: "bottom-center",
+                stopEvent: false,
+            });
+            this.map.addOverlay(this.drawFeatureInfoOverlay);
+
             this.modify = new Modify({ source: this.drawSource });
             this.modify.on("modifystart", (e) => {
                 const feats = (e.features && e.features.getArray()) || this.select.getFeatures().getArray();
@@ -1467,16 +1767,19 @@ export default {
                 const feats = (e.features && e.features.getArray()) || this.select.getFeatures().getArray();
                 feats.forEach((f) => this.finalizeMeasurementOverlay(f));
                 this.saveMapState();
+                this.syncDrawFeatureInfoOverlay();
             });
             this.map.addInteraction(this.modify);
 
             this.select = new Select({
                 layers: [this.drawLayer],
-                hitTolerance: 15, // High tolerance for touch/offgrid
+                hitTolerance: MAP_FEATURE_HIT_TOLERANCE,
                 style: null, // Keep original feature style
             });
             this.select.on("select", (e) => {
-                this.selectedFeature = e.selected[0] || null;
+                const picked = e.selected[0];
+                this.selectedFeature = picked ? markRaw(picked) : null;
+                this.syncDrawFeatureInfoOverlay();
             });
             this.map.addInteraction(this.select);
 
@@ -1488,6 +1791,7 @@ export default {
                 const feats = (e.features && e.features.getArray()) || this.select.getFeatures().getArray();
                 feats.forEach((f) => this.finalizeMeasurementOverlay(f));
                 this.saveMapState();
+                this.syncDrawFeatureInfoOverlay();
             });
             this.map.addInteraction(this.translate);
 
@@ -1590,9 +1894,16 @@ export default {
 
             this.map.on("pointermove", this.handleMapPointerMove);
             this.map.on("click", (evt) => {
+                if (this.isBearingMode) {
+                    this.handleBearingClick(evt);
+                    this.closeContextMenu();
+                    return;
+                }
                 this.handleMapClick(evt);
                 this.closeContextMenu();
-                const feature = this.map.forEachFeatureAtPixel(evt.pixel, (f) => f);
+                const feature = this.map.forEachFeatureAtPixel(evt.pixel, (f) => f, {
+                    hitTolerance: MAP_FEATURE_HIT_TOLERANCE,
+                });
                 if (feature && feature.get("cluster")) {
                     this.openCluster(feature);
                 } else if (feature && (feature.get("telemetry") || feature.get("discovered"))) {
@@ -1607,6 +1918,7 @@ export default {
                 if (!feature && this.select) {
                     this.select.getFeatures().clear();
                     this.selectedFeature = null;
+                    this.syncDrawFeatureInfoOverlay();
                 }
             });
 
@@ -1628,11 +1940,173 @@ export default {
             });
 
             this.map.addInteraction(this.dragBox);
+            await this.$nextTick();
+            if (this.$refs.scaleLineMount) {
+                this.map.addControl(
+                    new ScaleLine({
+                        target: this.$refs.scaleLineMount,
+                        units: "metric",
+                        bar: true,
+                        text: true,
+                    })
+                );
+            }
             this.isMapLoaded = true;
 
             // Close context menu when clicking elsewhere
             document.addEventListener("click", this.handleGlobalClick);
         },
+        applyExportRegionPreset(preset) {
+            if (!preset || !preset.bbox) {
+                return;
+            }
+            this.selectedBbox = preset.bbox.slice();
+            this.exportMinZoom = preset.minZoom;
+            this.exportMaxZoom = preset.maxZoom;
+        },
+        applyLayersFromRouteString(layersStr) {
+            if (!layersStr || typeof layersStr !== "string") {
+                return;
+            }
+            const parts = layersStr
+                .split(",")
+                .map((s) => s.trim().toLowerCase())
+                .filter(Boolean);
+            if (parts.includes("discovered")) {
+                this.mapDiscoveredNodes({ skipFit: true, silent: true });
+            }
+        },
+        applyMapViewFromRoute() {
+            if (!this.map || !this.markerSource) {
+                return;
+            }
+            const q = this.$route.query || {};
+            const latRaw = q.lat;
+            const lonRaw = q.lon;
+            if (latRaw == null || lonRaw == null || latRaw === "" || lonRaw === "") {
+                if (q.layers) {
+                    this.applyLayersFromRouteString(String(q.layers));
+                }
+                return;
+            }
+            const lat = parseFloat(latRaw);
+            const lon = parseFloat(lonRaw);
+            const zRaw = q.zoom != null && q.zoom !== "" ? q.zoom : q.z;
+            let zoom = parseFloat(zRaw != null && zRaw !== "" ? zRaw : "15");
+            if (!Number.isFinite(zoom)) {
+                zoom = 15;
+            }
+            zoom = Math.max(0, Math.min(22, zoom));
+            const label = (q.label != null && String(q.label)) || "Target";
+
+            if (!Number.isFinite(lat) || !Number.isFinite(lon)) {
+                return;
+            }
+
+            if (this.queryMarker) {
+                this.markerSource.removeFeature(this.queryMarker);
+                this.queryMarker = null;
+            }
+
+            this.map.getView().setCenter(fromLonLat([lon, lat]));
+            this.map.getView().setZoom(zoom);
+
+            const feature = new Feature({
+                geometry: new Point(fromLonLat([lon, lat])),
+                originalCoord: fromLonLat([lon, lat]),
+            });
+            feature.setStyle(
+                this.createMarkerStyle({
+                    iconColor: "#2563eb",
+                    bgColor: "#bfdbfe",
+                    label: String(label),
+                    isStale: false,
+                    iconPath: null,
+                })
+            );
+            this.queryMarker = feature;
+            this.markerSource.addFeature(feature);
+
+            if (q.layers) {
+                this.applyLayersFromRouteString(String(q.layers));
+            }
+        },
+        layersTagForShare() {
+            return this.discoveredVisible ? "discovered" : "";
+        },
+        async shareMapView() {
+            if (!this.map) {
+                return;
+            }
+            const view = this.map.getView();
+            const c = toLonLat(view.getCenter());
+            const z = view.getZoom();
+            const lat = c[1];
+            const lon = c[0];
+            const layers = this.layersTagForShare();
+            const mesh = buildMeshchatMapUri({ lat, lon, zoom: z, layers });
+            const web = buildWebHashMapUrl({ lat, lon, zoom: z, layers });
+            const text = `${this.$t("map.share_message_prefix")} ${mesh}\n${web}`;
+            try {
+                if (navigator?.clipboard?.writeText) {
+                    await navigator.clipboard.writeText(text);
+                    ToastUtils.success(this.$t("map.share_copied"));
+                } else {
+                    ToastUtils.info(text);
+                }
+            } catch (e) {
+                console.error(e);
+                ToastUtils.warning(web);
+            }
+        },
+        openPingModalFromMapCenter() {
+            if (!this.map) {
+                return;
+            }
+            const view = this.map.getView();
+            const c = toLonLat(view.getCenter());
+            this.mapPingLat = c[1];
+            this.mapPingLon = c[0];
+            this.mapPingZoom = view.getZoom();
+            this.pingDestinationHash = "";
+            this.showMapPingModal = true;
+        },
+        openPingModalAt(lat, lon, zoom) {
+            this.mapPingLat = lat;
+            this.mapPingLon = lon;
+            this.mapPingZoom = zoom;
+            this.pingDestinationHash = "";
+            this.showMapPingModal = true;
+        },
+        async sendMapPing() {
+            const hash = (this.pingDestinationHash || "").trim();
+            if (!hash || hash.length !== 32) {
+                ToastUtils.error(this.$t("map.ping_invalid_destination"));
+                return;
+            }
+            const layers = this.layersTagForShare();
+            const uri = buildMeshchatMapUri({
+                lat: this.mapPingLat,
+                lon: this.mapPingLon,
+                zoom: this.mapPingZoom,
+                layers,
+                label: "Ping",
+            });
+            const content = `${this.$t("map.ping_message_prefix")} ${uri}`;
+            try {
+                await window.api.post("/api/v1/lxmf-messages/send", {
+                    lxmf_message: {
+                        destination_hash: hash,
+                        content,
+                    },
+                });
+                ToastUtils.success(this.$t("map.ping_sent"));
+                this.showMapPingModal = false;
+            } catch (e) {
+                console.error(e);
+                ToastUtils.error(this.$t("map.ping_failed"));
+            }
+        },
         isLocalUrl(url) {
             if (!url) return false;
             try {
@@ -1678,7 +2152,7 @@ export default {
                     testUrl = testUrl.replace("{z}", "0").replace("{x}", "0").replace("{y}", "0");
                 }
                 const controller = new AbortController();
-                const timeoutId = setTimeout(() => controller.abort(), 3000);
+                const timeoutId = setTimeout(() => controller.abort(), 8000);
                 const response = await fetch(testUrl, {
                     method: "HEAD",
                     signal: controller.signal,
@@ -1695,6 +2169,17 @@ export default {
         isOpenFreeMapStyleUrl(url) {
             return typeof url === "string" && url.includes("tiles.openfreemap.org/styles/");
         },
+        usesOfflineMbtilesRaster() {
+            if (!this.offlineEnabled) return false;
+            const defaultTileUrl = OPENFREEMAP_DEFAULT_STYLE;
+            const customTileUrl = this.tileServerUrl || defaultTileUrl;
+            const isCustomLocal = this.isLocalUrl(customTileUrl);
+            if (isCustomLocal) return false;
+            const isDefaultOnline = this.isDefaultOnlineUrl(customTileUrl);
+            if (isDefaultOnline) return true;
+            if (customTileUrl !== defaultTileUrl && customTileUrl !== LEGACY_DEFAULT_OSM_RASTER) return false;
+            return true;
+        },
         async buildBaseMapLayer() {
             const url = (this.tileServerUrl || OPENFREEMAP_DEFAULT_STYLE).trim();
             if (!this.offlineEnabled && this.isOpenFreeMapStyleUrl(url)) {
@@ -1702,6 +2187,24 @@ export default {
                 await applyMapboxStyle(group, url);
                 return group;
             }
+            if (this.cachingEnabled && this.usesOfflineMbtilesRaster()) {
+                return new LayerGroup({
+                    layers: [
+                        new TileLayer({
+                            source: this.getOfflineRasterCacheOnlySource(),
+                            preload: 2,
+                            transition: 0,
+                            cacheSize: 896,
+                        }),
+                        new TileLayer({
+                            source: this.getOfflineMbtilesTopSource(),
+                            preload: 2,
+                            transition: 0,
+                            cacheSize: 896,
+                        }),
+                    ],
+                });
+            }
             return new TileLayer({
                 source: this.getTileSource(),
                 preload: 2,
@@ -1730,8 +2233,192 @@ export default {
                 setTimeout(() => URL.revokeObjectURL(url), 10000);
                 return;
             }
+            await this.applyRasterPlaceholderTile(tile, "dark");
+        },
+        async applyRasterPlaceholderTile(tile, variant) {
+            const isTransparent = variant === "transparent";
+            if (typeof createImageBitmap === "function") {
+                try {
+                    const c = document.createElement("canvas");
+                    const size = isTransparent ? 1 : 256;
+                    c.width = size;
+                    c.height = size;
+                    const ctx = c.getContext("2d");
+                    if (isTransparent) {
+                        ctx.clearRect(0, 0, 1, 1);
+                    } else {
+                        ctx.fillStyle = "#18181b";
+                        ctx.fillRect(0, 0, size, size);
+                    }
+                    const bitmap = await createImageBitmap(c);
+                    tile.setImage(bitmap);
+                    tile.setState(TileState.LOADED);
+                    return;
+                } catch {
+                    /* fall through */
+                }
+            }
+            const el = tile.getImage();
+            if (el && "src" in el) {
+                el.removeAttribute("crossorigin");
+                if (isTransparent) {
+                    el.src = OFFLINE_TRANSPARENT_TILE_PNG;
+                } else {
+                    const c = document.createElement("canvas");
+                    c.width = 1;
+                    c.height = 1;
+                    const ctx = c.getContext("2d");
+                    ctx.fillStyle = "#18181b";
+                    ctx.fillRect(0, 0, 1, 1);
+                    el.src = c.toDataURL("image/png");
+                }
+                tile.setState(TileState.LOADED);
+                return;
+            }
             tile.setState(TileState.ERROR);
         },
+        parseZxyFromTileUrl(url) {
+            if (typeof url !== "string") return null;
+            const m = url.match(/\/(\d+)\/(\d+)\/(\d+)\.(?:png|jpg|jpeg|webp)(\?|$)/i);
+            if (!m) return null;
+            return [parseInt(m[1], 10), parseInt(m[2], 10), parseInt(m[3], 10)];
+        },
+        expandRasterTileUrlTemplates(template, z, x, y) {
+            const out = [];
+            if (typeof template !== "string") return out;
+            if (!template.includes("{z}") || !template.includes("{x}") || !template.includes("{y}")) return out;
+            const zs = String(z);
+            const xs = String(x);
+            const ys = String(y);
+            if (template.includes("{r}")) {
+                const a = template
+                    .replaceAll("{z}", zs)
+                    .replaceAll("{x}", xs)
+                    .replaceAll("{y}", ys)
+                    .replaceAll("{r}", "");
+                out.push(a);
+                const b = template
+                    .replaceAll("{z}", zs)
+                    .replaceAll("{x}", xs)
+                    .replaceAll("{y}", ys)
+                    .replaceAll("{r}", "@2x");
+                if (!out.includes(b)) out.push(b);
+            } else {
+                out.push(template.replaceAll("{z}", zs).replaceAll("{x}", xs).replaceAll("{y}", ys));
+            }
+            return out;
+        },
+        offlineTileCacheLookupUrls(tileCoord, primarySrc) {
+            let z;
+            let x;
+            let y;
+            if (Array.isArray(tileCoord) && tileCoord.length >= 3) {
+                z = tileCoord[0];
+                x = tileCoord[1];
+                y = tileCoord[2];
+            } else {
+                const parsed = this.parseZxyFromTileUrl(primarySrc);
+                if (!parsed) return primarySrc ? [primarySrc] : [];
+                [z, x, y] = parsed;
+            }
+            const ordered = [];
+            const push = (u) => {
+                if (typeof u === "string" && u.length > 0 && !ordered.includes(u)) ordered.push(u);
+            };
+            push(primarySrc);
+            const ts = this.tileServerUrl || OPENFREEMAP_DEFAULT_STYLE;
+            if (!this.isOpenFreeMapStyleUrl(ts)) {
+                for (const u of this.expandRasterTileUrlTemplates(ts, z, x, y)) push(u);
+            }
+            for (const u of this.expandRasterTileUrlTemplates(LEGACY_DEFAULT_OSM_RASTER, z, x, y)) push(u);
+            return ordered;
+        },
+        offlineCachedRasterOnlyLookupUrls(tileCoord, primarySrc) {
+            let z;
+            let x;
+            let y;
+            if (Array.isArray(tileCoord) && tileCoord.length >= 3) {
+                z = tileCoord[0];
+                x = tileCoord[1];
+                y = tileCoord[2];
+            } else {
+                const parsed = this.parseZxyFromTileUrl(primarySrc);
+                if (!parsed) return [];
+                [z, x, y] = parsed;
+            }
+            const ordered = [];
+            const push = (u) => {
+                if (typeof u === "string" && u.length > 0 && !ordered.includes(u)) ordered.push(u);
+            };
+            const ts = this.tileServerUrl || OPENFREEMAP_DEFAULT_STYLE;
+            if (!this.isOpenFreeMapStyleUrl(ts)) {
+                for (const u of this.expandRasterTileUrlTemplates(ts, z, x, y)) push(u);
+            }
+            for (const u of this.expandRasterTileUrlTemplates(LEGACY_DEFAULT_OSM_RASTER, z, x, y)) push(u);
+            return ordered;
+        },
+        async tryApplyCachedRasterTilesOnly(tile, src) {
+            if (!this.cachingEnabled) return false;
+            const coord = typeof tile.getTileCoord === "function" ? tile.getTileCoord() : null;
+            const urls = this.offlineCachedRasterOnlyLookupUrls(coord, src);
+            for (const key of urls) {
+                try {
+                    const cached = await TileCache.getTile(key);
+                    if (cached) {
+                        await this.fastApplyBlobToTile(tile, cached);
+                        return true;
+                    }
+                } catch {
+                    /* ignore */
+                }
+            }
+            return false;
+        },
+        getOfflineRasterCacheOnlySource() {
+            const source = new XYZ({
+                url: OFFLINE_MB_TILES_URL,
+                crossOrigin: "anonymous",
+                transition: 0,
+            });
+            source.setTileLoadFunction(async (tile, src) => {
+                if (await this.tryApplyCachedRasterTilesOnly(tile, src)) return;
+                await this.applyRasterPlaceholderTile(tile, "dark");
+            });
+            return source;
+        },
+        getOfflineMbtilesTopSource() {
+            const source = new XYZ({
+                url: OFFLINE_MB_TILES_URL,
+                crossOrigin: "anonymous",
+                transition: 0,
+            });
+            source.setTileLoadFunction(async (tile, src) => {
+                const result = await fetchTileBlobWithRetry(src, { credentials: "omit" }, {});
+                if (result.ok) {
+                    await this.fastApplyBlobToTile(tile, result.blob);
+                    return;
+                }
+                await this.applyRasterPlaceholderTile(tile, "transparent");
+            });
+            return source;
+        },
+        async tryApplyCachedTileForOfflineView(tile, src) {
+            if (!this.cachingEnabled) return false;
+            const coord = typeof tile.getTileCoord === "function" ? tile.getTileCoord() : null;
+            const urls = this.offlineTileCacheLookupUrls(coord, src);
+            for (const key of urls) {
+                try {
+                    const cached = await TileCache.getTile(key);
+                    if (cached) {
+                        await this.fastApplyBlobToTile(tile, cached);
+                        return true;
+                    }
+                } catch {
+                    /* ignore */
+                }
+            }
+            return false;
+        },
         getTileSource() {
             const isOffline = this.offlineEnabled;
             const defaultTileUrl = OPENFREEMAP_DEFAULT_STYLE;
@@ -1743,7 +2430,7 @@ export default {
             if (isOffline) {
                 // If it's a known online URL, force offline tiles from MBTiles
                 if (isDefaultOnline) {
-                    tileUrl = "/api/v1/map/tiles/{z}/{x}/{y}.png";
+                    tileUrl = OFFLINE_MB_TILES_URL;
                 } else if (isCustomLocal) {
                     // It's a local/mesh URL, allow it
                     tileUrl = customTileUrl;
@@ -1752,8 +2439,7 @@ export default {
                     // assume it might be a local mesh server with a domain.
                     tileUrl = customTileUrl;
                 } else {
-                    // Fallback to offline MBTiles
-                    tileUrl = "/api/v1/map/tiles/{z}/{x}/{y}.png";
+                    tileUrl = OFFLINE_MB_TILES_URL;
                 }
             } else {
                 tileUrl = customTileUrl;
@@ -1765,75 +2451,102 @@ export default {
                 transition: 0,
             });
 
-            // Track tile load errors to notify user if they appear to be offline
-            if (source && typeof source.on === "function") {
-                source.on("tileloaderror", () => {
-                    if (!isOffline) {
-                        this.tileErrorCount++;
-                        if (this.tileErrorCount > 5) {
-                            this.showOfflineHint = true;
-                            // Reset count after showing hint to avoid multiple triggers
-                            this.tileErrorCount = 0;
-                            // Auto-hide hint after 30 seconds
-                            setTimeout(() => {
-                                this.showOfflineHint = false;
-                            }, 30000);
-                        }
-                    }
+            if (!isOffline && source && typeof source.on === "function") {
+                source.on("tileloadend", () => {
+                    this.onOnlineRasterTileLoadedOk();
                 });
             }
 
-            const originalTileLoadFunction = source.getTileLoadFunction();
-
             if (isOffline) {
                 source.setTileLoadFunction(async (tile, src) => {
-                    try {
-                        const response = await fetch(src);
-                        if (!response.ok) {
-                            if (response.status === 404) {
-                                tile.setState(TileState.ERROR);
-                                return;
-                            }
-                            throw new Error(`HTTP ${response.status}`);
-                        }
-                        const blob = await response.blob();
-                        await this.fastApplyBlobToTile(tile, blob);
-                    } catch {
-                        tile.setState(TileState.ERROR);
+                    const result = await fetchTileBlobWithRetry(src, { credentials: "omit" }, {});
+                    if (result.ok) {
+                        await this.fastApplyBlobToTile(tile, result.blob);
+                        return;
                     }
+                    if (await this.tryApplyCachedTileForOfflineView(tile, src)) return;
+                    await this.applyRasterPlaceholderTile(tile, "dark");
                 });
             } else {
                 source.setTileLoadFunction(async (tile, src) => {
-                    if (!this.cachingEnabled) {
-                        originalTileLoadFunction(tile, src);
+                    if (this.cachingEnabled) {
+                        try {
+                            const cached = await TileCache.getTile(src);
+                            if (cached) {
+                                await this.fastApplyBlobToTile(tile, cached);
+                                return;
+                            }
+                        } catch {
+                            /* ignore */
+                        }
+                    }
+
+                    const result = await fetchTileBlobWithRetry(src, { credentials: "omit" }, {});
+                    if (result.ok) {
+                        await this.fastApplyBlobToTile(tile, result.blob);
+                        if (this.cachingEnabled) {
+                            queueMicrotask(() => {
+                                TileCache.setTile(src, result.blob).catch(() => {});
+                            });
+                        }
                         return;
                     }
-
-                    try {
-                        const cached = await TileCache.getTile(src);
-                        if (cached) {
-                            await this.fastApplyBlobToTile(tile, cached);
-                            return;
-                        }
-
-                        const response = await fetch(src);
-                        if (!response.ok) {
-                            throw new Error(`HTTP ${response.status}`);
-                        }
-                        const blob = await response.blob();
-                        await this.fastApplyBlobToTile(tile, blob);
-
-                        queueMicrotask(() => {
-                            TileCache.setTile(src, blob).catch(() => {});
-                        });
-                    } catch {
-                        originalTileLoadFunction(tile, src);
-                    }
+                    await this.applyRasterPlaceholderTile(tile, "dark");
+                    this.onOnlineRasterTileLoadFailure();
                 });
             }
 
             return source;
         },
+        onOnlineRasterTileLoadedOk() {
+            this.tileErrorCount = Math.max(0, this.tileErrorCount - 4);
+        },
+        onOnlineRasterTileLoadFailure() {
+            this.tileErrorCount++;
+            if (this.tileErrorCount > 10) {
+                this.showTileConnectivityBanner = true;
+                this.tileErrorCount = 0;
+                if (this.tileConnectivityBannerTimer) {
+                    clearTimeout(this.tileConnectivityBannerTimer);
+                }
+                this.tileConnectivityBannerTimer = setTimeout(() => {
+                    this.showTileConnectivityBanner = false;
+                    this.tileConnectivityBannerTimer = null;
+                }, 45000);
+            }
+        },
+        dismissTileConnectivityBanner() {
+            this.showTileConnectivityBanner = false;
+            if (this.tileConnectivityBannerTimer) {
+                clearTimeout(this.tileConnectivityBannerTimer);
+                this.tileConnectivityBannerTimer = null;
+            }
+        },
+        refreshBaseMapTileSources() {
+            if (!this.map) return;
+            const base = this.map.getLayers().item(0);
+            if (!base) return;
+            const walk = (layer) => {
+                const s = layer.getSource && layer.getSource();
+                if (s && typeof s.refresh === "function") {
+                    s.refresh();
+                }
+                const inner = layer.getLayers && layer.getLayers();
+                if (inner && typeof inner.forEach === "function") {
+                    inner.forEach(walk);
+                }
+            };
+            walk(base);
+        },
+        retryMapTiles() {
+            this.tileErrorCount = 0;
+            this.dismissTileConnectivityBanner();
+            this.refreshBaseMapTileSources();
+        },
+        async switchToOfflineFromTileBanner() {
+            this.dismissTileConnectivityBanner();
+            await this.toggleOffline(true);
+        },
         async checkOfflineMap() {
             try {
                 const response = await window.api.get("/api/v1/map/offline");
@@ -1888,7 +2601,7 @@ export default {
             }
 
             this.tileErrorCount = 0;
-            this.showOfflineHint = false;
+            this.dismissTileConnectivityBanner();
 
             if (enabled) {
                 const defaultTileUrl = OPENFREEMAP_DEFAULT_STYLE;
@@ -1942,7 +2655,7 @@ export default {
         async toggleCaching(enabled) {
             this.cachingEnabled = enabled;
             this.tileErrorCount = 0;
-            this.showOfflineHint = false;
+            this.dismissTileConnectivityBanner();
             try {
                 await window.api.patch("/api/v1/config", {
                     map_tile_cache_enabled: enabled,
@@ -1953,6 +2666,9 @@ export default {
         },
         toggleExportMode() {
             this.isExportMode = !this.isExportMode;
+            if (this.isExportMode) {
+                this.stopBearingMode();
+            }
             if (!this.isExportMode) {
                 this.selectedBbox = null;
             }
@@ -1976,7 +2692,7 @@ export default {
             }
         },
         async startExport() {
-            if (!this.selectedBbox) return;
+            if (!this.selectedBbox || this.exportTileLimitExceeded) return;
             this.isExporting = true;
             try {
                 const response = await window.api.post("/api/v1/map/export", {
@@ -1989,8 +2705,9 @@ export default {
                 this.isExportMode = false;
                 this.selectedBbox = null;
                 this.pollExportStatus();
-            } catch {
-                ToastUtils.error(this.$t("map.failed_start_export"));
+            } catch (e) {
+                const msg = e.response?.data?.error || this.$t("map.failed_start_export");
+                ToastUtils.error(msg);
                 this.isExporting = false;
             }
         },
@@ -2086,6 +2803,7 @@ export default {
         async clearCache() {
             try {
                 await TileCache.clear();
+                this.dismissTileConnectivityBanner();
                 ToastUtils.success(this.$t("map.cache_cleared"));
             } catch {
                 ToastUtils.error(this.$t("map.failed_clear_cache"));
@@ -2096,6 +2814,7 @@ export default {
                 await window.api.patch("/api/v1/config", {
                     map_tile_server_url: this.tileServerUrl,
                 });
+                this.dismissTileConnectivityBanner();
                 await this.updateMapSource();
                 ToastUtils.success(this.$t("map.tile_server_saved"));
                 await this.saveMapState();
@@ -2105,7 +2824,7 @@ export default {
         },
         setTileServer(type) {
             this.tileErrorCount = 0;
-            this.showOfflineHint = false;
+            this.dismissTileConnectivityBanner();
             if (type === "openfreemap") {
                 this.tileServerUrl = OPENFREEMAP_DEFAULT_STYLE;
             } else if (type === "osm") {
@@ -2252,22 +2971,33 @@ export default {
             this.searchResults = [];
 
             try {
-                const apiUrl = this.nominatimApiUrl.endsWith("/")
-                    ? this.nominatimApiUrl.slice(0, -1)
-                    : this.nominatimApiUrl;
-                const url = `${apiUrl}/search?format=json&q=${encodeURIComponent(this.searchQuery)}&limit=10&addressdetails=1`;
-
-                const response = await fetch(url, {
-                    headers: {
-                        "User-Agent": "ReticulumMeshChatX/1.0",
+                const url = buildNominatimSearchUrl(this.nominatimApiUrl, this.searchQuery);
+                const result = await fetchJsonWithRetry(
+                    url,
+                    {
+                        headers: {
+                            "User-Agent": "ReticulumMeshChatX/1.0",
+                        },
                     },
-                });
+                    {
+                        timeoutMs: NOMINATIM_FETCH_TIMEOUT_MS,
+                        retries: NOMINATIM_FETCH_RETRIES,
+                        retryBaseDelayMs: NOMINATIM_FETCH_RETRY_BASE_DELAY_MS,
+                    }
+                );
 
-                if (!response.ok) {
-                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                if (!result.ok) {
+                    if (result.status) {
+                        this.searchError = `${this.$t("map.search_error")} (HTTP ${result.status})`;
+                    } else if (result.error && result.error.name === "AbortError") {
+                        this.searchError = this.$t("map.search_timeout_error");
+                    } else {
+                        this.searchError = this.$t("map.search_connection_error");
+                    }
+                    return;
                 }
 
-                const data = await response.json();
+                const data = await result.response.json();
 
                 if (Array.isArray(data) && data.length > 0) {
                     this.searchResults = data.map((item) => ({
@@ -2282,12 +3012,7 @@ export default {
                 }
             } catch (e) {
                 console.error("Search error:", e);
-                if (e.message.includes("Failed to fetch") || e.message.includes("NetworkError")) {
-                    this.searchError = this.$t("map.search_connection_error");
-                    this.showOfflineHint = true;
-                } else {
-                    this.searchError = this.$t("map.search_error") + ": " + e.message;
-                }
+                this.searchError = this.$t("map.search_error") + ": " + (e.message || String(e));
             } finally {
                 this.isSearching = false;
             }
@@ -2335,6 +3060,142 @@ export default {
             if (!this.isMobileScreen) {
                 this.isMobileSearchOpen = false;
             }
+            this.clampSettingsPanelIntoView();
+        },
+        clampSettingsPanelIntoView() {
+            if (!this.isSettingsOpen || !this.settingsPanelPos) {
+                return;
+            }
+            const root = this.$refs.mapViewOverlayRoot;
+            const panel = this.$refs.settingsPanel;
+            if (!root || !panel) {
+                return;
+            }
+            const margin = 6;
+            const w = panel.offsetWidth;
+            const h = panel.offsetHeight;
+            const maxLeft = Math.max(margin, root.clientWidth - w - margin);
+            const maxTop = Math.max(margin, root.clientHeight - h - margin);
+            const left = Math.min(Math.max(this.settingsPanelPos.left, margin), maxLeft);
+            const top = Math.min(Math.max(this.settingsPanelPos.top, margin), maxTop);
+            if (left !== this.settingsPanelPos.left || top !== this.settingsPanelPos.top) {
+                this.settingsPanelPos = { left, top };
+            }
+        },
+        onSettingsPanelPointerDown(e) {
+            if (e.pointerType === "mouse" && e.button !== 0) {
+                return;
+            }
+            if (e.target.closest("button")) {
+                return;
+            }
+            const root = this.$refs.mapViewOverlayRoot;
+            const panel = this.$refs.settingsPanel;
+            const header = this.$refs.settingsPanelHeader;
+            if (!root || !panel || !header) {
+                return;
+            }
+            const rootRect = root.getBoundingClientRect();
+            const panelRect = panel.getBoundingClientRect();
+            if (!this.settingsPanelPos) {
+                this.settingsPanelPos = {
+                    left: panelRect.left - rootRect.left,
+                    top: panelRect.top - rootRect.top,
+                };
+            }
+            header.setPointerCapture(e.pointerId);
+            const anchorLeft = this.settingsPanelPos.left;
+            const anchorTop = this.settingsPanelPos.top;
+            this.settingsPanelDrag = {
+                pointerId: e.pointerId,
+                startClientX: e.clientX,
+                startClientY: e.clientY,
+                lastClientX: e.clientX,
+                lastClientY: e.clientY,
+                anchorLeft,
+                anchorTop,
+                rafId: null,
+            };
+            panel.style.willChange = "transform";
+        },
+        settingsPanelDragClamped() {
+            const d = this.settingsPanelDrag;
+            if (!d) {
+                return null;
+            }
+            const root = this.$refs.mapViewOverlayRoot;
+            const panel = this.$refs.settingsPanel;
+            if (!root || !panel) {
+                return null;
+            }
+            const margin = 6;
+            const dx = d.lastClientX - d.startClientX;
+            const dy = d.lastClientY - d.startClientY;
+            let left = d.anchorLeft + dx;
+            let top = d.anchorTop + dy;
+            const maxLeft = Math.max(margin, root.clientWidth - panel.offsetWidth - margin);
+            const maxTop = Math.max(margin, root.clientHeight - panel.offsetHeight - margin);
+            left = Math.min(Math.max(left, margin), maxLeft);
+            top = Math.min(Math.max(top, margin), maxTop);
+            return {
+                left,
+                top,
+                tx: left - d.anchorLeft,
+                ty: top - d.anchorTop,
+            };
+        },
+        scheduleSettingsPanelDragRaf() {
+            const d = this.settingsPanelDrag;
+            if (!d || d.rafId != null) {
+                return;
+            }
+            d.rafId = requestAnimationFrame(() => {
+                d.rafId = null;
+                const panel = this.$refs.settingsPanel;
+                const fin = this.settingsPanelDragClamped();
+                if (!panel || !fin) {
+                    return;
+                }
+                panel.style.transform = `translate3d(${fin.tx}px,${fin.ty}px,0)`;
+            });
+        },
+        onSettingsPanelPointerMove(e) {
+            if (!this.settingsPanelDrag || this.settingsPanelDrag.pointerId !== e.pointerId) {
+                return;
+            }
+            this.settingsPanelDrag.lastClientX = e.clientX;
+            this.settingsPanelDrag.lastClientY = e.clientY;
+            this.scheduleSettingsPanelDragRaf();
+        },
+        onSettingsPanelPointerUp(e) {
+            if (!this.settingsPanelDrag || this.settingsPanelDrag.pointerId !== e.pointerId) {
+                return;
+            }
+            const d = this.settingsPanelDrag;
+            if (d.rafId != null) {
+                cancelAnimationFrame(d.rafId);
+                d.rafId = null;
+            }
+            d.lastClientX = e.clientX;
+            d.lastClientY = e.clientY;
+            const panel = this.$refs.settingsPanel;
+            const fin = this.settingsPanelDragClamped();
+            if (panel) {
+                panel.style.transform = "";
+                panel.style.willChange = "";
+            }
+            if (fin) {
+                this.settingsPanelPos = { left: fin.left, top: fin.top };
+            }
+            const header = this.$refs.settingsPanelHeader;
+            if (header) {
+                try {
+                    header.releasePointerCapture(e.pointerId);
+                } catch {
+                    /* already released */
+                }
+            }
+            this.settingsPanelDrag = null;
         },
         toggleMobileSearch() {
             this.isMobileSearchOpen = !this.isMobileSearchOpen;
@@ -2378,10 +3239,36 @@ export default {
                 this.drawSource.removeFeature(this.selectedFeature);
                 if (this.select) this.select.getFeatures().clear();
                 this.selectedFeature = null;
+                this.syncDrawFeatureInfoOverlay();
                 this.saveMapState();
             }
         },
 
+        syncDrawFeatureInfoOverlay() {
+            if (!this.drawFeatureInfoOverlay || !this.map || !this.drawSource) {
+                return;
+            }
+            const f = this.selectedFeature;
+            if (!f || !this.drawSource.hasFeature(f)) {
+                this.drawFeatureInfoOverlay.setPosition(undefined);
+                this.drawFeatureInfoPayload = null;
+                return;
+            }
+            const payload = getDrawFeatureMetadataPayload(f);
+            if (!payload) {
+                this.drawFeatureInfoOverlay.setPosition(undefined);
+                this.drawFeatureInfoPayload = null;
+                return;
+            }
+            this.drawFeatureInfoPayload = payload;
+            const coord = getFeatureAnchorCoordinate(f);
+            if (!coord) {
+                this.drawFeatureInfoOverlay.setPosition(undefined);
+                return;
+            }
+            this.drawFeatureInfoOverlay.setPosition(coord);
+        },
+
         // Drawing methods
         toggleDraw(type) {
             if (!this.map) return;
@@ -2392,6 +3279,7 @@ export default {
 
             this.stopDrawing();
             this.isMeasuring = false;
+            this.stopBearingMode();
             this.drawType = type;
 
             if (type === "Select") {
@@ -2583,6 +3471,48 @@ export default {
         finalizeMeasurementOverlay(feature) {
             if (!this.map) return;
             this.clearMeasurementOverlay(feature);
+            if (feature.get("bearingPreview")) {
+                return;
+            }
+            if (feature.get("segmentKind") === "bearing") {
+                let metrics = feature.get("bearingMetrics");
+                if (!metrics) {
+                    const g = feature.getGeometry();
+                    if (g && g.getType() === "LineString") {
+                        const c = g.getCoordinates();
+                        if (c.length === 2) {
+                            const p0 = toLonLat(c[0]);
+                            const p1 = toLonLat(c[1]);
+                            metrics = computeSegmentMetrics(p0[0], p0[1], p1[0], p1[1]);
+                            feature.set("bearingMetrics", metrics);
+                        }
+                    }
+                }
+                if (!metrics) {
+                    return;
+                }
+                const g = feature.getGeometry();
+                const coord =
+                    g && g.getType() === "LineString"
+                        ? /** @type {import("ol/geom/LineString").default} */ (g).getCoordinateAt(0.5)
+                        : null;
+                if (!coord) {
+                    return;
+                }
+                const el = document.createElement("div");
+                el.className = "ol-tooltip ol-tooltip-static";
+                el.innerHTML = buildBearingOverlayHtml(metrics, (k) => this.$t(k));
+                const overlay = new Overlay({
+                    element: el,
+                    offset: [0, -7],
+                    positioning: "bottom-center",
+                });
+                overlay.set("isMeasureTooltip", true);
+                this.map.addOverlay(overlay);
+                overlay.setPosition(coord);
+                feature.set("_measureOverlay", overlay);
+                return;
+            }
             const geom = feature.getGeometry();
             const measurement = this.getMeasurementForGeometry(geom);
             if (!measurement) return;
@@ -2611,34 +3541,45 @@ export default {
             }
             // Rebuild for all features
             this.drawSource.getFeatures().forEach((f) => {
+                if (f.get("bearingPreview")) {
+                    return;
+                }
                 f.unset("_measureOverlay", true);
                 this.finalizeMeasurementOverlay(f);
             });
         },
         serializeFeatures(features) {
-            return features.map((f) => {
-                const clone = f.clone();
-                clone.unset("_measureOverlay", true); // avoid circular refs
-                const geom = clone.getGeometry();
-                if (geom instanceof Circle) {
-                    clone.setGeometry(fromCircle(geom, 128));
-                }
-                return clone;
-            });
+            return features
+                .filter((f) => !f.get("bearingPreview"))
+                .map((f) => {
+                    const clone = f.clone();
+                    clone.unset("_measureOverlay", true); // avoid circular refs
+                    const geom = clone.getGeometry();
+                    if (geom instanceof Circle) {
+                        clone.setGeometry(fromCircle(geom, 128));
+                    }
+                    const st = f.getStyle();
+                    if (st != null && typeof st !== "function") {
+                        clone.setStyle(st);
+                    }
+                    return clone;
+                });
         },
         // Context menu handlers
         onContextMenu(evt) {
             if (!this.map) return;
             evt.preventDefault();
             const pixel = this.map.getEventPixel(evt);
-            const feature = this.map.forEachFeatureAtPixel(pixel, (f) => f);
+            const feature = this.map.forEachFeatureAtPixel(pixel, (f) => f, {
+                hitTolerance: MAP_FEATURE_HIT_TOLERANCE,
+            });
             this.contextMenuFeature = feature || null;
             this.contextMenuCoord = toLonLat(this.map.getCoordinateFromPixel(pixel));
             this.contextMenuPos = { x: evt.clientX, y: evt.clientY };
             if (feature && this.select) {
                 this.select.getFeatures().clear();
                 this.select.getFeatures().push(feature);
-                this.selectedFeature = feature;
+                this.selectedFeature = markRaw(feature);
             }
             this.showContextMenu = true;
         },
@@ -2655,7 +3596,7 @@ export default {
             this.modify?.setActive(true);
             this.select.getFeatures().clear();
             this.select.getFeatures().push(this.contextMenuFeature);
-            this.selectedFeature = this.contextMenuFeature;
+            this.selectedFeature = markRaw(this.contextMenuFeature);
             this.drawType = "Select";
             this.closeContextMenu();
         },
@@ -2692,6 +3633,16 @@ export default {
             }
             this.closeContextMenu();
         },
+        contextPingHere() {
+            if (!this.contextMenuCoord || !this.map) {
+                this.closeContextMenu();
+                return;
+            }
+            const [lon, lat] = this.contextMenuCoord;
+            const z = this.map.getView().getZoom();
+            this.openPingModalAt(lat, lon, z);
+            this.closeContextMenu();
+        },
         contextClearMap() {
             this.clearDrawings();
             this.closeContextMenu();
@@ -2707,6 +3658,9 @@ export default {
             if (!this.map) return;
             const lonLat = toLonLat(evt.coordinate);
             this.cursorCoords = [lonLat[0], lonLat[1]];
+            if (this.isBearingMode && !evt.dragging) {
+                this.updateBearingPointerUi(evt);
+            }
             if (evt.dragging || this.isDrawing || this.isMeasuring) return;
 
             const pixel = this.map.getEventPixel(evt.originalEvent);
@@ -2721,7 +3675,9 @@ export default {
                 this._pendingPointerPixel = null;
                 if (!this.map || !p) return;
 
-                const feature = this.map.forEachFeatureAtPixel(p, (f) => f);
+                const feature = this.map.forEachFeatureAtPixel(p, (f) => f, {
+                    hitTolerance: MAP_FEATURE_HIT_TOLERANCE,
+                });
 
                 if (feature) {
                     const hasNote = feature.get("note") || (feature.get("telemetry") && feature.get("telemetry").note);
@@ -2753,11 +3709,12 @@ export default {
         },
 
         handleMapClick(evt) {
-            if (this.isDrawing || this.isMeasuring) return;
+            if (this.isDrawing || this.isMeasuring || this.isBearingMode) return;
 
             const pixel = this.map.getEventPixel(evt.originalEvent);
             const feature = this.map.forEachFeatureAtPixel(pixel, (f) => f, {
                 layerFilter: (l) => l === this.drawLayer,
+                hitTolerance: MAP_FEATURE_HIT_TOLERANCE,
             });
 
             if (feature && feature.get("type") === "note") {
@@ -2768,6 +3725,7 @@ export default {
         },
 
         stopDrawing() {
+            this.stopBearingMode();
             if (this.draw) {
                 this.map.removeInteraction(this.draw);
                 this.draw = null;
@@ -2783,6 +3741,11 @@ export default {
         clearDrawings() {
             if (confirm("Clear all drawings from the map?")) {
                 this.drawSource.clear();
+                if (this.select) {
+                    this.select.getFeatures().clear();
+                }
+                this.selectedFeature = null;
+                this.syncDrawFeatureInfoOverlay();
                 // clear tooltips if any
                 const overlays = this.map.getOverlays().getArray();
                 for (let i = overlays.length - 1; i >= 0; i--) {
@@ -2895,6 +3858,244 @@ export default {
             this.helpTooltipElement.classList.remove("hidden");
         },
 
+        stopBearingMode() {
+            if (!this.isBearingMode) {
+                return;
+            }
+            this.removeBearingPreview();
+            this.cleanupBearingTooltips();
+            this.isBearingMode = false;
+            this.bearingFromGps = false;
+            this.bearingGpsMapCoord = null;
+            this.bearingFirstMapCoord = null;
+            if (this.drawType === "Bearing") {
+                this.drawType = null;
+            }
+            if (this.select) {
+                this.select.setActive(true);
+            }
+            if (this.translate) {
+                this.translate.setActive(true);
+            }
+            if (this.modify) {
+                this.modify.setActive(true);
+            }
+        },
+
+        cleanupBearingTooltips() {
+            this.cleanupMeasureTooltip();
+            if (this.helpTooltip && this.map) {
+                this.map.removeOverlay(this.helpTooltip);
+                this.helpTooltip = null;
+            }
+            this.helpTooltipElement = null;
+        },
+
+        setupBearingTooltips() {
+            if (!this.map) {
+                return;
+            }
+            this.cleanupBearingTooltips();
+            this.createHelpTooltip();
+            this.createMeasureTooltip();
+            if (this.helpTooltipElement) {
+                this.helpTooltipElement.classList.remove("hidden");
+            }
+        },
+
+        toggleBearingMode() {
+            if (!this.map) {
+                return;
+            }
+            if (this.isBearingMode) {
+                this.stopBearingMode();
+                return;
+            }
+            this.stopDrawing();
+            this.isMeasuring = false;
+            this.bearingFromGps = false;
+            this.bearingGpsMapCoord = null;
+            this.bearingFirstMapCoord = null;
+            this.isBearingMode = true;
+            this.drawType = "Bearing";
+            if (this.select) {
+                this.select.setActive(false);
+            }
+            if (this.translate) {
+                this.translate.setActive(false);
+            }
+            if (this.modify) {
+                this.modify.setActive(false);
+            }
+            this.setupBearingTooltips();
+        },
+
+        async resolveMyLocationWgs84() {
+            if (this.config?.location_source === "manual") {
+                const lat = parseFloat(this.config.location_manual_lat);
+                const lon = parseFloat(this.config.location_manual_lon);
+                if (!Number.isNaN(lat) && !Number.isNaN(lon)) {
+                    return { lon, lat };
+                }
+            }
+            if (this.config && this.config.identity_hash) {
+                const myTelemetry = this.telemetryList.find((t) => t.destination_hash === this.config.identity_hash);
+                if (myTelemetry && myTelemetry.telemetry?.location) {
+                    const loc = myTelemetry.telemetry.location;
+                    if (loc.longitude != null && loc.latitude != null) {
+                        return { lon: loc.longitude, lat: loc.latitude };
+                    }
+                }
+            }
+            if (!navigator.geolocation) {
+                return null;
+            }
+            return new Promise((resolve) => {
+                navigator.geolocation.getCurrentPosition(
+                    (pos) => {
+                        resolve({ lon: pos.coords.longitude, lat: pos.coords.latitude });
+                    },
+                    () => resolve(null),
+                    { enableHighAccuracy: true, timeout: 12000, maximumAge: 60000 }
+                );
+            });
+        },
+
+        async startBearingFromMyLocation() {
+            if (!this.map) {
+                return;
+            }
+            const loc = await this.resolveMyLocationWgs84();
+            if (!loc) {
+                ToastUtils.warning(this.$t("map.location_not_determined"));
+                return;
+            }
+            this.stopDrawing();
+            this.bearingFirstMapCoord = null;
+            this.removeBearingPreview();
+            this.isBearingMode = true;
+            this.bearingFromGps = true;
+            this.bearingGpsMapCoord = fromLonLat([loc.lon, loc.lat]);
+            this.drawType = "Bearing";
+            if (this.select) {
+                this.select.setActive(false);
+            }
+            if (this.translate) {
+                this.translate.setActive(false);
+            }
+            if (this.modify) {
+                this.modify.setActive(false);
+            }
+            this.setupBearingTooltips();
+        },
+
+        handleBearingClick(evt) {
+            const coord = evt.coordinate;
+            if (this.bearingFromGps && this.bearingGpsMapCoord) {
+                this.finishBearingSegment(this.bearingGpsMapCoord, coord);
+                return;
+            }
+            if (!this.bearingFirstMapCoord) {
+                this.bearingFirstMapCoord = coord;
+                return;
+            }
+            this.finishBearingSegment(this.bearingFirstMapCoord, coord);
+        },
+
+        finishBearingSegment(startMapCoord, endMapCoord) {
+            if (!this.map || !this.drawSource) {
+                return;
+            }
+            const ll0 = toLonLat(startMapCoord);
+            const ll1 = toLonLat(endMapCoord);
+            const metrics = computeSegmentMetrics(ll0[0], ll0[1], ll1[0], ll1[1]);
+            this.removeBearingPreview();
+            const line = new LineString([startMapCoord, endMapCoord]);
+            const feature = new Feature({
+                geometry: line,
+                type: "draw",
+                segmentKind: "bearing",
+                bearingMetrics: metrics,
+            });
+            this.drawSource.addFeature(feature);
+            this.finalizeMeasurementOverlay(feature);
+            this.stopBearingMode();
+            if (this.select) {
+                this.select.setActive(true);
+            }
+            if (this.translate) {
+                this.translate.setActive(true);
+            }
+            if (this.modify) {
+                this.modify.setActive(true);
+            }
+            setTimeout(() => this.saveMapState(), 100);
+        },
+
+        removeBearingPreview() {
+            if (this.bearingPreviewFeature && this.drawSource) {
+                this.drawSource.removeFeature(this.bearingPreviewFeature);
+            }
+            this.bearingPreviewFeature = null;
+        },
+
+        ensureBearingPreviewLine(endMapCoord) {
+            if (!this.drawSource) {
+                return;
+            }
+            const origin = this.bearingFromGps ? this.bearingGpsMapCoord : this.bearingFirstMapCoord;
+            if (!origin) {
+                return;
+            }
+            if (!this.bearingPreviewFeature) {
+                const f = new Feature({
+                    geometry: new LineString([origin, endMapCoord]),
+                    type: "draw",
+                    bearingPreview: true,
+                });
+                f.setStyle(
+                    new Style({
+                        stroke: new Stroke({
+                            color: "rgba(13, 148, 136, 0.85)",
+                            width: 2,
+                            lineDash: [8, 6],
+                        }),
+                    })
+                );
+                this.drawSource.addFeature(f);
+                this.bearingPreviewFeature = f;
+            } else {
+                /** @type {import("ol/geom/LineString").default} */ (
+                    this.bearingPreviewFeature.getGeometry()
+                ).setCoordinates([origin, endMapCoord]);
+            }
+        },
+
+        updateBearingPointerUi(evt) {
+            const origin = this.bearingFromGps ? this.bearingGpsMapCoord : this.bearingFirstMapCoord;
+            if (this.helpTooltip && this.helpTooltipElement) {
+                const msg = !origin ? this.$t("map.bearing_help_first") : this.$t("map.bearing_help_drag");
+                this.helpTooltipElement.textContent = msg;
+                this.helpTooltip.setPosition(evt.coordinate);
+                this.helpTooltipElement.classList.remove("hidden");
+            }
+            if (!origin) {
+                return;
+            }
+            this.ensureBearingPreviewLine(evt.coordinate);
+            const ll0 = toLonLat(origin);
+            const ll1 = toLonLat(evt.coordinate);
+            const metrics = computeSegmentMetrics(ll0[0], ll0[1], ll1[0], ll1[1]);
+            if (!this.measureTooltipElement || !this.measureTooltip) {
+                this.createMeasureTooltip();
+            }
+            if (this.measureTooltipElement && this.measureTooltip) {
+                this.measureTooltipElement.className = "ol-tooltip ol-tooltip-measure";
+                this.measureTooltipElement.innerHTML = buildBearingLiveTooltipHtml(metrics, (k) => this.$t(k));
+                this.measureTooltip.setPosition(evt.coordinate);
+            }
+        },
+
         formatLength(line) {
             const length = getLength(line);
             let output;
@@ -3022,12 +4223,113 @@ export default {
                 featureProjection: "EPSG:3857",
             });
             this.drawSource.clear();
+            if (this.select) {
+                this.select.getFeatures().clear();
+            }
+            this.selectedFeature = null;
+            this.syncDrawFeatureInfoOverlay();
             this.drawSource.addFeatures(features);
+            this.rebuildMeasurementOverlays();
             await this.saveMapState();
             this.showLoadDrawingModal = false;
             ToastUtils.success(`Loaded "${drawing.name}"`);
         },
 
+        onVectorExchangeImport({ features, merge }) {
+            if (!this.drawSource || !features?.length) {
+                ToastUtils.warning(this.$t("map.vector_import_empty"));
+                return;
+            }
+            if (!merge) {
+                this.drawSource.clear();
+                if (this.select) {
+                    this.select.getFeatures().clear();
+                }
+                this.selectedFeature = null;
+                this.syncDrawFeatureInfoOverlay();
+            }
+            for (const f of features) {
+                if (f.get("type") == null || f.get("type") === "") {
+                    f.set("type", "draw");
+                }
+            }
+            this.drawSource.addFeatures(features);
+            this.rebuildMeasurementOverlays();
+            this.saveMapState();
+            ToastUtils.success(this.$t("map.vector_import_ok", { count: features.length }));
+        },
+
+        onVectorExchangeImportError() {
+            ToastUtils.error(this.$t("map.vector_import_failed"));
+        },
+
+        exportVectorGeoJson() {
+            if (!this.drawSource || !this.hasVectorDrawFeatures) {
+                return;
+            }
+            const raw = this.drawSource.getFeatures();
+            const features = this.serializeFeatures(raw);
+            const text = writeFeaturesToGeoJson(features, "EPSG:3857");
+            const name = `meshchatx-drawings-${new Date().toISOString().slice(0, 10)}.geojson`;
+            this.downloadTextFile(name, text, "application/geo+json");
+            ToastUtils.success(this.$t("map.vector_export_ok"));
+        },
+
+        exportVectorKml() {
+            if (!this.drawSource || !this.hasVectorDrawFeatures) {
+                return;
+            }
+            const raw = this.drawSource.getFeatures();
+            const features = this.serializeFeatures(raw);
+            const text = writeFeaturesToKml(features, "EPSG:3857");
+            const name = `meshchatx-drawings-${new Date().toISOString().slice(0, 10)}.kml`;
+            this.downloadTextFile(name, text, "application/vnd.google-earth.kml+xml");
+            ToastUtils.success(this.$t("map.vector_export_ok"));
+        },
+
+        async exportVectorKmz() {
+            if (!this.drawSource || !this.hasVectorDrawFeatures) {
+                return;
+            }
+            const raw = this.drawSource.getFeatures();
+            const features = this.serializeFeatures(raw);
+            try {
+                const blob = await writeFeaturesToKmzBlob(features, "EPSG:3857");
+                const name = `meshchatx-drawings-${new Date().toISOString().slice(0, 10)}.kmz`;
+                this.downloadBlobFile(name, blob, "application/vnd.google-earth.kmz");
+                ToastUtils.success(this.$t("map.vector_export_ok"));
+            } catch (e) {
+                console.error(e);
+                ToastUtils.error(this.$t("map.vector_import_failed"));
+            }
+        },
+
+        downloadBlobFile(filename, blob, mime) {
+            const b = new Blob([blob], { type: mime });
+            const url = URL.createObjectURL(b);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = filename;
+            a.rel = "noopener";
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+            URL.revokeObjectURL(url);
+        },
+
+        downloadTextFile(filename, text, mime) {
+            const blob = new Blob([text], { type: mime });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = filename;
+            a.rel = "noopener";
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+            URL.revokeObjectURL(url);
+        },
+
         async deleteDrawing(drawing) {
             if (!confirm(`Delete drawing "${drawing.name}"?`)) return;
             try {
@@ -3362,7 +4664,14 @@ export default {
                 svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${renderSize}" height="${renderSize}" viewBox="0 0 24 24"><path d="${path}" fill="${markerFill}" stroke="${markerStroke}" stroke-width="1.5"/></svg>`;
             }
 
-            const src = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svg)));
+            const svgBytes = new TextEncoder().encode(svg);
+            let svgBinary = "";
+            const chunkSize = 8192;
+            for (let i = 0; i < svgBytes.length; i += chunkSize) {
+                const sub = svgBytes.subarray(i, i + chunkSize);
+                svgBinary += String.fromCharCode(...sub);
+            }
+            const src = "data:image/svg+xml;base64," + btoa(svgBinary);
 
             const displayHeight = renderSize * scale;
             const labelOffset = -(displayHeight + 6);
@@ -3540,7 +4849,9 @@ export default {
         getDiscoveredIconName(node) {
             return getDiscoveredIconNameHelper(node);
         },
-        async mapDiscoveredNodes() {
+        async mapDiscoveredNodes(options = {}) {
+            const skipFit = options.skipFit === true;
+            const silent = options.silent === true;
             try {
                 const response = await window.api.get("/api/v1/reticulum/discovered-interfaces");
                 const discovered = response.data?.interfaces ?? [];
@@ -3548,7 +4859,9 @@ export default {
                 const nodesDeduped = this.dedupeDiscoveredMapNodes(nodesWithLoc);
 
                 if (nodesDeduped.length === 0) {
-                    ToastUtils.info(this.$t("map.no_nodes_location"));
+                    if (!silent) {
+                        ToastUtils.info(this.$t("map.no_nodes_location"));
+                    }
                     return;
                 }
 
@@ -3570,7 +4883,7 @@ export default {
                 this.discoveredVisible = true;
                 this.updateMarkers();
 
-                if (!isExtentEmpty(extent)) {
+                if (!skipFit && !isExtentEmpty(extent)) {
                     this.map.getView().fit(extent, {
                         padding: [100, 100, 100, 100],
                         maxZoom: 12,
@@ -3578,10 +4891,14 @@ export default {
                     });
                 }
 
-                ToastUtils.success(`Mapped ${nodesDeduped.length} discovered nodes`);
+                if (!silent) {
+                    ToastUtils.success(`Mapped ${nodesDeduped.length} discovered nodes`);
+                }
             } catch (e) {
                 console.error("Failed to map discovered nodes", e);
-                ToastUtils.error(this.$t("map.failed_fetch_nodes"));
+                if (!silent) {
+                    ToastUtils.error(this.$t("map.failed_fetch_nodes"));
+                }
             }
         },
         openMapPopout() {
@@ -3680,6 +4997,39 @@ export default {
     opacity: 0;
 }
 
+.ol-scale-line-host :deep(.ol-scale-line),
+.ol-scale-line-host :deep(.ol-scale-bar) {
+    position: relative;
+    bottom: auto;
+    left: auto;
+    right: auto;
+    top: auto;
+    background: rgba(255, 255, 255, 0.85);
+    border-radius: 6px;
+    padding: 2px 4px;
+    max-width: 100%;
+}
+.dark .ol-scale-line-host :deep(.ol-scale-line),
+.dark .ol-scale-line-host :deep(.ol-scale-bar) {
+    background: rgba(24, 24, 27, 0.9);
+}
+
+.ol-scale-line-host--dark-basemap :deep(.ol-scale-line),
+.ol-scale-line-host--dark-basemap :deep(.ol-scale-bar) {
+    background: transparent;
+    --ol-background-color: rgba(255, 255, 255, 0.14);
+    --ol-partial-background-color: transparent;
+    --ol-foreground-color: #ffffff;
+    --ol-subtle-foreground-color: rgba(255, 255, 255, 0.4);
+}
+
+.ol-scale-line-host--dark-basemap :deep(.ol-scale-step-text),
+.ol-scale-line-host--dark-basemap :deep(.ol-scale-text) {
+    text-shadow:
+        0 0 2px rgba(0, 0, 0, 0.9),
+        0 1px 3px rgba(0, 0, 0, 0.85);
+}
+
 @media (max-width: 639px) {
     :deep(.ol-zoom) {
         left: auto;
diff --git a/meshchatx/src/frontend/components/map/internal/MapBearingInstructions.vue b/meshchatx/src/frontend/components/map/internal/MapBearingInstructions.vue
new file mode 100644
index 0000000..b6e0850
--- /dev/null
+++ b/meshchatx/src/frontend/components/map/internal/MapBearingInstructions.vue
@@ -0,0 +1,46 @@
+<!-- SPDX-License-Identifier: 0BSD -->
+
+<template>
+    <div
+        class="absolute top-[calc(0.5rem+2.75rem+0.5rem+2.75rem)] left-1/2 -translate-x-1/2 z-[19] w-[min(100vw-2rem,24rem)] pointer-events-auto"
+    >
+        <div
+            class="bg-white/95 dark:bg-zinc-900/95 backdrop-blur border border-gray-200 dark:border-zinc-700 rounded-xl shadow-lg px-3 py-2 text-xs text-gray-800 dark:text-zinc-200"
+        >
+            <p class="font-medium text-center" :class="showFromHere ? 'mb-2' : ''">{{ instructionText }}</p>
+            <button
+                v-if="showFromHere"
+                type="button"
+                class="w-full py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white text-[11px] font-semibold transition-colors"
+                @click="$emit('use-my-location')"
+            >
+                {{ $t("map.bearing_from_here") }}
+            </button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "MapBearingInstructions",
+    props: {
+        fromGpsActive: { type: Boolean, default: false },
+        awaitingSecondTap: { type: Boolean, default: false },
+    },
+    emits: ["use-my-location"],
+    computed: {
+        instructionText() {
+            if (this.fromGpsActive) {
+                return this.$t("map.bearing_hint_destination");
+            }
+            if (this.awaitingSecondTap) {
+                return this.$t("map.bearing_hint_second");
+            }
+            return this.$t("map.bearing_hint_first");
+        },
+        showFromHere() {
+            return !this.fromGpsActive;
+        },
+    },
+};
+</script>
diff --git a/meshchatx/src/frontend/components/map/internal/MapDrawingToolbar.vue b/meshchatx/src/frontend/components/map/internal/MapDrawingToolbar.vue
index d776893..604de18 100644
--- a/meshchatx/src/frontend/components/map/internal/MapDrawingToolbar.vue
+++ b/meshchatx/src/frontend/components/map/internal/MapDrawingToolbar.vue
@@ -13,7 +13,7 @@
                 :ref="tool.type === 'Export' ? 'exportToolButton' : null"
                 class="p-1.5 sm:p-2 rounded-xl transition-all hover:scale-110 active:scale-90"
                 :class="[
-                    (drawType === tool.type && !measuring) || (tool.type === 'Export' && exportMode)
+                    (drawType === tool.type && !measuring && !bearingMode) || (tool.type === 'Export' && exportMode)
                         ? 'bg-blue-500 text-white shadow-lg shadow-blue-500/30'
                         : 'hover:bg-gray-100 dark:hover:bg-zinc-800 text-gray-600 dark:text-gray-300',
                 ]"
@@ -26,7 +26,7 @@
             <button
                 class="p-1.5 sm:p-2 rounded-xl transition-all hover:scale-110 active:scale-90"
                 :class="[
-                    measuring
+                    measuring && !bearingMode
                         ? 'bg-indigo-500 text-white shadow-lg shadow-indigo-500/30'
                         : 'hover:bg-gray-100 dark:hover:bg-zinc-800 text-gray-600 dark:text-gray-300',
                 ]"
@@ -35,6 +35,30 @@
             >
                 <v-icon icon="mdi-ruler" size="18" class="sm:!size-5"></v-icon>
             </button>
+            <button
+                class="p-1.5 sm:p-2 rounded-xl transition-all hover:scale-110 active:scale-90"
+                :class="[
+                    bearingMode
+                        ? 'bg-teal-600 text-white shadow-lg shadow-teal-600/30'
+                        : 'hover:bg-gray-100 dark:hover:bg-zinc-800 text-gray-600 dark:text-gray-300',
+                ]"
+                :title="$t('map.tool_bearing')"
+                @click="$emit('toggle-bearing')"
+            >
+                <v-icon icon="mdi-compass-outline" size="18" class="sm:!size-5"></v-icon>
+            </button>
+            <button
+                class="p-1.5 sm:p-2 rounded-xl transition-all hover:scale-110 active:scale-90"
+                :class="[
+                    bearingMode && bearingFromGps
+                        ? 'bg-teal-600 text-white shadow-lg shadow-teal-600/30'
+                        : 'hover:bg-gray-100 dark:hover:bg-zinc-800 text-gray-600 dark:text-gray-300',
+                ]"
+                :title="$t('map.tool_bearing_from_here')"
+                @click="$emit('bearing-from-here')"
+            >
+                <v-icon icon="mdi-navigation-variant" size="18" class="sm:!size-5"></v-icon>
+            </button>
             <button
                 class="p-1.5 sm:p-2 rounded-xl hover:bg-red-50 dark:hover:bg-red-900/20 text-red-500 transition-all hover:scale-110 active:scale-90"
                 :title="$t('map.tool_clear')"
@@ -81,6 +105,20 @@
             >
                 <v-icon icon="mdi-crosshairs-gps" size="18" class="sm:!size-5"></v-icon>
             </button>
+            <button
+                class="p-1.5 sm:p-2 rounded-xl hover:bg-emerald-50 dark:hover:bg-emerald-900/20 text-emerald-600 dark:text-emerald-400 transition-all hover:scale-110 active:scale-90"
+                :title="$t('map.share_view')"
+                @click="$emit('share-view')"
+            >
+                <v-icon icon="mdi-share-variant" size="18" class="sm:!size-5"></v-icon>
+            </button>
+            <button
+                class="p-1.5 sm:p-2 rounded-xl hover:bg-amber-50 dark:hover:bg-amber-900/20 text-amber-600 dark:text-amber-400 transition-all hover:scale-110 active:scale-90"
+                :title="$t('map.ping_here_toolbar')"
+                @click="$emit('ping-here')"
+            >
+                <v-icon icon="mdi-send" size="18" class="sm:!size-5"></v-icon>
+            </button>
         </div>
     </div>
 </template>
@@ -92,6 +130,8 @@ export default {
         tools: { type: Array, required: true },
         drawType: { type: String, default: null },
         measuring: { type: Boolean, default: false },
+        bearingMode: { type: Boolean, default: false },
+        bearingFromGps: { type: Boolean, default: false },
         exportMode: { type: Boolean, default: false },
         selectedFeature: { type: Object, default: null },
     },
@@ -99,12 +139,16 @@ export default {
         "toggle-draw",
         "toggle-export",
         "toggle-measure",
+        "toggle-bearing",
+        "bearing-from-here",
         "clear",
         "edit-note",
         "delete-feature",
         "save",
         "load",
         "locate",
+        "share-view",
+        "ping-here",
     ],
     methods: {
         onToolClick(tool) {
diff --git a/meshchatx/src/frontend/components/map/internal/MapExportConfigPanel.vue b/meshchatx/src/frontend/components/map/internal/MapExportConfigPanel.vue
index 610a6e3..7532ef8 100644
--- a/meshchatx/src/frontend/components/map/internal/MapExportConfigPanel.vue
+++ b/meshchatx/src/frontend/components/map/internal/MapExportConfigPanel.vue
@@ -39,6 +39,9 @@
                 <span class="text-gray-600 dark:text-zinc-400">{{ $t("map.tile_count") }}:</span>
                 <span class="font-bold text-blue-600">{{ estimatedTiles }}</span>
             </div>
+            <p v-if="tileLimitExceeded" class="text-xs text-red-600 dark:text-red-400 font-semibold">
+                {{ $t("map.export_tile_limit_exceeded") }}
+            </p>
             <div class="flex gap-2">
                 <button
                     :disabled="exporting"
@@ -48,7 +51,7 @@
                     {{ $t("common.cancel") }}
                 </button>
                 <button
-                    :disabled="exporting"
+                    :disabled="exporting || tileLimitExceeded"
                     class="flex-1 py-2 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 text-white rounded-lg font-bold transition-colors shadow-md"
                     @click="$emit('start')"
                 >
@@ -70,6 +73,7 @@ export default {
         maxZoom: { type: Number, required: true },
         estimatedTiles: { type: [Number, String], default: 0 },
         exporting: { type: Boolean, default: false },
+        tileLimitExceeded: { type: Boolean, default: false },
     },
     emits: ["cancel", "start", "update:minZoom", "update:maxZoom"],
 };
diff --git a/meshchatx/src/frontend/components/map/internal/MapExportInstructions.vue b/meshchatx/src/frontend/components/map/internal/MapExportInstructions.vue
index 3650eaf..eb226eb 100644
--- a/meshchatx/src/frontend/components/map/internal/MapExportInstructions.vue
+++ b/meshchatx/src/frontend/components/map/internal/MapExportInstructions.vue
@@ -2,14 +2,33 @@
 
 <template>
     <div
-        class="absolute top-4 left-1/2 -translate-x-1/2 z-20 px-4 py-2 bg-blue-600 text-white rounded-full shadow-lg font-medium text-sm animate-bounce"
+        class="absolute top-4 left-1/2 -translate-x-1/2 z-20 flex flex-col items-center gap-2 max-w-[min(100vw-2rem,36rem)] px-2"
     >
-        {{ $t("map.export_instructions") }}
+        <div
+            class="px-4 py-2 bg-blue-600 text-white rounded-full shadow-lg font-medium text-sm animate-bounce text-center"
+        >
+            {{ $t("map.export_instructions") }}
+        </div>
+        <div v-if="presets && presets.length" class="flex flex-wrap justify-center gap-2 pointer-events-auto">
+            <button
+                v-for="p in presets"
+                :key="p.id"
+                type="button"
+                class="px-2 py-1 text-[10px] font-bold uppercase tracking-tight rounded-lg bg-white/95 dark:bg-zinc-900/95 border border-gray-200 dark:border-zinc-700 text-gray-800 dark:text-zinc-100 shadow-sm hover:bg-gray-50 dark:hover:bg-zinc-800"
+                @click="$emit('select-preset', p)"
+            >
+                {{ $t(`map.export_region_${p.id}`) }}
+            </button>
+        </div>
     </div>
 </template>
 
 <script>
 export default {
     name: "MapExportInstructions",
+    props: {
+        presets: { type: Array, default: () => [] },
+    },
+    emits: ["select-preset"],
 };
 </script>
diff --git a/meshchatx/src/frontend/components/map/internal/MapVectorExchangePanel.vue b/meshchatx/src/frontend/components/map/internal/MapVectorExchangePanel.vue
new file mode 100644
index 0000000..5e34f56
--- /dev/null
+++ b/meshchatx/src/frontend/components/map/internal/MapVectorExchangePanel.vue
@@ -0,0 +1,184 @@
+<!-- SPDX-License-Identifier: 0BSD -->
+
+<template>
+    <div class="space-y-3 rounded-xl border border-gray-200 dark:border-zinc-800 bg-gray-50/50 dark:bg-zinc-900/40 p-3">
+        <div class="flex items-center justify-between gap-2">
+            <span class="text-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-widest">{{
+                $t("map.vector_exchange_title")
+            }}</span>
+        </div>
+        <label class="flex items-center gap-2 text-[10px] text-gray-600 dark:text-zinc-400 cursor-pointer select-none">
+            <input v-model="mergeImport" type="checkbox" class="rounded border-gray-300 dark:border-zinc-600" />
+            {{ $t("map.vector_exchange_merge") }}
+        </label>
+        <div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
+            <button
+                type="button"
+                class="py-2 px-2 text-[10px] font-bold uppercase rounded-lg bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-700 text-gray-800 dark:text-zinc-100 hover:bg-gray-50 dark:hover:bg-zinc-800 disabled:opacity-40"
+                :disabled="disabled"
+                @click="triggerGeoJsonPick"
+            >
+                {{ $t("map.vector_import_geojson") }}
+            </button>
+            <button
+                type="button"
+                class="py-2 px-2 text-[10px] font-bold uppercase rounded-lg bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-700 text-gray-800 dark:text-zinc-100 hover:bg-gray-50 dark:hover:bg-zinc-800 disabled:opacity-40"
+                :disabled="disabled"
+                @click="triggerKmlPick"
+            >
+                {{ $t("map.vector_import_kml") }}
+            </button>
+            <button
+                type="button"
+                class="py-2 px-2 text-[10px] font-bold uppercase rounded-lg bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-700 text-gray-800 dark:text-zinc-100 hover:bg-gray-50 dark:hover:bg-zinc-800 disabled:opacity-40"
+                :disabled="disabled"
+                @click="triggerKmzPick"
+            >
+                {{ $t("map.vector_import_kmz") }}
+            </button>
+            <button
+                type="button"
+                class="flex items-center justify-center px-2 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-all text-[10px] font-bold uppercase tracking-tight shadow-sm active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
+                :disabled="disabled || !hasFeatures"
+                @click="$emit('export-geojson')"
+            >
+                {{ $t("map.vector_export_geojson") }}
+            </button>
+            <button
+                type="button"
+                class="flex items-center justify-center px-2 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-all text-[10px] font-bold uppercase tracking-tight shadow-sm active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
+                :disabled="disabled || !hasFeatures"
+                @click="$emit('export-kml')"
+            >
+                {{ $t("map.vector_export_kml") }}
+            </button>
+            <button
+                type="button"
+                class="flex items-center justify-center px-2 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-all text-[10px] font-bold uppercase tracking-tight shadow-sm active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
+                :disabled="disabled || !hasFeatures"
+                @click="$emit('export-kmz')"
+            >
+                {{ $t("map.vector_export_kmz") }}
+            </button>
+        </div>
+        <p class="text-[9px] text-gray-500 dark:text-zinc-500 leading-snug">
+            {{ $t("map.vector_exchange_hint") }}
+        </p>
+        <input
+            ref="geojsonInput"
+            type="file"
+            accept=".geojson,.json,application/geo+json,application/json"
+            class="hidden"
+            @change="onGeojsonFile"
+        />
+        <input
+            ref="kmlInput"
+            type="file"
+            accept=".kml,.xml,text/xml,application/vnd.google-earth.kml+xml"
+            class="hidden"
+            @change="onKmlFile"
+        />
+        <input
+            ref="kmzInput"
+            type="file"
+            accept=".kmz,application/vnd.google-earth.kmz,application/zip"
+            class="hidden"
+            @change="onKmzFile"
+        />
+    </div>
+</template>
+
+<script>
+import { readGeoJsonToFeatures } from "../../../js/mapExchange/geoJsonCodec.js";
+import { readKmlToFeatures } from "../../../js/mapExchange/kmlCodec.js";
+import { readKmzToFeatures } from "../../../js/mapExchange/kmzCodec.js";
+
+export default {
+    name: "MapVectorExchangePanel",
+    props: {
+        disabled: { type: Boolean, default: false },
+        hasFeatures: { type: Boolean, default: false },
+    },
+    emits: ["import-features", "export-geojson", "export-kml", "export-kmz", "import-error"],
+    data() {
+        return {
+            mergeImport: true,
+        };
+    },
+    methods: {
+        triggerGeoJsonPick() {
+            this.$refs.geojsonInput?.click();
+        },
+        triggerKmlPick() {
+            this.$refs.kmlInput?.click();
+        },
+        triggerKmzPick() {
+            this.$refs.kmzInput?.click();
+        },
+        async readFileText(file) {
+            return new Promise((resolve, reject) => {
+                const r = new FileReader();
+                r.onload = () => resolve(String(r.result || ""));
+                r.onerror = () => reject(new Error("read failed"));
+                r.readAsText(file);
+            });
+        },
+        async onGeojsonFile(ev) {
+            const input = ev.target;
+            const file = input.files && input.files[0];
+            input.value = "";
+            if (!file) {
+                return;
+            }
+            try {
+                const text = await this.readFileText(file);
+                const features = readGeoJsonToFeatures(text, "EPSG:3857");
+                this.$emit("import-features", { features, merge: this.mergeImport });
+            } catch (e) {
+                console.error(e);
+                this.$emit("import-error", e);
+            }
+        },
+        async onKmlFile(ev) {
+            const input = ev.target;
+            const file = input.files && input.files[0];
+            input.value = "";
+            if (!file) {
+                return;
+            }
+            try {
+                const text = await this.readFileText(file);
+                const features = readKmlToFeatures(text, "EPSG:3857");
+                this.$emit("import-features", { features, merge: this.mergeImport });
+            } catch (e) {
+                console.error(e);
+                this.$emit("import-error", e);
+            }
+        },
+        async readFileArrayBuffer(file) {
+            return new Promise((resolve, reject) => {
+                const r = new FileReader();
+                r.onload = () => resolve(/** @type {ArrayBuffer} */ (r.result));
+                r.onerror = () => reject(new Error("read failed"));
+                r.readAsArrayBuffer(file);
+            });
+        },
+        async onKmzFile(ev) {
+            const input = ev.target;
+            const file = input.files && input.files[0];
+            input.value = "";
+            if (!file) {
+                return;
+            }
+            try {
+                const buf = await this.readFileArrayBuffer(file);
+                const features = await readKmzToFeatures(buf, "EPSG:3857");
+                this.$emit("import-features", { features, merge: this.mergeImport });
+            } catch (e) {
+                console.error(e);
+                this.$emit("import-error", e);
+            }
+        },
+    },
+};
+</script>