From 4b8ab2913baa4dddc9e9ea463b9bed720b45343c Mon Sep 17 00:00:00 2001
From: Open TAK server <opentak@netherlands.fable-jazz.ts.net>
Date: Thu, 16 Apr 2026 15:30:40 +0000
Subject: [PATCH 1/7] feat: add admin Settings page for map defaults

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/Settings.tsx | 134 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 134 insertions(+)
 create mode 100644 src/pages/Settings.tsx

diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
new file mode 100644
index 0000000..440a892
--- /dev/null
+++ b/src/pages/Settings.tsx
@@ -0,0 +1,134 @@
+import React, { useEffect, useState } from 'react';
+import {
+    Button,
+    NumberInput,
+    Paper,
+    Select,
+    Title,
+} from '@mantine/core';
+import { IconCheck, IconX } from '@tabler/icons-react';
+import { notifications } from '@mantine/notifications';
+import axios from '../axios_config';
+import { apiRoutes } from '../apiRoutes';
+import { t } from 'i18next';
+
+const LAYER_OPTIONS = [
+    'OSM',
+    'Google Streets',
+    'Google Hybrid',
+    'Google Terrain',
+    'ESRI World Imagery (Clarity) Beta',
+    'ESRI World Topo',
+];
+
+export default function Settings() {
+    const [lat, setLat] = useState<number>(10);
+    const [lon, setLon] = useState<number>(0);
+    const [zoom, setZoom] = useState<number>(3);
+    const [layer, setLayer] = useState<string>('OSM');
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        axios.get(apiRoutes.adminSettings)
+            .then(r => {
+                if (r.status === 200) {
+                    setLat(r.data.OTS_MAP_DEFAULT_LAT);
+                    setLon(r.data.OTS_MAP_DEFAULT_LON);
+                    setZoom(r.data.OTS_MAP_DEFAULT_ZOOM);
+                    setLayer(r.data.OTS_MAP_DEFAULT_LAYER);
+                }
+                setLoading(false);
+            })
+            .catch(err => {
+                setLoading(false);
+                if (err.response && err.response.status === 404) {
+                    notifications.show({
+                        title: t('Settings unavailable'),
+                        message: t('This feature requires a newer version of OpenTAKServer'),
+                        icon: <IconX />,
+                        color: 'orange',
+                    });
+                } else {
+                    notifications.show({
+                        title: t('Failed to load settings'),
+                        message: err.response?.data?.error || String(err),
+                        icon: <IconX />,
+                        color: 'red',
+                    });
+                }
+            });
+    }, []);
+
+    function saveSettings() {
+        axios.put(apiRoutes.adminSettings, {
+            OTS_MAP_DEFAULT_LAT: lat,
+            OTS_MAP_DEFAULT_LON: lon,
+            OTS_MAP_DEFAULT_ZOOM: zoom,
+            OTS_MAP_DEFAULT_LAYER: layer,
+        }).then(r => {
+            if (r.status === 200) {
+                notifications.show({
+                    message: t('Settings saved'),
+                    icon: <IconCheck />,
+                    color: 'green',
+                });
+            }
+        }).catch(err => {
+            notifications.show({
+                title: t('Failed to save settings'),
+                message: err.response?.data?.error || String(err),
+                icon: <IconX />,
+                color: 'red',
+            });
+        });
+    }
+
+    return (
+        <>
+            <Title order={3} mb="md">{t('Map Defaults')}</Title>
+            <Paper shadow="xs" p="md" withBorder maw={400}>
+                <NumberInput
+                    label={t('Default Latitude')}
+                    value={lat}
+                    onChange={(v) => setLat(Number(v))}
+                    min={-90}
+                    max={90}
+                    decimalScale={6}
+                    step={0.1}
+                    mb="md"
+                    disabled={loading}
+                />
+                <NumberInput
+                    label={t('Default Longitude')}
+                    value={lon}
+                    onChange={(v) => setLon(Number(v))}
+                    min={-180}
+                    max={180}
+                    decimalScale={6}
+                    step={0.1}
+                    mb="md"
+                    disabled={loading}
+                />
+                <NumberInput
+                    label={t('Default Zoom')}
+                    value={zoom}
+                    onChange={(v) => setZoom(Number(v))}
+                    min={1}
+                    max={20}
+                    mb="md"
+                    disabled={loading}
+                />
+                <Select
+                    label={t('Default Map Layer')}
+                    value={layer}
+                    onChange={(v) => setLayer(v || 'OSM')}
+                    data={LAYER_OPTIONS}
+                    mb="md"
+                    disabled={loading}
+                    allowDeselect={false}
+                />
+                <Button onClick={saveSettings} disabled={loading}>{t('Save')}</Button>
+            </Paper>
+        </>
+    );
+}

From 9224ea4f8fb851fba3239777df04a4a5e67a4e77 Mon Sep 17 00:00:00 2001
From: Open TAK server <opentak@netherlands.fable-jazz.ts.net>
Date: Thu, 16 Apr 2026 15:30:59 +0000
Subject: [PATCH 2/7] feat: wire up Settings page in routing and admin
 navigation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/Navbar/Navbar.tsx | 3 ++-
 src/routes.tsx                   | 2 ++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 981c678..1fe91ef 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -73,7 +73,8 @@ const adminLinks = [
     { link: '/plugin_updates', label: t('Plugin Updates'), icon: IconPuzzle },
     { link: '/device_profiles', label: t('Device Profiles'), icon: IconDeviceMobile },
     { link: '/server_plugin_manager', label: t('Server Plugin Manager'), icon: IconPlugConnected },
-    { link: '/link_account', 'label': t('Link TAK.gov Account'), icon: IconLink}
+    { link: '/link_account', 'label': t('Link TAK.gov Account'), icon: IconLink},
+    { link: '/settings', label: t('Settings'), icon: IconSettings },
 ];
 
 interface ATAKQrCode {
diff --git a/src/routes.tsx b/src/routes.tsx
index 3e65037..167f3e6 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -24,6 +24,7 @@ const Plugin = React.lazy(() => import('./pages/Plugin'));
 const ServerPluginManager = React.lazy(() => import('./pages/ServerPluginManager.tsx'));
 const LinkTAKGovAccount = React.lazy(() => import('./pages/LinkTakGov.tsx'));
 const UserProfile = React.lazy(() => import('./pages/UserProfile.tsx'));
+const Settings = React.lazy(() => import('./pages/Settings.tsx'));
 
 const routes = [
   { path: '/', exact: true, name: 'Home', element: Dashboard },
@@ -52,6 +53,7 @@ const routes = [
   { path: '/link_account', name: 'Link TAK.gov Account', element: LinkTAKGovAccount },
   { path: '/profile/', name: 'User Profile', element: UserProfile },
   { path: '/profile/:username', name: 'User Profile', element: UserProfile },
+  { path: '/settings', name: 'Settings', element: Settings },
 ];
 
 export default routes;

From 7c74c54d76caf467ccc104b5b05066f95e7c7420 Mon Sep 17 00:00:00 2001
From: Open TAK server <opentak@netherlands.fable-jazz.ts.net>
Date: Thu, 16 Apr 2026 15:32:05 +0000
Subject: [PATCH 3/7] feat: map loads from localStorage > admin config >
 hardcoded defaults

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/Map/Map.tsx | 65 +++++++++++++++++++++++++++++++++++--------
 1 file changed, 54 insertions(+), 11 deletions(-)

diff --git a/src/pages/Map/Map.tsx b/src/pages/Map/Map.tsx
index 2ebced2..da583a9 100644
--- a/src/pages/Map/Map.tsx
+++ b/src/pages/Map/Map.tsx
@@ -7,7 +7,7 @@ import 'react-leaflet-fullscreen/styles.css';
 import 'leaflet.marker.slideto';
 import 'leaflet-rotatedmarker';
 import { Divider, Drawer, Image, Paper, Table, Text, useComputedColorScheme } from '@mantine/core';
-import axios from 'axios';
+import axios from '../axios_config';
 import { notifications } from '@mantine/notifications';
 import { IconX } from '@tabler/icons-react';
 import * as milsymbol from 'milsymbol';
@@ -33,6 +33,38 @@ export default function Map() {
     const [positionRows, setPositionRows] = useState<ReactElement[]>([]);
     const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true });
 
+    const [mapCenter, setMapCenter] = useState<[number, number]>([10, 0]);
+    const [mapZoom, setMapZoom] = useState<number>(3);
+    const [defaultLayer, setDefaultLayer] = useState<string>('OSM');
+    const [mapReady, setMapReady] = useState(false);
+
+    useEffect(() => {
+        const savedLat = localStorage.getItem('ots_map_lat');
+        const savedLon = localStorage.getItem('ots_map_lon');
+        const savedZoom = localStorage.getItem('ots_map_zoom');
+        const savedLayer = localStorage.getItem('ots_map_layer');
+
+        if (savedLat && savedLon && savedZoom) {
+            setMapCenter([parseFloat(savedLat), parseFloat(savedLon)]);
+            setMapZoom(parseInt(savedZoom));
+            if (savedLayer) setDefaultLayer(savedLayer);
+            setMapReady(true);
+        } else {
+            axios.get(apiRoutes.adminSettings)
+                .then(r => {
+                    if (r.status === 200) {
+                        setMapCenter([r.data.OTS_MAP_DEFAULT_LAT, r.data.OTS_MAP_DEFAULT_LON]);
+                        setMapZoom(r.data.OTS_MAP_DEFAULT_ZOOM);
+                        setDefaultLayer(r.data.OTS_MAP_DEFAULT_LAYER);
+                    }
+                    setMapReady(true);
+                })
+                .catch(() => {
+                    setMapReady(true);
+                });
+        }
+    }, []);
+
     const eudsLayer = new L.LayerGroup();
     const rbLinesLayer = new L.LayerGroup();
     const markersLayer = new L.LayerGroup();
@@ -435,6 +467,17 @@ export default function Map() {
             socket.on('eud', onEud);
             socket.on('casevac', onCaseEvac);
 
+            map.on('moveend', () => {
+                const center = map.getCenter();
+                localStorage.setItem('ots_map_lat', String(center.lat));
+                localStorage.setItem('ots_map_lon', String(center.lng));
+                localStorage.setItem('ots_map_zoom', String(map.getZoom()));
+            });
+
+            map.on('baselayerchange', (e: any) => {
+                localStorage.setItem('ots_map_layer', e.name);
+            });
+
             return () => {
                 socket.off('point', onPointEvent);
                 socket.off('rb_line', onRBLine);
@@ -475,16 +518,16 @@ export default function Map() {
                 </Table>
             </Drawer>
             <Paper shadow="xl" radius="md" p="md" withBorder>
-                <MapContainer
-                  center={[10, 0]}
-                  zoom={3}
+                {mapReady && <MapContainer
+                  center={mapCenter}
+                  zoom={mapZoom}
                   scrollWheelZoom
                   style={{ height: 'calc(100vh - 10rem)', width: '100%', zIndex: 90 }}
                 >
                     <MapContext />
                     <ScaleControl />
                     <LayersControl>
-                        <LayersControl.BaseLayer name="OSM" checked>
+                        <LayersControl.BaseLayer name="OSM" checked={defaultLayer === 'OSM'}>
                             <TileLayer
                               attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                               url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
@@ -493,19 +536,19 @@ export default function Map() {
                               maxZoom={20}
                             />
                         </LayersControl.BaseLayer>
-                        <LayersControl.BaseLayer name="Google Streets">
+                        <LayersControl.BaseLayer name="Google Streets" checked={defaultLayer === 'Google Streets'}>
                             <TileLayer url="http://mt0.google.com/vt/lyrs=m&x={x}&y={y}&z={z}" zIndex={0} minZoom={0} maxZoom={20} />
                         </LayersControl.BaseLayer>
-                        <LayersControl.BaseLayer name="Google Hybrid">
+                        <LayersControl.BaseLayer name="Google Hybrid" checked={defaultLayer === 'Google Hybrid'}>
                             <TileLayer url="http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}&s=Ga" zIndex={0} minZoom={0} maxZoom={20} />
                         </LayersControl.BaseLayer>
-                        <LayersControl.BaseLayer name="Google Terrain">
+                        <LayersControl.BaseLayer name="Google Terrain" checked={defaultLayer === 'Google Terrain'}>
                             <TileLayer url="http://mt1.google.com/vt/lyrs=p&amp;x={x}&amp;y={y}&amp;z={z}" zIndex={0} minZoom={0} maxZoom={20} />
                         </LayersControl.BaseLayer>
-                        <LayersControl.BaseLayer name="ESRI World Imagery (Clarity) Beta">
+                        <LayersControl.BaseLayer name="ESRI World Imagery (Clarity) Beta" checked={defaultLayer === 'ESRI World Imagery (Clarity) Beta'}>
                             <TileLayer url="http://clarity.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}" minZoom={0} maxZoom={20} />
                         </LayersControl.BaseLayer>
-                        <LayersControl.BaseLayer name="ESRI World Topo">
+                        <LayersControl.BaseLayer name="ESRI World Topo" checked={defaultLayer === 'ESRI World Topo'}>
                             <TileLayer url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}" minZoom={0} maxZoom={20} />
                         </LayersControl.BaseLayer>
                     </LayersControl>
@@ -534,7 +577,7 @@ export default function Map() {
                             <TileLayer url="http://mt1.google.com/vt/lyrs=t&amp;x={x}&amp;y={y}&amp;z={z}" pane="overlayPane" />
                         </LayersControl.Overlay>
                     </LayersControl>
-                </MapContainer>
+                </MapContainer>}
             </Paper>
         </>
     );

From 215f859a8aba29ac00d6f4392dacbc98b59578cd Mon Sep 17 00:00:00 2001
From: Open TAK server <opentak@netherlands.fable-jazz.ts.net>
Date: Thu, 16 Apr 2026 15:36:12 +0000
Subject: [PATCH 4/7] fix: restore original axios import in Map.tsx

The axios_config wrapper is at src/axios_config.tsx and Map.tsx
is in src/pages/Map/, so the relative path was wrong. Map.tsx
originally used plain 'axios' import which works correctly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/pages/Map/Map.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Map/Map.tsx b/src/pages/Map/Map.tsx
index da583a9..ca8524e 100644
--- a/src/pages/Map/Map.tsx
+++ b/src/pages/Map/Map.tsx
@@ -7,7 +7,7 @@ import 'react-leaflet-fullscreen/styles.css';
 import 'leaflet.marker.slideto';
 import 'leaflet-rotatedmarker';
 import { Divider, Drawer, Image, Paper, Table, Text, useComputedColorScheme } from '@mantine/core';
-import axios from '../axios_config';
+import axios from 'axios';
 import { notifications } from '@mantine/notifications';
 import { IconX } from '@tabler/icons-react';
 import * as milsymbol from 'milsymbol';

From 5e98e504d12896dba24058ed8cda5d5c246c10ab Mon Sep 17 00:00:00 2001
From: Open TAK server <opentak@netherlands.fable-jazz.ts.net>
Date: Thu, 16 Apr 2026 15:39:10 +0000
Subject: [PATCH 5/7] feat: add interactive map preview to Settings page

Click the map to set lat/lon, scroll to set zoom. The map layer
updates when the dropdown changes. Form fields and map stay in sync
bidirectionally.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/pages/Settings.tsx | 158 +++++++++++++++++++++++++++++------------
 1 file changed, 114 insertions(+), 44 deletions(-)

diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 440a892..5465dab 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -1,6 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
     Button,
+    Grid,
     NumberInput,
     Paper,
     Select,
@@ -8,6 +9,8 @@ import {
 } from '@mantine/core';
 import { IconCheck, IconX } from '@tabler/icons-react';
 import { notifications } from '@mantine/notifications';
+import { MapContainer, TileLayer, useMap, useMapEvents } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
 import axios from '../axios_config';
 import { apiRoutes } from '../apiRoutes';
 import { t } from 'i18next';
@@ -21,6 +24,42 @@ const LAYER_OPTIONS = [
     'ESRI World Topo',
 ];
 
+const TILE_URLS: Record<string, string> = {
+    'OSM': 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+    'Google Streets': 'http://mt0.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
+    'Google Hybrid': 'http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}&s=Ga',
+    'Google Terrain': 'http://mt1.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',
+    'ESRI World Imagery (Clarity) Beta': 'http://clarity.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+    'ESRI World Topo': 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
+};
+
+function MapEvents({ onClickMap, onZoomEnd }: { onClickMap: (lat: number, lon: number) => void, onZoomEnd: (zoom: number) => void }) {
+    useMapEvents({
+        click(e) {
+            onClickMap(e.latlng.lat, e.latlng.lng);
+        },
+        zoomend(e) {
+            onZoomEnd(e.target.getZoom());
+        },
+    });
+    return null;
+}
+
+function MapSync({ lat, lon, zoom }: { lat: number, lon: number, zoom: number }) {
+    const map = useMap();
+    const isFirstRender = useRef(true);
+
+    useEffect(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            return;
+        }
+        map.setView([lat, lon], zoom);
+    }, [lat, lon, zoom]);
+
+    return null;
+}
+
 export default function Settings() {
     const [lat, setLat] = useState<number>(10);
     const [lon, setLon] = useState<number>(0);
@@ -86,49 +125,80 @@ export default function Settings() {
     return (
         <>
             <Title order={3} mb="md">{t('Map Defaults')}</Title>
-            <Paper shadow="xs" p="md" withBorder maw={400}>
-                <NumberInput
-                    label={t('Default Latitude')}
-                    value={lat}
-                    onChange={(v) => setLat(Number(v))}
-                    min={-90}
-                    max={90}
-                    decimalScale={6}
-                    step={0.1}
-                    mb="md"
-                    disabled={loading}
-                />
-                <NumberInput
-                    label={t('Default Longitude')}
-                    value={lon}
-                    onChange={(v) => setLon(Number(v))}
-                    min={-180}
-                    max={180}
-                    decimalScale={6}
-                    step={0.1}
-                    mb="md"
-                    disabled={loading}
-                />
-                <NumberInput
-                    label={t('Default Zoom')}
-                    value={zoom}
-                    onChange={(v) => setZoom(Number(v))}
-                    min={1}
-                    max={20}
-                    mb="md"
-                    disabled={loading}
-                />
-                <Select
-                    label={t('Default Map Layer')}
-                    value={layer}
-                    onChange={(v) => setLayer(v || 'OSM')}
-                    data={LAYER_OPTIONS}
-                    mb="md"
-                    disabled={loading}
-                    allowDeselect={false}
-                />
-                <Button onClick={saveSettings} disabled={loading}>{t('Save')}</Button>
-            </Paper>
+            <Grid>
+                <Grid.Col span={{ base: 12, md: 4 }}>
+                    <Paper shadow="xs" p="md" withBorder>
+                        <NumberInput
+                            label={t('Default Latitude')}
+                            value={lat}
+                            onChange={(v) => setLat(Number(v))}
+                            min={-90}
+                            max={90}
+                            decimalScale={6}
+                            step={0.1}
+                            mb="md"
+                            disabled={loading}
+                        />
+                        <NumberInput
+                            label={t('Default Longitude')}
+                            value={lon}
+                            onChange={(v) => setLon(Number(v))}
+                            min={-180}
+                            max={180}
+                            decimalScale={6}
+                            step={0.1}
+                            mb="md"
+                            disabled={loading}
+                        />
+                        <NumberInput
+                            label={t('Default Zoom')}
+                            value={zoom}
+                            onChange={(v) => setZoom(Number(v))}
+                            min={1}
+                            max={20}
+                            mb="md"
+                            disabled={loading}
+                        />
+                        <Select
+                            label={t('Default Map Layer')}
+                            value={layer}
+                            onChange={(v) => setLayer(v || 'OSM')}
+                            data={LAYER_OPTIONS}
+                            mb="md"
+                            disabled={loading}
+                            allowDeselect={false}
+                        />
+                        <Button onClick={saveSettings} disabled={loading}>{t('Save')}</Button>
+                    </Paper>
+                </Grid.Col>
+                <Grid.Col span={{ base: 12, md: 8 }}>
+                    <Paper shadow="xs" p="md" withBorder>
+                        {!loading && <MapContainer
+                            center={[lat, lon]}
+                            zoom={zoom}
+                            scrollWheelZoom
+                            style={{ height: '500px', width: '100%' }}
+                        >
+                            <TileLayer
+                                url={TILE_URLS[layer] || TILE_URLS['OSM']}
+                                key={layer}
+                                minZoom={0}
+                                maxZoom={20}
+                            />
+                            <MapEvents
+                                onClickMap={(newLat, newLon) => {
+                                    setLat(parseFloat(newLat.toFixed(6)));
+                                    setLon(parseFloat(newLon.toFixed(6)));
+                                }}
+                                onZoomEnd={(newZoom) => {
+                                    setZoom(newZoom);
+                                }}
+                            />
+                            <MapSync lat={lat} lon={lon} zoom={zoom} />
+                        </MapContainer>}
+                    </Paper>
+                </Grid.Col>
+            </Grid>
         </>
     );
 }

From 5127f26a974b652b299c7f4248515cd26bf76545 Mon Sep 17 00:00:00 2001
From: Open TAK server <opentak@netherlands.fable-jazz.ts.net>
Date: Thu, 16 Apr 2026 15:41:56 +0000
Subject: [PATCH 6/7] fix: prevent map recenter on scroll zoom in Settings

Scroll zoom now only updates the zoom level without calling setView,
which was recentering the map. Also syncs lat/lon fields to the
current map center after zoom so the fields always reflect what
the user is looking at.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/pages/Settings.tsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 5465dab..5a08f88 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -33,13 +33,14 @@ const TILE_URLS: Record<string, string> = {
     'ESRI World Topo': 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
 };
 
-function MapEvents({ onClickMap, onZoomEnd }: { onClickMap: (lat: number, lon: number) => void, onZoomEnd: (zoom: number) => void }) {
+function MapEvents({ onClickMap, onZoomEnd }: { onClickMap: (lat: number, lon: number) => void, onZoomEnd: (zoom: number, lat: number, lon: number) => void }) {
     useMapEvents({
         click(e) {
             onClickMap(e.latlng.lat, e.latlng.lng);
         },
         zoomend(e) {
-            onZoomEnd(e.target.getZoom());
+            const center = e.target.getCenter();
+            onZoomEnd(e.target.getZoom(), center.lat, center.lng);
         },
     });
     return null;
@@ -48,13 +49,26 @@ function MapEvents({ onClickMap, onZoomEnd }: { onClickMap: (lat: number, lon: n
 function MapSync({ lat, lon, zoom }: { lat: number, lon: number, zoom: number }) {
     const map = useMap();
     const isFirstRender = useRef(true);
+    const prevLat = useRef(lat);
+    const prevLon = useRef(lon);
+    const prevZoom = useRef(zoom);
 
     useEffect(() => {
         if (isFirstRender.current) {
             isFirstRender.current = false;
             return;
         }
-        map.setView([lat, lon], zoom);
+        const latLonChanged = prevLat.current !== lat || prevLon.current !== lon;
+        const zoomChanged = prevZoom.current !== zoom;
+        prevLat.current = lat;
+        prevLon.current = lon;
+        prevZoom.current = zoom;
+
+        if (latLonChanged) {
+            map.setView([lat, lon], zoom);
+        } else if (zoomChanged) {
+            map.setZoom(zoom);
+        }
     }, [lat, lon, zoom]);
 
     return null;
@@ -190,8 +204,10 @@ export default function Settings() {
                                     setLat(parseFloat(newLat.toFixed(6)));
                                     setLon(parseFloat(newLon.toFixed(6)));
                                 }}
-                                onZoomEnd={(newZoom) => {
+                                onZoomEnd={(newZoom, newLat, newLon) => {
                                     setZoom(newZoom);
+                                    setLat(parseFloat(newLat.toFixed(6)));
+                                    setLon(parseFloat(newLon.toFixed(6)));
                                 }}
                             />
                             <MapSync lat={lat} lon={lon} zoom={zoom} />

From dc7f8f7f0cb8ce46642d1e2c1d40c4405d5d9d8e Mon Sep 17 00:00:00 2001
From: Open TAK server <opentak@netherlands.fable-jazz.ts.net>
Date: Thu, 16 Apr 2026 15:44:46 +0000
Subject: [PATCH 7/7] fix: lower map z-index on Settings page so header menus
 render above it

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/pages/Settings.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 5a08f88..cfcf19e 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -191,7 +191,7 @@ export default function Settings() {
                             center={[lat, lon]}
                             zoom={zoom}
                             scrollWheelZoom
-                            style={{ height: '500px', width: '100%' }}
+                            style={{ height: '500px', width: '100%', zIndex: 1 }}
                         >
                             <TileLayer
                                 url={TILE_URLS[layer] || TILE_URLS['OSM']}