when-am-i / commit

show lat/long as degrees

84d39e5c8dfdd91e5b71f085be9e70b76ce093da · Pavel Safronov · 2026-06-20 20:40:42 -0700 · parents dc97539adaf7

show lat/long as degrees

 src/App.tsx | 37 ++++++++++++++++++++++++++-----------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index ae21495..fbbf738 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -54,6 +54,21 @@ const SHUFFLE_RECENT_WINDOW = Math.max(0, Math.min(distinctShuffleCalendars - 1,
 
 const sectionLabel: React.CSSProperties = { margin: '0 0 4px', fontSize: '0.85em', fontWeight: 600, color: '#555' };
 
+const toDMS = (D: number, lng: boolean) => {
+    const dir = D < 0 ? (lng ? "W" : "S") : lng ? "E" : "N";
+    D = Math.abs(D);
+    const deg = Math.floor(D);
+    const minFloat = (D - deg) * 60;
+    const min = Math.floor(minFloat);
+    const sec = Math.round((minFloat - min) * 60 * 100) / 100; // Round to 2 decimal places
+    return { dir, deg, min, sec };
+}
+const pickedToText = (picked: { lat: number; lng: number }) => {
+    const latDMS = toDMS(picked.lat, false);
+    const lngDMS = toDMS(picked.lng, true);
+    return `${latDMS.deg}°${latDMS.min}'${latDMS.sec}"${latDMS.dir} ${lngDMS.deg}°${lngDMS.min}'${lngDMS.sec}"${lngDMS.dir}`;
+}
+
 function App() {
     const [picked, setPicked] = useState<{ lat: number; lng: number } | null>(initial.picked ?? null);
     const [pickerDate, setPickerDate] = useState<PickerDate>(defaultDate);
@@ -211,19 +226,9 @@ function App() {
                     <DatePicker value={pickerDate} onChange={setPickerDate} yearBands={yearBands} />
 
                     <p style={sectionLabel}>Where?</p>
-                    <div className="app-map">
-                        <MapPicker
-                            marker={picked ? [picked.lat, picked.lng] : null}
-                            overlays={overlays}
-                            initialZoom={initial.zoom}
-                            recenter={recenter}
-                            onPick={(lat, lng) => setPicked({ lat, lng })}
-                            onZoomChange={setZoom}
-                        />
-                    </div>
                     {picked && (
                         <div style={{ marginTop: 8, fontSize: '0.85em', color: '#888' }}>
-                            Pinned: {picked.lat.toFixed(4)}, {picked.lng.toFixed(4)}
+                            <strong>{pickedToText(picked)}</strong>
                             {geography && (
                                 <>
                                     {' '}&middot;{' '}
@@ -236,6 +241,16 @@ function App() {
                             )}
                         </div>
                     )}
+                    <div className="app-map">
+                        <MapPicker
+                            marker={picked ? [picked.lat, picked.lng] : null}
+                            overlays={overlays}
+                            initialZoom={initial.zoom}
+                            recenter={recenter}
+                            onPick={(lat, lng) => setPicked({ lat, lng })}
+                            onZoomChange={setZoom}
+                        />
+                    </div>
                 </div>
 
                 <div className="app-answers">